[MUSIC JOC] DAVID J MALAN: Bine, bine ai revenit. Acest lucru este CS50. Acesta este sfârșitul săptămânii șapte. Și Finalul acestei măturător de stradă vânătoare de problemă stabilite patru care v-ar aminti. După recuperarea integrală a acele JPEG de personal, ai fost provocat, dacă doriți, pentru a te fotografia cu cât mai multe de acei oameni, după cum puteți. Avem o grămadă de observații în ultimele câteva săptămâni, într-adevăr, destul de puține chiar înainte de prânz astăzi, dintre care unele sunt acelea aici, prins aici in-- pare like-- Annenberg Sala de la orele de birou, o aici în Lowell Casa cu Nick. Iată Ramon fiind prins la telefon. Acest lucru a fost la un prânz CS50. Acest lucru a fost Jason sistemul Skype cu un coleg de clasa mai creativ, care l-au sunat în acest fel. Nu știm ce a fost asta. 

[Râsete] 

DAVID J MALAN: Dar care este în valoare de un gigabyte. Iată Chang, care literalmente a fugit de pe scenă pentru a evita sa fie fotografiat unul zi, dar a fost în cele din urmă prins. Aici e Nick. Aici e Nick. Aici e Nick. Și aici este Alison în funcție de domeniile. Și Zamyla chiar a fost găsit la un concurs sală de bal. Deci, vom merge prin aceste fotografii, dau seama care a prezentat cel mai cea mai veche, și răsplata un premiu fabulos, ca a promis în spec. Și vom urmări și ele despre spațiul care a fost implicat. 

Un cuplu de announcements-- astfel masa de prânz este, din nou, vineri la 13:15. Dacă doriți să vă alăturați nouă, RSVP la acea adresă URL aici. Jason apare din nou aici la un a secțiunilor un cuplu de ani înapoi, ceea ce sa întâmplat să cadă de Halloween. Și într-adevăr, el îmbrăcat ca un dovleac acel an. Dacă te uiți la această secțiune de la 2011 pct său opt, dacă sunteți curioși, la CS50.tv, cred acesta a fost anul în care pompa lui de aer a fost de lucru. 

Dacă te uiți atunci secțiune similară, în 2012, veți vedea această Jason mult dezumflat, deoarece costumul nu mai funcționau, care este doar de a spune aceasta vineri, dacă ai fi Vrei să sculpteze un dovleac cu Daven și Gabe și alții, rog, la capetele la adresa cs50.harvard.edu. Acesta promite să fie foarte distractiv. Daven, ni se spune, a sculptat Dovleci toată viața lui. Gabriel din Brazilia nu are sculptat un dovleac pentru Halloween. Deci, să fie acolo cu ei ca el învață. 

Seminarii, meanwhile-- astfel încât veți afla în curând despre ceea ce așteptările noastre sunt pentru proiectul final, care, în esență, va fierbe până la proiectarea și punerea în aplicare cele mai multe orice proiect de interes pentru tu, chiar dacă sub rezerva aprobării și de orientare de la colegul dumneavoastră de predare. Spre sfârșitul semestru, vom introduce un număr de seminarii, care sunt cursuri opționale condus de semenii didactice și Harvard personal, prieteni ai cursului intreaga campus, pe diverse teme că sunt tangent la Programa de bază curs de dar cu toate acestea este cazul, distracție, și diferit pentru potențialii proiecte finale. 

De exemplu, în primul rând, în cazul în care doriți să se înregistreze, cap de faptul că URL-ul acolo. Și acest lucru este gama de seminarii numai din acest an. Dar dau seama avem zeci de seminarii din ultimii ani, toate din care sunt legate în meniul Seminarii opțiune de site-ul cursului. Deci, dacă te gândești dincolo de zona ta de confort sau ridicarea unor noi competențe, de exemplu, programarea iPhone aplicații cu Swift, o nouă limbă de la Apple sau Objective-C sau Android sau de programare [? tac?] becuri, sau oricare dintre subiectele aici și mai mult, din cauza verificare pagina de înregistrare. 

Așa că am început și încheiat la data de Luni cu uita la HTTP. Deci, HTTP refresher-- rapid, HyperText Transfer Protocol. Dar ce înseamnă de fapt acest lucru? Ce înseamnă de fapt acest lucru? Este faptul că o mână de ajutor? Știu că ești doar lamureste. Dar vrei să propună ceea ce HTTP este? 

Audiența: Cât de calculatoare comunica cu [inaudibil]. DAVID J MALAN: Am ratat ultima parte. Cum calculatoare comunica aplice: 

Serverele de Internet: audienta. DAVID J MALAN: Good-- cu internet servere, și în special, servere de web. Pentru că rechemare, există o grămadă de servicii pe internet, dintre care unele folosiți, probabil, zilnic între chat- și mesajul, chat, și web, și de e-mail, și altele asemenea. Și HTTP este doar protocol care browserele web vorbi atunci când comunică cu servere de web, și vice-versa. Și analogul în lumea umană ar putea fi, Am întind mâna mea pentru a se agită unele alt om și el sau ea recunoaște prin extinderea lui sau mâna la fel de bine. Așa că e doar un protocol, un set de convenții. 

Și ce într-adevăr sunt acele convenții? Ei bine, pur și simplu se reduce la trimiterea de mesaje înainte și înapoi, așa cum am descris aici. Și există o serie de moduri în pe care le puteți trimite aceste mesaje. Și, probabil, cel mai comună este cunoscut ca get. Și vom vedea un contrast la aceasta înainte de mult timp. 

Dar o cerere de a obține de la un browser la server doar arata ca aceasta. E o grămadă de text care se pune în interiorul unui plic virtuale. La exterior din care plic du-te câteva bucăți de detalii. Ce trebuie pentru a merge pe plic, ca să spunem așa, în scopul de a obține o cerere ca aceasta de la mine la un server de web? Da. 

Audiența: Adresa dvs. de IP. 

DAVID J MALAN: IP-ul meu în domeniul de la, să spunem așa, și, desigur, adresa IP destinatarului. Dar, în cazul unui pachet de web, avem nevoie de un pic mai multe detalii Nu este suficient doar pentru a trimite un plic la un server, pentru că acel server ar putea fi ascultare pentru diferite tipuri de din traficul de pe internet. Deci, ce altceva mai avem nevoie în afară de IP a destinatarului? Da? 

Audiența: Este TCP? DAVID J MALAN: Bun. TCP-- 

Audiența: Adresa. 

DAVID J MALAN: Adresă, sau port, așa cum se numește. Aproape, dar un număr de port TCP. Și există o grămadă de acestea. Dar cu siguranță cel mai mult familiar ar trebui în cele din urmă 80, care este implicită unul folosit pentru traficul web. Și un alt familiar unul în curând vor fi 443, care este folosit pentru securizată web trafic, adrese URL care încep cu https. 

Deci, asta este ceea ce se întâmplă în interiorul acestei plic. Și obține / doar mijloace, da mă pagina de web implicit. Dă-mi rădăcina greu conduce pe acel server web. Și, sperăm, pe web serverul va raspunde cu, OK și numărul 200, care este doar o convenție a zis, da, toate este într-adevăr în regulă. Iată pagina. Tipul de pagina web este de gând să fie text, dar mai precis, HTML, pe care suntem pe cale să se scufunde înapoi în. Iar punctul dot dot locații mijloace, aici este HTML. Și asta e în cazul în care ne-am ridica povestea de azi, scris de fapt HTML, HyperText Markup Language, care este limba în care pagini web sunt scrise. Nu este un limbaj de programare. Nu există funcții sau bucle sau condiții. Este un limbaj de marcare, precum și a se vedea din nou astăzi, care vă permite să specificați cum de a structura și stiliza estetic o pagină web. 

Deci, aceasta a fost cea și numai pagina cu adevarat sa uitat la, dacă pentru scurt timp, pe luni. Și observați câteva Caracteristicile importante. Există o mulțime de deschis în unghi suport și aproape placuta unghi. În între cele înclinată paranteze sunt cuvinte. Și vom începe de asteptare aceste cuvinte etichete. Cap de suport atât de deschis și cap de suport inchis sunt tag-uri deschise și închise, sau etichetele de început și sfârșit respectiv, a unui element HTML, așa cum vom numi, numit cap. Și aplică aceeași jargonul la corp în HTML și așa mai departe. 

Și ceea ce este frumos este HTML-- și, într-adevăr, vom petrece foarte puțin timp pe ea, pentru că veți cea mai mare parte doar dau seama ce caracteristici are, atunci când de fapt, au o problemă de beton pentru solve-- veți găsi că un browser este destul de prost. E doar de gând să do-- nu spre deosebire de un computer-- ceea ce-l spune să faci. Și așa că atunci când ai deschis suport HTML la foarte de sus acolo, că, în esență, înseamnă doar, hei, browser-ul, aici vine o pagină web scris în HTML. 

Când vede suport deschis cap, asta înseamnă doar, hei, browser-ul, aici vine cap, sau porțiunea superioară a paginii mele web. Atunci când vede un suport închis cap, asta înseamnă doar, hei, asta este pentru cap. Regimul de așteptare pentru altceva. Și că altceva este se pare că va fi organismul. Iar atunci când nu aveți o etichetă, cum ar fi trebuie doar salut, virgulă, lume, care este doar de gând să fi text crud care în cele din urmă este afișat pe ecran. 

Acum, veți observa prea amprentei aici. Probabil Puteți deduce cum suntem o stylizing. De fiecare dată când deschid o etichetă, ca să spunem așa, am liniuță. Și de fiecare dată când închid o etichetă, ne-am liniuță, similară în spirit de acolade. Și, dincolo de asta, eu sunt un fel de a folosi judecata mea. Observați că nu am deranja lovind Introduceți în interiorul tag-ul care din titlu. De ce? Ei bine, am decis părea o puțin mai curat pentru mine, omul, pentru a nu deranja doar fac asta. Deci, din nou, există unele hotărâre solicită doar ca nu este in C sau orice limbă. 

Dar observați de asemenea că această indentare se pretează la un model mental, nu supra complica ea. Dar un copac, nu? Dacă vă gândiți la un web pagina, aparent scris ca aceasta, ca fiind frumos aliniat în acest fel, vă puteți gândi aproape de suportul deschis HTML suport închis tag-ul este delimitarea rădăcina unui nod, un arbore genealogic nod stil în stilul de copaci ne-am uitat la vinerea trecută. 

Și într-adevăr, avem pe dreapta aici ceea ce vom numi o DOM, D-O-M, documentul Modelul obiect, un mod fantezist de a spune un copac care reprezintă acea HTML. Și observați că HTML are, vom spune, ca un arbore genealogic, doi copii. Pe partea stângă este șeful. In partea dreapta este trupul. 

Și, la fel ca și un exercițiu de gândire fără minte, șef, desigur, are cât de mulți copii în conformitate cu această structură? Deci, doar unul, title-- și de aceea ne-am săgeata merge de la cap la titlu. Deci, este ca și cum acea persoană în arbore genealogic a avut doar un singur pui. Și apoi din titlu se poate se spune că are un copil prea. 

Amintiti-va ca HTML avut Bună ziua, virgulă, lumea de dedesubt. Și am am desenat pur și simplu într-o oval în loc de un dreptunghi doar pentru a transmite semantică faptul că, deși este un nod în copac, ca să spunem așa, e un fel de fundamental diferite. Nu este o etichetă. Sau, mai corect, nu e un element. E doar un nod text, dacă vreți. Dar acestea sunt complet convențiile umane arbitrare. Aceasta este doar felul meu de acum reprezentând ceea ce voi ca un agregat sun documentul. 

Și, ca o paranteza, lucrul la colțul din stânga sus de super, Suport deschis semn de exclamare doc tip HTML, acest lucru arata ca o etichetă, dar este cazul stupid de colț în cazul în care că este pur și simplu acolo, copiat și inserat pentru a indica browsere acest lucru este HTML 5 versiune. Lumea se schimbă ceea ce prima linie de cod într-o pagină ar trebui să fie. Acest lucru înseamnă doar versiunea 5. Asa ca nu destul de arata ca ceilalți. 

În regulă, astfel încât cu a spus, veți aprecia acum acest destul de prost aceasta tatuaj pe cineva prins. 

[Râsete] 

DAVID J MALAN: Bine, și acum hai efectiv se arunca cu capul în a face ceva cu asta. Veți reamintească faptul că ultima dată Am deschis Appliance CS50 și am făcut ceva ca simplu ca deschiderea gedit. Și am salvat fișierul chiar și pe desktop-- mea nicăieri special-- ca hello.html. 

Așa că lasă-mă să fac asta again-- hello.html Enter. Și acum, în acest dosar, am de gând să mergeți mai departe și să reproducă ceea ce tocmai am saw-- tip doc html Apoi am de gând să se deschid html placuta placuta închis. Și apoi am de gând să preventiv deschide și închide tag-ul. De ce? Doar asa ca nu uita mai târziu. E doar o bună practică, cum ar fi de deschidere și închiderea acolade dintr-o dată. 

Și apoi ce a urmat? Vă puteți gândi de tatuaj. 

Audiența: cap. 

DAVID J MALAN: cap. Și apoi aici, m-am a avut titlul, cred. Și titlul era arbitrar, Bună ziua, lume din titlu aproape. Și apoi aici, corpul, de course-- apoi ne închideți tag-ul body. Și apoi doar oarecum redundant, Am avut același lucru aici. 

Așa că am susțin că aceasta este o pagină web. Acest lucru este ceva care ar putea trăi acum pe web, chiar dacă, desigur, este literalmente care trăiesc pe desktop chiar acum. Dar, într-adevăr, dacă am reduce la minimum gedit, Voi vedea pe desktop pictograma sa. Chiar dacă acest lucru este aparatul, ai putea face acest lucru pe Mac OS fără TextEdit sau Ferestre cu Notepad chiar. 

Și dacă am merge mai departe și dublu clic că, chiar și select-- bine, să Nu selectați asta pentru că Chrome nu se deschide. Să mergem mai departe și să deschideți Chrome. Și apoi face comandă-O pentru deschis Și să navigați pe desktop-ul meu și deschideți acel fișier. Acesta este modul în care interpretează un browser HTML, de sus în jos, la stânga la dreapta. Hei, browser-ul aici e HTML. Iată capul. Iată titlul. Iată corpul. Și într-adevăr, acesta este modul se face că pagina web. 

Dar observați URL-ul. Nici unul dintre voi ar putea trage acest specific pagina pe laptop-uri, chiar acum, chiar în interiorul tău aparat prin faptul că URL-ul, deoarece file: // indică de fapt pe sistemul meu de fișiere, hard-disk, nu a ta. Deci, acest lucru nu este tot ceea ce util. 

Să acum muta spre utilizând un server web actuale. Și se pare că CS50 Appliance este mai mult decât un mediu în care puteți scrie cod C și compila și rulați-l ca și cum le-ați făcut. De asemenea, a fost configurat de către personalul să reprezinte un web tipică server care e pe internet, una care v-ar plăti pentru sau unul care este în așa-numitul nor. 

Și se rulează standard, open source gratuit software, de exemplu, ceva numita Apache, care este, probabil încă cel mai popular web software de tip server în lume că mii de site-uri web folosesc astăzi. Și este, de asemenea, chiar are software-ul ca MySQL, care este un server de baze de date că vom ajunge în cele din urmă la, care este doar de a spune Eu pot începe tratamentul aparat mea ca un server cu drepturi depline că eu nu plătesc pentru în altă parte. Pur și simplu trăiește pe propria ta laptop pentru în scopuri de dezvoltare și de cartier. 

Așa că hai să mergem mai departe și să profite de acest lucru. Am de gând să merg mai departe și deschide o fereastră terminal. Și am de gând să merg mai departe și move-- de fapt, în primul rând eu sunt de gând să mergeți la desktop-ul meu. Dacă o fac E, nu e hello.html. Și am de gând să merg înainte și începe să utilizați un nou director ne-am nu este utilizat înainte de ziua de azi. 

hello.html-- am de gând să se mute a ../vhosts pentru hosts-- virtuală mai mult pe faptul că, în viitor: și apoi într-un director numit localhost, care este porecla dată de aproape orice calculator, indiferent dacă este un Mac, PC, sau Linux calculator, și apoi în mod special într-un director pe care noi, personalul deja creat pentru tine, atunci când ai descărcat aparatul numit publică. Și, după cum și numele sugerează, nimic Am pus în acest dosar, în teorie, va fi acum publice, cel puțin la oameni care au o directă conexiune la calculatorul meu. 

Deci, acum lasă-mă să merg mai departe și face cd aceleiași director așa că am putea vedea ce e întâmplă și tastați ls. Și într-adevăr, asta e Singurul lucru pe acolo. Eu susțin acum că pentru că am pus această fișier hello.html interiorul unui director numit în interiorul publică a unui director numit localhost interiorul unui director numite vhosts, care datorită personalului CS50 a fost pre-configurat pentru a fi rădăcina serverul de web, Pot să sperăm că face acum acest lucru. 

Am de gând să deschidă o filă nouă. Și am de gând să merg să nu depună: //. Am de gând să utilizeze efectiv http / localhost, care din nou, este porecla pentru propriul meu server de. Și apoi am de gând să merg la ce numele de fișier, doar pentru a fi clar? În cazul în care se povestea asta, probabil, merge? hello.html. 

Deci, cu alte cuvinte, vreau sa acum acest este propria mea computerul, propriul meu aparat, ca și cum e un server actuale. Porecla sa este localhost. Dar cred că de localhost ca cum ar fi Facebook.com google.com, indiferent de. E doar numele meu local. Și apoi finala vreau este în rădăcină de pe hard disc, ca să spunem așa, sau radacina a serverului web, ergo slash și apoi hello.html nume de fișier. 

Lasă-mă să zoom out și apăsați Enter. Și într-adevăr, există acum pagina mea de web. Deci, e puțin diferit. Și e la fel de underwhelming. Aceasta este versiunea veche. Lasă-mă să micsora fontul spate. Aceasta este vechi. Aceasta este noua. Dar ceea ce se întâmplă în mod fundamental acum este faptul că HTTP este utilizat. 

Să facem acest lucru un pic mai clar sau, dacă vreți, un pic mai complicat. Lasă-mă să merg la dreapta jos Cornerul este parte a aparatului meu. Și observați că toată această timp, a avut loc un număr. Aceasta este adresa unică de aparatul CS50. E o adresă privată, cum implicate de 172.16, ceea ce înseamnă doar numai tu fizic pot accesa acest server web. Totul este in spatele unui firewall și frumos protejat de restul din lume, din această cauză adresare. 

Și acum observați, deși, dacă mă duc la această adresă, nu în aparat mea, dar în Mac OS-- am de gând să mă întorc aici. Aceasta este Mac-ul meu acum. Și acum am de gând să deschidă această versiune de Chrome aici. Și am de gând să merg la http: //172.16.25 / Și am uitat rest-- 133. 

Așa că am de gând să-l vizitezi din Mac-ul meu că adresa IP /hello.html Enter. Și acum văd de la Mac-ul meu că CS50 Appliance mea, care e Adresă IP este că număr, este într-adevăr comportă ca un server web de pe internet. Ea nu are un frumos ușor de amintesc nume ca Facebook.com, dar se folosește HTTP aparent, chiar dacă Chrome este un fel de simplificare a lumii pentru noi, dar nu ne arată HTTP. Dar acest lucru este într-adevăr exact acest lucru. Chrome este doar de economisire unele intrarile de la tastatura in aceste zile. Și asta este ceea ce vedem acum. 

Deci, asta e tot bine și bună. Dar este o pagină destul de underwhelming. Lasă-mă să merg și să fac ceva un pic diferit acum. Așa că lasă-mă să mă întorc la gedit. Și în loc de salut, lume, sa pus o imagine. Și am pretins de la before-- lasă-mă să merg în mea publică director localhost. Și lasă-mă să merg mai departe și a copia un grămadă de fișiere de azi din dosarul meu de Dropbox în aici. 

Acum, dacă am de tip ls, uita-te la toate aceste fișiere care le-am distribuit de către site-ul curs, în avans de ziua de azi, dintre care unul este încă hello.html. Deci nu e asta. Și amintesc asta prostesc de la ultima cat.jpg time--. Așa că lasă-mă să încerc să încorporați cat.jpg interiorul pagina mea de web. 

Am de gând să merg mai departe și de a face cat.jpg, salva. Lasă-mă să mă întorc la Chrome. Și lasă-mă să zoom în font și acum reîncărca. Hopa, unde am pus acest lucru? Standby-- am încă vechi Versiunea de la deschis meu desktop. Așa că lasă-mă să intru în vhost mea, mea localhost, publicul meu, și hello.html. Deci, acum lasă-mă să merg mai departe și spune cat.jpg interiorul corpului în cazul în care vreau să fie afișate și reîncărcați. Desigur, acest lucru nu este corect. 

Așa că am nevoie să spun browser-ul un pic mai mult în mod deliberat ceea ce vreau să fac. Pur și simplu introduceți numele este în mod evident, nu este suficient. Astfel amintesc că a existat un alt tag-ul, imagine, img scurt. Asta doar pentru că oamenii Nu-mi place tipul cuvintele pline. Și apoi putem face source = "cat.jpg". 

Și acum am de gând să fac un lucru diferit aici. Chiar dacă toți Tag-uri noastre au până acum a avut această noțiune a unui începe tag-ul și o eticheta de final, care nu face într-adevăr sens pentru o imagine, nu? O imagine este fie acolo sau nu acolo. Și astfel oamenii au venit cu o convenție simplu. Cand ai o etichetă care poate atât începe și se termină în același time-- ea poate fi gol, astfel încât să speak-- doar a pus slash interiorul tag-ul la sfârșitul. Acum, lasă-mă să mă întorc la browser-ul meu. Hit Reload La naiba, ceva e în neregulă. Ați văzut, probabil aceasta ocazional pe web, chiar dacă aceasta nu a fost vina ta. E vina serverul de web. Ce ode par să indice acest lucru? E rupt. Asta în cazul în care face parte imaginea. Da? 

Audiența: Dar nu o face au acces la imagine. 

DAVID J MALAN: nu au acces la imagine. Asta, sau chiar mai rău, poate aceasta nici măcar nu există. Să vedem dacă nu putem diagnostica asta. Rechemare din ultima dată că, dacă în Chrome, în aparatul, sau chiar pe Mac sau PC-ul dvs., te duci la meniul Developer și du-te la Tools pentru dezvoltatori opțiune, care, probabil, le-ați care nu sunt utilizate de mult sau vreodată. Și dacă mă duc în rețea și reîncărcați pagina, permite, de fapt, uita-te la HTTP cererile care sunt făcute. 

Se pare ca hello.html este într-adevăr, OK, deci 200. Dar cat.jpg este o 403. Deci, nu e un 404. Fișier probabil există. 403 înseamnă interzisa. Deci, acesta este un pic confuz. Am de gând să mă întorc la fereastra mea terminal. Lasă-mă să mări de până aici. Și să-mi fac o ls. E aceleași fișiere. 

Acum, permiteți-mi să fac o ls-l, pe care le-am, probabil, folosit înainte să se uite la dosar Dimensiunile poate sau marcajele de timp. Și vom vedea o grămadă de informații copleșitoare. Dar observați câteva detalii. Iată hello.html în acest rând aici și aici este cat.jpg. Și e doar aparatul fiind user friendly prin evidențierea lui JPEG în violet ca aceasta. Dar ce altceva este diferit lângă dimensiunea fișierului și numele de fișier? 

Audiența: [inaudibil]. DAVID J MALAN: Da, nu e mai mult de două R e aici. Observați ce hello.html a merge mai departe. Deci, se dovedește că numele lui public acest director este important. Nimic în acest director este menit să fie publice. Dar nu e suficient doar pentru a fixa fișierele în acolo. De asemenea, aveți nevoie pentru a schimba modul de fișiere, schimba permisiunile fișierul proactiv nu fi setarea implicită, ceea ce este că doar eu pot citi și-l scrie, eu fiind proprietarul. Vreau întreaga lume pentru toata lumea fie capabil să citească dosarul meu, ca să spunem așa. Citește înseamnă doar ao vizualiza. 

Și într-adevăr, așa cum veți vedea în problemă stabilit șapte, asta e ceea ce înseamnă aceste R lui. Înseamnă aceste două R de toată lumea altundeva în lume, de asemenea, citit-o, mai ales acum că este în acest director. Deci, cel mai simplu mod de a stabili acest lucru este de a du-te la prompte mea și de a face chmod pentru schimbare Mod și apoi face o + r, cu totul, pentru toată lumea, toate, plus r de citit, și apoi cat.jpg Enter. Nimic nu pare să se întâmple, care de obicei, înseamnă un lucru bun. Deci, ls-l again-- acum să ne uităm la cat.jpg. Și această permisiune par să se fi schimbat. Ca o paranteza, dacă faceți o greșeală și tu, de exemplu, doar voi your-- eu nu stiu-- eseu accesibil publicului prin accident, poti sa faci exact opusul, chmod o-r. Desi sincer, nu ar trebui fie în directorul publică oricum, dacă asta e preocuparea. 

Deci, acum să ne întoarcem la Browser-ul și reîncărcare mea. Și am de gând să faceți clic pe mic Ghostbusters simbol să îndepărteze acea parte a ecran astfel încât să putem vedea noi cereri. Și într-adevăr, aici este Cat Grump de mai înainte. Dar, mai important, punct de vedere tehnic, există numărul 200, care înseamnă că a luat-o bine. Bine, asta e tot bine și bună. Dar noi nu facem cele mai bune site-uri, nici nu vom încerca prea greu pentru a face cele mai fancy de site-uri de azi. Dar hai sa facem ceva, cel puțin super-familiar înainte zăngănit de pe alte cateva tag-uri. Deci, să presupunem că nu vreau doar o pisică aici. Să presupunem că vreau de fapt acest lucru pisica să se leagă de ceva. 

I s-ar putea, de exemplu, face așa ceva. o ancoră pentru href pentru equals-- referință hiper și hai să facem ceva cum ar fi www.google.com închidere cita suport aproape. Și acum caută pisici. Închide ancora tag-ul. Deci, aceasta are doar un fel de fundamental noi detaliu. Tag-ul, desigur, este diferit. E un nume de ancora pentru referință href sau hiper. 

Dar, mai important, nu e această funcție sintactică aici. Aceasta este ceea ce vom începe de asteptare nu o etichetă, ci un atribut. Și un atribut este ceva care modifică comportamentul unui tag. Și acest atribut, href, mijloace modifica comportamentul de această ancoră astfel încât atunci când este apasat, merge la această adresă URL aici. Și, bineînțeles, că URL-ul este Google. 

Între timp, ceea ce este aceasta textul de aici o să fie? Ei bine, care va fi ceea ce omul de fapt vede ca Subliniat link-ul, la fel de simplu ca asta. Așa că hai să încercăm acest lucru. Lasă-mă să-l salveze. Sunt încă în hello.html. Dar, în versiunile on-line, veți vedea numele fișierelor reale cu care ne pre-pregătit. Lasă-mă să mergeți mai departe și să reîncărcați. Și acum e un foarte pagina underwhelming încă. Dar dacă treceți peste there-- și e un pic mai mic, dar-- puteți vedea în partea de jos coltul din stanga a ecranului, este într-adevăr de gând să google.com. Și dacă faceți click că, aceasta va amestecati-mi mod efectiv, în Google. 

Dar observați aici o oportunitate pentru exploatare, la fel ca și o parte. Și ne întoarcem la alte probleme de securitate înainte de mult timp. Pentru că există această dihotomie între unde te duci și ceea ce spui, ai putea face ceva de genul astea-- http://www.google.com. OK, iar acum dacă am reincarca după salvarea acea pagină, se pare ca am de gând să merg la Google. Dar nu e nici un motiv I trebuie să meargă la Google, nu? Aș putea merge de fapt la ceva de genul badguy.com, reîncărcați pagina aici. Și aviz, aceasta încă arată ca Google. Și numai dacă sunt ascuțite suficient pentru a trece peste aici nu am vedea că este chiar o să du-te la o locație diferită. 

Deci, dacă ați ajuns vreodată un e-mail, în special unul din Paypal, sau aparent de la Paypal care vă solicită să vă conectați la la contul dvs., acest De aceea, trebuie niciodată faceți clic pe link-uri vreodată în e-mailuri, sincer, orice link-uri din e-mailuri. Dacă știți că aveți real bani in Paypal sau bancar ale Americii sau Fidelity sau orice site-ul, introduceți-l manual în. Pentru că uite cât de ușor este să truc cineva în prezentarea ce Se pare ca un link. Dar de fapt ar putea du-te absolut oriunde. 

Și nu e cu mult mai mare amenințări decât aceasta. De fapt, acesta este un pic de o tangentă acum, dar una din cele mai bune l-am văzut vreodată care a fost închis, este cineva condus de oameni sa-- astfel încât aceasta s-ar putea spune, click aici pentru a vă conecta la dumneavoastră cont, un cont bancar. Și acest lucru a fost Banca de Vest. 

Deci, cineva a cumpărat acest lucru. Și e un pic mai ușor pentru a vedea într-un font mono distanțate mărită într-un proiector de 30 de metri. Dar atunci când este font mic într-o e-mail pe care îl primiți, acest lucru arata ca bankofthewest.com, nu bankofthevvest.com, care cineva a plătit 10 dolari pentru a cumpara. Și apoi acest lucru le dus la echivalent de unele site-ul rău. 

Și veți vedea too-- de fapt, putem face astea-- dacă mă duc la site-ul real, bankofthewest.com, din nou, rechemare din ultima perioadă că în cazul în care aceasta este pagina lor web și esti curios cu privire la modul în care funcționează, poti sa te duci cu siguranță la Instrumente de dezvoltare Chrome. Și puteți vedea toate HTML frumos formatat acolo. 

Dar mai mult, până la punctul, tu cam-- să închidă asta: poti sa te duci la View Developer View Source. De ce nu doar să copiați toate astea Și atunci am poate intra în fereastra mea gedit mic aici și să-mi pagina web proprie. Salvați această în hello.html. Și, probabil, acest lucru se va rupe, pentru ca nu este atat de usor de obicei. Dar acum, dacă am reincarca propria ta pagina pe propria ta CS50 Appliance și reîncărcare a lovit, OK, niște chestii rupt. Dar sunt destul de aproape de a avea site-ul meu bancar propriu, nu? Toate acestea HTML-- 

[Râsete] 

DAVID J MALAN: --I Nu actually-- și tu știu că e cineva acolo care ar click fapt, aceste link-uri prea. Deci, în mod clar, unele chestii rupt. Dar care va conduce ne într-o discuție, inutil chiar acum, cu privire la ce CSS, foi de stil în cascadă, sunt, si se pare ca tu de fapt descarca alte fișiere HTML și JPEG Fișiere GIF că site-ul ar putea fi utilizați. Dar toate acestea sunt realizabile. Dar într-adevăr se reduce la aceste euristici foarte simplu. 

Deci, acum hai să răsfoiesc prin intermediul unui câteva alte exemple de HTML doar pentru a vă oferi un sentiment de ce altceva mai puteți face. De exemplu, aceasta este list.html. Să presupunem că am vrut să fac o pagină web cu o listă de case din quad. S-ar putea folosi eticheta ul pentru neordonate listă și apoi copilul element listă și apoi repeta over-- sau listă, rather-- casele în cauză. 

Și dacă am deschis asta, să facem acest lucru. Să mergem nu la hello.html, dar la list.html. La naiba. Cum pot remedia acest lucru? E aceeași problemă ca și mai înainte, nu? Așa că lasă-mă să fac oops-- chmod-- chmod o + r de list.html. Și acum, dacă mă duc înapoi la browser-ul meu și faceți clic pe Reload, nu este. Deci, dacă v-ați dorit vreodată să facă o listă cu marcatori, poți să faci asta. Daca vrei sa fi super-fantezie și face o lista ordonata, nu o lista neordonata, schimba cei ol, reîncărcați pagina, și acum browser-ul va număra pentru tine. 

Ce altceva putem face? Ei bine, o pereche de others-- în cazul în care ai alineatele lungi de text-- de exemplu, unele Text latin ca asta: și tu o vrei la punctele distincte, p deschis, aproape p pentru tag-ul paragraf. Și o facem din nou și din nou. Și dacă am deschis acum cu acest dosar, paragraphs.html, ei bine, acest devine enervant. Deci, acum hai să mergem înapoi la meu prompte, chmod a + r r stea .html-- o carte frumos sălbatic mic ca să spunem așa. Acesta ar trebui să stabilească toate aceste probleme pentru mine. Să reîncărca. Nu e de trei paragrafe. 

Și acum să mergem mai departe și deschide un altul. Ce zici de masă? Veți observa aspectul de masă un pic mai complex. Dar e aceeași idee, tag-ul deschis, tag-ul deschis, deschis, deschis, deschis, tag aproape, tag-ul deschis. Și acestea se întâmplă să stea masă, a cărui frontieră este aparent Va fi o grosime 1-- indiferent că rând tabel means--, masa de date, ceea ce înseamnă o celulă. Și dacă mă duc înapoi la browser-ul meu aici și du-te la table.html, puteți vedea ceva ca aceasta, hidos. Dar vom ajunge la punctul unde putem de fapt face lucrurile mai frumos decât asta. 

Așa că lasă-mă să prevadă pentru acum. Nu e buchete de mai multe tag-uri. Și HTML este minunat pentru a ridica pentru că, sincer, tot ce trebuie sa faci este sa te uiti la paginile web existente cu care ești familiarizat. Și tu ești ca, oh, așa au facut acest punct de vedere estetic. 

Sau poti sa te uiti la orice on-line resursă ca să cum functioneaza HTML, și veți vedea că există o vocabular întreagă de alte tag-uri. Dar cu modelul mental simplu numai că aproape orice etichetă deschideți trebuie să fie închis, într-adevăr este suficient pentru a se preda HTML după înțelege aceste idei de bază ale tag-uri și atributele și bine formate că am vorbit despre, închiderea ceva care ne-ar putea deschide astfel încât să nu se confunda un browser. Așa că haideți să ia acum asta un nivel mult mai interesant de a merge la real. Și să mergem la Mac-ul meu aici, la google.com. Și acum notice-- să facem acest lucru. Mă gong să merg la Setări, Setări de căutare. Vreau să dezactivați această clipă enervant Rezultate lucru în cazul în care imediat începe răspuns la tastarea ta. Să facem aceasta scoala vârstă atât de noi de fapt vedem ce se întâmplă. 

Așa că am de gând să salveze meu Setările Google aici. Și acum notice-- am de gând să caută ceva de genul pisici. Și este încă face auto complet aici, dar pe baza lucrurilor oamenii au scris în trecut. Dar observați ce se va întâmpla. 

În URL-ul în acest moment este aceasta, doar google.com. Și punct de vedere tehnic, e slash. Google e doar un personaj de economisire și nu ne arată că. Ele sunt arătându-ne https, doar a fi super liniștitor că suntem la o pagină securizată sau criptat. 

Așa că lasă-mă să mergeți mai departe și de căutare pentru pisici. Acum, aceasta a primit într-adevăr copleșitoare repede. Uită-te la lungimea de acest URL. Dar se pare că cele mai multe din aceste lucruri în URL-ul este, de fapt destul de inutil. Am de gând să înceapă ștergerea lucruri pe care nu le înțeleg. Văd pisici. Am înțeles pisici. Nu știu de ce pisicile sunt acolo din nou. Eu chiar nu știu ceea ce acest nonsens este. Deci, eu sunt doar de gând să păstreze evidențierea și ștergerea chestii că eu nu înțeleg, distilarea URL-ul în doar asta. 

Acum, lasă-mă să te intra din nou. Se pare că Google încă mai funcționează. Deci, pentru un motiv oarecare, ei adăugând o mulțime de lucruri pentru a implicit URL-ul lor. Dar nu este strict necesar. Deci, ce este frumos despre asta? Ei bine, lasă-mă să mergeți mai departe și deschide Inspector Chrome. E o scurtătură mouse-ul mic pentru el. 

Du-te la fila Rețea. Și acum lasă-mă să reîncărcați aceasta pagina încă o dată. Și eu care deține Shift. Ca o paranteza, browsere au tendința de a cache sau salva informații doar de dragul eficienței lui. Dar, de obicei, care deține Shift și reîncărcare va forța tot pentru a porni de la început. Și asta e ceea ce vreau să fac aici. 

Și observați toate acestea rânduri că tocmai a apărut. Se pare că, în orice web dat pagina, ar putea fi doar un singur fișier involved-- hello.html-- sau acolo ar putea fi 52, ca și în acest caz. Când m-am vizita google.com, aparent, browser-ul meu începe 52 de cereri HTTP separate. De ce este asta? 

Ei bine, uita-te la ceea ce este în interior a acestei pagini web până sus. Nu e doar text, dar există din imagini reale de pisici peste la dreapta. E un logo colorat aici, la stânga. Nu e toate aceste icoane pentru un microfon și așa mai departe. Există o mulțime de piese, construind Blocuri, piese de reîncărcare, dacă vreți, la aceasta pagina web. Și ce browser-ul este de a face pe asistent primul dosar, care este acest rând aici, acesta este, în esență, iterarea peste partea de sus HTML în jos, la stânga la dreapta, în căutarea lucruri cum ar fi etichete de imagine sau alte tag-uri care sunt de menționat alte fișiere și atunci când le vede, se duce și le preia prin HTTP, tot viabil metaforă plic, și apoi le afișează în loc adecvat în pagina web. 

Dar observați aici, dacă mă concentrez asupra primele pisici mingea de la margine, de căutare, observă că, într-adevăr, se folosește HTTP 1.1. Și, din păcate, Google Chrome chiar acum în versiunea 39 este un fel de lucruri amuțire jos și Nu ne arată antetele reale. Dar ceea ce a fost, într-adevăr trimis este o cerere pentru a nu reduce, ci / căutare? q = pisici. 

Acum, de ce este așa de important? Ei bine, am de gând să deducă din aceasta că, dacă Google sprijină interogări ale acestui formular, de ce Nu am pune în aplicare propria ta căutare motor pentru CS50, dar doar partea din față capăt, doar interfața grafică de utilizator. Și vom externaliza capătul din spate, căutarea real rezultatele la Google. 

Deci, cum pot face acest lucru? Ei bine, lasă-mă să intru în gedit aici. Și lasă-mă să merg mai departe și deschide în sus, să zicem, un nou fișier. Și am de gând pentru a salva acest temporar în calitate de căutare-0.html. Și apoi în cele din urmă, vom rapid înainte de cea pe care am pre-pregătit. 

Și am de gând să biciul rapid tip doc html suport deschis html aproape html suport. Apoi am de gând să fac cap închidere cap titlu deschis CS50 Căutare în loc de căutare Google. Aici am de gând să aibă organismul, aici aproape corpului. Și acum am nevoie CS50 căutare. Și, de fapt, să construi acest incremental. Am de gând să mergeți mai departe și să închidă acest lucru și de fapt, pune-l în directorul meu public. Deci, da-mi doar o clipă. căutare-0.html-- am de gând să temporal se numesc search.html. Am de gând să-l chmod a + r search.html. Și acum am de gând să-l deschidă. În regulă, astfel încât a fost rapid. Dar scopul pur și simplu a fost pentru a ne ajunge la punctul de de a avea acest text fișier numit search.html. Deci, nu de mult să se uite la încă. Într-adevăr, dacă mă duc la browser-ul meu, și du-te la search.html, asta e tot ce este. Dar știi ce? Pot fi un pic crescator. Am citit într-o carte că există o etichetă poziție numit h1. Și am de gând să merg mai departe și utilizați ca h1 deschid și se închid h1. Reîncărcați pagina. Și acum e mai mare și mai îndrăzneață, Nu tot ceea ce interesant, dar cel puțin structural mai interesant. Dar acum, permiteți-mi să introducă o altă etichetă. Se pare că există o etichetă formular. Și lasă-mă închide această etichetă. Și se pare că nu există o etichetă de intrare care are un atribut numit tip, care este tipul de date de pe teren, dacă vrei. Și va fi de tip text. Iar valoarea sa este de gând pentru a fi CS50 căutare. Închide etichetă. Și nu va fi nici o noțiune de deschiderea și închiderea cu tag-uri separate. 

Lasă-mă să mă întorc aici și a se vedea ce se întâmplă, a reîncărca. Noțiuni de bază interesant. Se pare că e un câmp de text. Și, de fapt, n-am vrut pentru a pune o valoare acolo încă. Lasă-mă să mă întorc aici și de fapt a obține scapă de această valoare să-l păstrați simplu. În loc de o valoare, ceea ce mi-am dorit pentru a se obține acest lucru a fost un nume. Și eu nu știu ce este, așa că voi reveni la asta. 

Dar de mai jos că, vreau să facă input type = submit. Și această valoare va fi CS50 căutare. Și vom vedea de ce am sa mutat la valoarea de acest lucru. Când m-am reincarca, mi se pare să aibă acum începuturile propria ta căutare motor, super hidos, deși sincer, e Nu mingea de la margine departe de ceea ce Pagina implicit Google arată. 

Dacă mă duc aici, acum, am posibilitatea să tastați în pisici și, sperăm, faceți clic pe Căutare. Dar eu nu sunt destul de terminat încă, pentru că nu au pus în aplicare, în mod evident, o bază de date. Nu am târât web pentru rezultatele de căutare. Așa că am nevoie să externalizeze care la Google. Deci, cum fac asta? 

Ei bine, în primul rând I trebuie să adăugați și acțiune atribuie formă tag-mi că este http://www.google.com/search. Și știu că doar de a avea dedus uitandu-te atent la URL-lor. Și acum să ia o presupunere. Ce ar trebui acest câmp de text, probabil, fi numit, pe baza de unde am venit de mai înainte? 

Audiența:? Q. 

DAVID J MALAN:? Q. Și nu avem nevoie de fapt întrebare marca se pare, dar q este într-adevăr, q de interogare, probabil, de În mod implicit, doar pentru că asta e ceea ce Larry și Sergey a venit cu ani în urmă. Deci, acum lasă-mă să reîncărcați această pagină. Ea nu arata tot ce diferit. Dar ai grija acum ce se întâmplă. 

Dacă tip I la pisici și click CS50 Căutați și da drumul, observați voi fi whisked departe de real Google. Acum, Google este în curs un pic enervant în care acestea sunt adăugarea unui parametru adițional, dacă vreți, la adresa URL. Asta e tot întâmplă în mod automat pe partea Google. 

Partea importantă este că mi se pare să fi generat această cerere aici. Și într-adevăr, asta e ceea ce se întâmplă. Cand ai HTML care arata ca acest lucru, aceasta este un fel de notație dezvoltatori web pentru a spune, merge mai departe și de a crea un formular că atunci când este prezentată, se va merge la această adresă URL. Și când a furnizat adresa URL Valorile pentru lucruri cum ar fi q, nu merg doar la această adresă URL. De fapt, du-te la întrebarea marca și apoi q = pisici. Adăugați parametrul, Parametru HTTP de genul asta. 

Și doar pentru a fi super-precise, ceea ce se deduce here-- dar voi fi mai explicit-- este că metoda vreau să utilizeze este de a lua, în loc de ceva de genul poștă, pe care vom vedea în cele din urmă. Deci, pe scurt, pur și simplu prin înțelegere HTML și utilizarea unor tag-uri destul de simplu, putem incepe acum pentru a crea propria noastră utilizator final din față interfață cu o căutare motor în spatele ei. 

Dar aceasta, desigur, este destul de hidos. Așa că lasă-mă de fapt deschid o versiune ceva mai bine. Aceasta este cea pe care am preparat în avans care are unele comentarii. Dar veți vedea că am destul de mult recreat. Deci, acest lucru este deja disponibil on-line. Și eu sa întâmplat să preventiv Mergi la https doar să-l păstrați simplu. 

Și acum să deschidă o următor repetare a acestui. Este versiunea 1 în loc de 0. Ce sare la tine la fel de ușor diferit în acest exemplu? 

Audiența: [inaudibil]. 

Da, e un centru alin text. Acesta este un pic ciudat aici. Dar acest lucru este într-adevăr nou. Și poate ghici ce se va întâmpla. Dacă mă duc la browser-ul meu acum și vizita căutare-1.html, e aproape același lucru. Dar e un pas mai aproape de fiind un pic mai frumos. E încă urât, dar mai frumos în această cel puțin tot ce e acum centrat. 

Deci, se dovedește că ceea ce eu sunt, folosind este o altă limbă numită totul CSS, foi de stil în cascadă. Și CSS, sincer, este un fel de, în opinia mea personală, un limbaj atroce proiectat. Este foarte enervant să-și amintească toate diverse detalii. Dar aceasta este ceea ce stylizes întregul web astăzi în întreaga lume. Am jignit pe cineva. Bine. Așa că haideți să ne întoarcem aici și vezi cum suntem de fapt, folosind acest lucru. Și se pare că, cel puțin e de fapt un limbaj destul de simplu. E doar perechi de valori-cheie, proprietăți și valori, proprietăți și valori. Într-adevăr, aici este o astfel de proprietate și valoare. 

Pur și simplu prin utilizarea stilului atribut pe etichetă corpul meu și dându-i o valoare de un colon cuvânt și un alt cuvânt, sau o proprietate și o valoare, Eu pot afecta estetica a paginii web, nu în mod necesar structura încă, dar estetica ea. Și, la fel de Googling în jur, îmi dau seama ca foi CSS, de stil în cascadă, sprijină o proprietate numită text-align, a căror valoare poate fie la stânga, dreapta, centru sau, de exemplu. 

Așa că acum, când am reincarca această pagină, ceea ce am primit a fost o pagină centrat, dar încă destul de urât. Să mergem mai departe și să deschideți la versiunea 2 a de căutare. Și acum observați am facut un pic mai mult. Observați că aici în interiorul capului tag-ul, pot exista mai mult de titlu. De fapt, există o etichetă de stil. Și acest lucru este în cazul în care acesta devine doar un pic dezordonat CSS văzând uneori. 

Observați că am par a avea ceva că structural arată foarte diferit. Dar aici este numele tag-ul vreau să stilizate. Acestia sunt prietenii noștri vechi creț bretele și acoladă închisă. Și apoi aici este că proprietatea și valoarea sa. 

Dacă aș încărca acest fișier, search2.html, rezultatul final este identic. Dar e un pas spre design mai bun. De factoring în această CSS, n-am nu-l combinate cu HTML meu. Și într-adevăr, așa cum vom vedea, aș putea reutilizarea acestor proprietăți și valori. Dacă aș fi vrut să fac buchete de Piese de pe pagina mea de web centrat, Nu trebuie să tastați style = text-align Centrul peste tot. Pot pune într-un singur loc probabil, ca până în partea de sus. 

Dar chiar și acest lucru nu este cel mai bun design. De fapt, unul dintre lucrurile pe care le veți învăța cum iti petreci mai mult timp cu Programarea web este că mai mult vă poate modularizarea lucruri și lucruri factor out cum ar fi fișierele .h să ne chestii factor afară, Vrei helpers.c Să ne lucruri factorului de afară în urmă cu câteva psets. În mod similar, s-ar putea noi doresc să realizeze acest lucru. 

Deci, observa in versiune trei de search.html Am curățat capul de pagina și pune doar în acest sens, o etichetă link, care contrar numelui, nu vă dau un hyperlink. Se leagă de un alt fișier cu titlu de o href a cărui valoare în acest caz, Cautare-3.css Așa că îmi dau seama mergem repede. Dar tot ce fac este un fel de lucrurile în mișcare în jurul valorii. Lasă-mă să-deschis căutare 3.css. Acolo este, într-adevăr nimic la ea. Tocmai am copiat și inserat o într-un nou fișier, la fel ca ne-am luat chestii în alte fișiere înainte. Și result-- complet underwhelming-- va fi exact la fel. Dar ne mișcăm toward-- nu, nu e. Oh, știu de ce. 

Deci, se pare a fi un bug. Și este într-un anumit sens. Dar permiteți-mi deschid contul meu de rețea. Lasă-mă să reîncărcați pagina. Ah, de ce este CSS nu se aplică? Ei bine, fișierul CSS, în mod similar, are pentru a fi ușor de citit lume, ca să spunem așa. Și se prea este în prezent interzisă. Așa că lasă-mă să fac un un chmod + r de stele dot CSS-- whoops-- Suntem punct CSS este doar extensie de fișier pentru fișierele CSS. Acum, lasă-mă să mă întorc la Browser-ul și reîncărcare mea. OK, un pic mai bine. 

Acum, lasă-mă să fac un ultim lucru. În căutare-4.html. Eu am o versiune care tocmai m-am gândit a fost mult mai rece, deși mult mai complicată. Să ne uităm la rezultatul primei. Închideți acest lucru pentru a ne oferi mai mult spațiu. Schimbați această a căuta-4, Enter. 

Și acum o gramada de lucruri sunt rupte. Am de gând să mă întorc în directorul meu aici. Și acum am doar de gând să faci un chmod a + r pe un file-- pentru că știu că exists-- numit logo.gif, care este o imagine. Și acum reîncărca. Și wow-- așa că acum eu sunt destul de aproape, sincer, pentru ca versiunea 1999 a Google, și sincer, versiunea 2014 a Google, dreapta? 

Așa că acum o să site-ul lor, în cele din urmă, dacă am căuta pentru pisici. Și într-adevăr este. Dar ce am făcut diferit în această versiune de 4? Deci, nu vom insista prea mult pe ea aici. Veți vedea acest lucru în probleme stabilit șapte în cele din urmă. Dar observați am făcut câteva lucruri. 

Am introdus un div tag-ul, care este divizie, similară în spirit la o etichetă paragraf. Dar o divizie este la fel ca, aici e o regiune invizibil dreptunghiular a ecranului. Să-l da un unic identificator, un subsol, doar astfel încât să putem vorbi despre l în HTML nostru în altă parte. Aici este un alt div a paginii a cărui identitate va fi de conținut. Este conținutul paginii. Și aici este antetul paginii. 

Cu alte cuvinte, n-am în esență, în HTML sunt mintal vizualizarea acestui pagina web ca trei componente, un antet aici cu acest dreptunghi invizibil, conținutul în mijloc, și apoi subsol jos, chiar deși noi nu vedem aceste lucruri. Pentru că vreau să în capul meu de pagina aici, sau într-un fișier .css, Pot folosi acest sintaxă. 

Antet nu este o etichetă. E o identitate așa se pare faptul că prin a face #header, Pot aplica acum unul sau mai multe proprietati antetul. Pot face același conținut, la fel de conținut aici. 

Deci, de exemplu, în notele de subsol, aviz toate aceste proprietăți adaug. Și eu știu că există doar prin lectură pe documentația pentru CSS. Dimensiunea fontului va fi smaller-- astfel încât o parte dimensiunea fontului relativă. Greutatea va fi îndrăzneț. Margin-- cum multi pixeli în jurul valorii de it-- este de 20 de pixeli. Și o să fie centrat. 

Dar acum, pagina arata ca aceasta. Dacă eu nu sunt mulțumit cu copia mea acolo, Aș putea face ceva de genul culoare rosie. Și atunci eu pot salva acest lucru, reîncărca, iar acum am stilizate subsol. Deci, aceasta este doar aluzie la putere de ceea ce se poate face într-o pagină web pentru a schimba lucrurile în jurul valorii. 

Și chiar mai rece decât aceasta, dacă vrei pentru a scormoni în jurul valorii de site-uri reale, nu le puteți schimba permanent. Dar dacă deschid Inspector Chrome din nou și eu nu merg la partea stângă aici, care arată HTML Facebook, dar arată pe dreapta în partea stângă toată CSS sale, puteți fie și schimba lucrurile pe zbor. Așa că lasă-mă să mergeți mai departe și a face acest lucru. 

Lasă-mă să mergeți mai departe și de control click pe acest cuvânt aleator aici, semneze, și faceți clic pe Inspectați Element. Chrome sare foarte convenabil la tag-ul h1 că Facebook este folosind. Și observați aici Facebook are un fel de leneș greu codificate dimensiunea fontului ca o proprietate aici. 

Deci, un lucru rece, deși este că dacă mă duc de fapt aici și spun, oh, Facebook, nu-mi place asta 64 de pixeli, putem schimba acum pe Facebook. Desigur, suntem doar o schimbare pentru mine personal în acest moment. Dar aceasta este doar un alt instrument în set nostru instrument care va permite să ne tweak și dau seama și, de asemenea, diagnostica probleme în propriile noastre pagini web. Și am putea merge la fel de peste aici, ceea ce este același lucru. Dacă vrei într-adevăr să obțineți fantezie, I Adică, acum puteți evolua într-adevăr paginii și de a face lucruri nebunești. 

Deci, de ce este acest lucru toate util? Ei bine, în cele din urmă, suntem O să vrea să fie capabil de a crea pagini web care sunt conduse de propriile noastre scopuri spate, nu doar prin Google și externalizarea sfârșitul acolo. Noi de fapt, doresc valoare, de exemplu, de acțiune motorul nostru de căutare atribuie nu merge la altcineva, dar pentru ceva de genul search.php, în cazul în care search.php este pe cont propriu serverul nostru, nu pe altcineva. 

Și așa mai departe pentru a ajunge acolo, am de fapt Trebuie să se introducă o nouă limbă. Deci, ne-am uitat deja la un nou Limba aici, sau două într-adevăr, HTML și CSS. Dar ei de fapt sunt doar limbi structurale și estetice. Nu sunt de programare limbi în sine. Și asta e cam la fel de mult formală timp ca vom cheltui pe ele. Pentru că vom începe acum pentru trecerea la PHP. 

Deci, PHP este un real limbaj de programare. Este un limbaj de scripting în sensul că este menit să fie o greutate mai mică decât ceva de genul C. Și este un limbaj interpretat, ceea ce înseamnă că nu este compilat. Deci, pe scurt, ceea ce a însemnat când am folosit un limbaj ca C și a trebuit să-l compila? Ce înseamnă să compila codul sursă C? Audiența: [inaudibil]. DAVID J MALAN: Spune din nou? Audiența: [inaudibil]. DAVID J MALAN: Perfect. Ea se transformă în binar. Ea se transformă în zerouri și cele de la codul sursă reală engleză-ca. Și apoi putem de fapt rula acele zerouri și cele prin trecerea acestora prin CPU de dublu clic pe pictograma sau execută o comandă. 

PHP și Python și Ruby și Perl și JavaScript și ciorchini de alte limbile sunt interpretate limbi, care este de a spune nu le compila. Mai degrabă, le hrănesc ca intrare pentru un program numit un interpret. Și că interpret, care cineva a scris altcineva, citește codul sursă sus în jos, la stânga la dreapta și la doar interpretează aceste linii și face ceea ce spui. 

Deci, dacă vă confruntați cu o line care spune imprimare, nu se transforma neaparat imprimare de zerouri și cele corespunzătoare. Ea are doar acest interpret ca o în cazul în stare de mare care spune, dacă instruire programator este de imprimare, apoi procedați în felul următor. Deci, îl interpretează doar prin tip de raționament prin ceea ce se spune să facă. 

Și PHP este una dintre aceste limbi. Și în urmă PHP de ani a fost proiectat tocmai pentru programare web. Și a fost inițial o Limba murdar foarte neglijent. Și într-adevăr, există o foarte mare numarul de cod PHP rău acolo. Dar limbajul în sine sa maturizat de-a lungul anilor, atât de mult încât acum e de fapt, un pas catre viitor pedagogic din C, deoarece este astfel darned familiar pentru tot tocmai ați văzut în ultimele săptămâni. 

O diferență inițială, vom vedea există mai e nici o funcție principală. Când porniți cod scris, e doar mergi la a lua executat indiferent de ce, așa cum vom vedea într-o clipă. Între timp, aici e ceea ce o variabilă arată ca în PHP. E un pic diferit, ci doar abia. 

În PHP, nu e dactilografiere puternic. Nu e săptămână dactilografiere, ceea ce înseamnă doar acolo sunt tipuri de date, cum ar fi siruri de caractere precum și numere și alte lucruri. Dar tu nu deranjez specificând ceea ce ei mai sunt. PHP se cifrele pentru tine. Semnul dolar este doar o decizie că PHP oamenii si voi ani în urmă, astfel încât orice variabilă în PHP doar începe cu un semn dolar. E de fapt un fel de util în acest se sare la tine un pic mai mult. 

Dar, după asta, acest este o afecțiune în PHP. Ce este diferit față de C? Truc question-- nimic, care este de fapt foarte frumos. Expresii booleene în PHP-- la fel. Expresii booleene cu și față de sau, switch-uri, bucle, bucle, loops-- OK, acesta este diferit. 

Deci, se dovedește nu există o serie de alte caracteristici în PHP. Una dintre ele este de fapt acest lucru, care este minunat convenabil. Dacă $ numere este o matrice care le-ați a declarat anterior într-un program, aveți această fantezie pentru fiecare construct că, în loc de a face toate astea Am enervant este egal cu 0, I este mai puțin decât aceasta, [? Am ++?], pentru fiecare număr ca număr, în cazul în care fiecare de aceste valori semnul dolar este doar o variabilă, iar acesta din urmă vă puteți gândi ca mine Ai putea numi tot ce vrei. L-am sunat număr. Acest lucru se va repeta peste matrice numita numere. Și pe fiecare iterație, e O să actualizeze automat pentru tine numărul de semnul dolar variabilă, astfel încât să în mod constant au acces la variabila pe care doriți fără a fi nevoie de a face orice suport gradină notație sau de indexare într-o matrice. 

Dincolo de asta, avem chiar lucruri cum ar fi tablouri, care arata aproape la fel, cu excepția că este foarte frecvente, cum vom a se vedea, atât în ​​PHP și JavaScript de a verifica inițializa un tablou folosind paranteze pătrate. C folosește acolade. Deci e puțin diferit, chiar dacă nu am folosit într-adevăr că truc mult. 

Dar chiar mai puternic, PHP are tablouri asociative, care este un mod fantezist de a spune tabele de dispersie. De fapt, dacă doriți să declarați un hash masă în PHP, spre deosebire de C- câte de linii de cod a fost nevoie de punerea în aplicare de fapt un tabel hash in C? Sau cât de multe linii de cod este luând să pună în aplicare un tabel hash in C? Deci, este, probabil, mult, nu? E o câteva zeci, poate sute sau 200. Este trivial. Sau este vorba despre a fi, la fel de veți vedea în curând, trivial să pună în aplicare un tabel hash [Inaudibil] și, de asemenea, o încercare. Dar, în PHP-- și sincer, m-am Probabil că nu ar trebui să vă spun acest lucru până la Monday-- în PHP, în cazul în care vrei o masă, făcut. Asta e un hash table-- astfel cu o linie de cod. Și 

O mulțime de limbi face asta. Distreaza-te cu PSET cinci. Deci, o mulțime de limbi face acest lucru. Ei vă dau aceste abstracțiuni că alți oameni, alte programatori, au creat pentru tine, astfel încât poti sta pe umerii lor și a începe să utilizați idei care sunt super- convingătoare, cum ar fi tabele de dispersie și copaci și pasă. Dar nu trebuie neapărat să pună în aplicare aceste lucruri tine. 

Și astfel în cele din urmă, ceea ce vom folosi PHP pentru este potențial programe de scris de așa-numita linie de comandă. Am putea recrea fiecare program ne-am scris acest semestru până acum, cu excepția, poate, Breakout, care foloseste SPL, care este specific C în acest moment. Dar toate celelalte probleme stabilite, cu siguranță, Mario și Cezar și Vigenere și [? Crack?] Și mai departe, ne-am ar putea re-pune în aplicare în PHP, și probabil, un pic mai ușor. 

Dar ceea ce vom merge în cele din urmă de a utiliza PHP este programarea web. Și vom introduce următorul Săptămâna un model mental, o paradigmă numit MVC, vedere modelul de controlor, care dacă ai făcut programare înainte în Python sau Ruby sau în altă parte, vă ar putea să știu de această echipă cu Șine și Django și altele asemenea. Dar dacă sunteți nou la aceasta le veți vedea că aceasta este de fapt o foarte natural extinderea factorizarea și un fel de proiectare de cod care ne-am făcut în C. Vom acum aplica unele dintre aceste lecții PHP astfel încât în ​​cele din urmă, noi suntem de punere în aplicare propriile noastre site-uri web. Și dacă ești un fel de hipnotizat sau uimit că vom face Toate atat de repede, dau seama că aproape fiecare semestru, aproape 90% de studenți CS50, inclusiv cele care nu au programat mai înainte, sfârși prin a face proiecte finale care sunt bazate pe programare web. Și așa veți vedea că se întoarce sunt ridicate în săptămânile ce vor urma. Deci, noi va vom vedea atunci pe luni. 

SPEAKER 1: Și acum, Deep Gânduri de Daven Farnham. Tabele de dispersie. 

[Râsete]