[MUSIC JOC] 

DAVID J MALAN: Aceasta este CS50 și aceasta este începutul săptămânii 7. Deci, bine ai revenit. Și s-ar putea aminti că în problema set de patru, a existat un pic de vanatoare de măturător de stradă un pentru unele premii fabuloase în cadrul cărora după ce a recupera fotografiile Personalul atât aici, cât și în New Haven, ai fost provocat pentru a găsi cât mai multe dintre oamenii de stiinta de calculator ca ai putea. Și avem un întreg grămadă de observații. Am gândit să împărtășesc câteva cu tine astăzi aici. 

Și vom posta toate acestea on-line. Dar în special, am vrut să atrag atenția sa-- bine unul, Sam a fost în destul de puține dintre ele în general, prezintă ca aceasta. Dar se pare că, în calitate de în această dimineață, câștigătorul a fost numit un anumit cineva Ken cu 24 a personalului capturat pe camera sau mai puține, atunci când se ia în contul personal multiple în imagini. Imagine aici este Ken următor Mariei în New Haven. 

Acum, Ken, însă, se transformă out este pic de un caz de colț care nu este încă întâmplat înainte. Se pare că aceasta nu a avut loc pentru mine pentru a pune de imprimare amendă în probleme set patru care spune că personalul sunt neeligibile pentru premiile fabuloase deoarece Ken este, desigur, unul dintre fotografi de pe personalul nostru. Acum, cu care a spus, el mi-a scris inițial să spun vă rugăm să nu postați aceste fotografii on-line. Cred că în mare parte deoarece cele mai multe dintre fotografii că acest fotograf a luat uite ceva de genul asta. Și altele asemenea. 

Dar Ken ar dori ca eu să vă asigur că el este un fotograf foarte bun, El este un profesionist, el ia fotografii care nu sunt neclare, că sunt mai bine focalizate, și el a luat destul de puține de personalul nostru. Ci, mai degrabă decât doar recunoașteți Ken, ce ne-am gandit ar face se trece prin lista de studenții care au depus. reale Și se pare că Lance cu 15 fotografii sau din această dimineață a fost câștigătorul nostru. 

Și aici este imaginat Lance cu Colton, cu Skaz, cu mine, și cu Sam. Dar apoi se dovedește că, în calitate de 11:46, astfel încât doar un pic în urmă, M-am întors la e-mail meu și am găsit că am avut încă o prezentare mai de un student pe nume Bonnie al cărui email spus doar acest lucru. Nu va mint, eu sunt face acest lucru în timpul clasă. Și apoi a început să atașați doar 14 fotografii, una timid de Lance lui 15. 

Dar, în fotografii lui Bonnie, se pare out au fost mai mulți membri ai personalului, Sam Dintre acestea, astfel încât ceea ce ne-am gandit ar face este recunoaște atât a acestora. Deci, în plus față de obținerea Dropbox spațiu care toți cei care au participat primește, aceste două secțiuni vor, de asemenea, primesc un prânz frumos furnizat pentru ei și secțiunea lor împerechează în această săptămână vine. Și așa veți auzi de la noi, Lance și Bonnie, despre asta. Felicitări atât de mare pentru ei. Acum, cei care ar fi ca masa de prânz, în general, mai mult Știu că masa de prânz CS50 în Cambridge și New Haven este vineri. Du-te la site-ul slash RSVP CS50 lui. Și acum un cuvânt pe seminarii. Mai curricularly. Deci ne apropiem de punct de semestru în cazul în care ar trebui să înceapă gândesc la proiecte finale. Și, de fapt, în doar un pic, va așa-numitele propuneri pre fi din cauza. Propunerile Deci pre sunt menite să impact să fie destul de redus și într-adevăr doar o oportunitate pentru să compuneți o scurtă notă colegii dumneavoastră de predare a informa el sau ea ceea ce te gândești s-ar putea doriți să faceți pentru proiectul final. 

Acum, mulți studenți sfârșesc face pe bază de proiecte web finale. Și, desigur, suntem doar săptămâna trecută acum în acest și dincolo de scufundări în programare web. Deci, nu vă faceți griji, dacă au absolut nici o idee cum v-ar construi ideile care s-ar putea avea în mintea ta. Acesta este de fapt doar o funcție forțând pentru a obține te gândești și vorbești cu TF dumneavoastră despre acest lucru. Dar, pentru a vă ajuta cu asta, și cu proiecte finale în cele din urmă, știu că CS50 are o tradiție de a oferi seminarii. 

Și acestea sunt opționale, mâinile pe, sau prelegeri bazează pe posibilitățile de pentru a afla mai multe despre subiecte care sunt un pic auxiliare cursului programa, dar cu toate acestea minunat materiale de a conduce proiecte finale. Și astfel aceasta este lista care este Personalul CS50 aici, în New Haven au venit cu pentru în acest an despre iOS programare, Android programare, dezvoltarea de jocuri, și ciorchini de mai multe instrumente și limbi și tehnici. 

Deci, ține un ochi pe site-ul CS50 lui. Și în același timp, dacă doriți să inregistrati interesul dumneavoastră în oricare dintre acestea, du-te la registru slash CS50 lui. Și vom urmări apoi în sus ca la zile și ore de zbor și locații și everything-- mai totul va fi transmise și, de asemenea disponibile la cerere după, dacă nu de fapt, pot face. Deci, fără alte formalități, am rămas ultima dată cu GET. 

Și aceasta a fost ca mesajul pe care a fost în interiorul plicului virtual, amintesc, că am trecut de la router la router la router între un browser web și un web serverul. Și că mesajul uitat un ceva de genul asta. Acesta a fost mesajul pe care mai arcane a fost de fapt în interiorul unui plic scris pe o bucată de hârtie, acesta prima linie spune literal, pentru a primi slash. 

Și, așa cum un control bun-simț, ce a indica slash? Ce înseamnă atunci când slash solicitând un site? Solicitați tot timpul. Cel mai de fiecare dată când vizitați un site Web, Nu, de fapt tastați un nume de fișier. Probabil te duci doar la Facebook.com, intra, gmail.com, sau altele asemenea. Și ce reprezintă slash? Ce fișier? Sau ce pagină, în mod specific? 

Indicele, da. Deci pagina implicită. Deci, dacă nu se specifică un fișier nume ca vom începe să vedem, esti de fapt doar solicitant da-mi pagina de Facebook implicit sau da-mi cutia mea poștală sau da mi pagina implicită de știri pe site-ul CNN sau altele asemenea. Și un server răspunde apoi la acel mesaj cu ceva ca aceasta, a zis da, vorbesc HTTP versiunea 1.1. 

200, care este o stare Codul că noi, oamenii foarte rar vezi vreodată că e bine. Pentru că înseamnă OK, cererea a fost primit și manipulate în mod corespunzător. Și tipul de conținut aparent în răspuns este destul de des, dar nu întotdeauna, text. Și în mod specific, HTML. Și asta e de fapt în cazul în care ne uităm la ziua de azi. 

Deci, în fapt, am de gând să merg înainte și deschide un browser. Am de gând să utilizeze Chrome, puteți utiliza cele mai multe orice browser în săptămânile ce vor urma. Vă recomandăm, în general, Chrome pentru că este deosebit de bun pentru dezvoltatorii de software. Are o mulțime de construit în instrumente care face mai ușor pentru a dezvolta nu numai HTML si CSS, lucruri pe care le vom începem să vorbim despre ziua de azi, dar, de asemenea, alte limbi, de asemenea. 

Și am de gând să mergeți mai departe și merge sa-- Am de gând să control click dreapta sau faceți clic oriunde pe o pagină web. Și am de gând să merg pentru a inspecta Element. Și am de gând să-mi tweak Ecranul doar un pic aici. Lasă-mă să mutați acest lucru în partea de jos. Deci, asta este ceea ce se numește Inspector Chrome. Deci, aceasta este ca o depanare instrument construit în Chrome. 

Toate aveți deja acest Dacă ați fost utilizați Chrome. Și vă permite să vedeți ce se întâmplă pe sub capota unor pagini web. Deci, haideți să aruncăm o de fapt uita-te la acest cum urmează. Ea are mai multe caracteristici mod și ne pasă de astăzi. Dar există aceste file aici. Elemente, de rețea, surse, Cronologie, și alte chestii. Am de gând să faceți clic pe De rețea pentru o clipă. 

Și e un pic copleșitoare la prima vedere aici. Dar ceea ce am de gând să fac este să mine un pic simplifica. Am de gând pentru a porni înregistrare lumina, astfel încât este de culoare roșie. Și am de gând să spun păstra jurnal. Iar acesta este doar un pic lucru am dat seama în timp ce se va salva tot ce se întâmplă în browser. Iar acum am de gând să merg la http://facebook.com. 

De fapt, hai sa facem www pentru o bună măsură, slash. Enter. Deci, o adresă URL pe care mulți dintre s-ar putea fi vizitat. Și acum Facebook web Pagina vine în partea de sus. Și apoi o grămadă de lucruri a zburat de la partea de jos. Și, de fapt, se dovedește că atunci când vizitați Facebook.com, tu nu faci doar o cerere HTTP, se dovedește că o să Facebook.com trimite 41 dintre aceste plicuri, fiecare cu propria sa cerere get, așa cum este indicat, deși în spatele ecranului aici, în partea de jos a ecranului, indică faptul că, într-adevăr, mi Browser-ul a făcut 41 de cereri. 

Și în total, 861 transferat kilobytes și a luat pentru un motiv oarecare cât mai multe opt secunde pentru a descărca toate acestea. Așa că e de fapt un pic ciudat că site-ul Facebook ar lua asta lung, dar așa să fie, în acest caz. Acum, toate acestea nu-mi pasă cu adevărat despre excepția cel mai de sus cererii. Așa că hai să mergem la cea de aici și lasă-mă să zoom out pentru o clipă. 

Și lasă-mă să măriți această. Deci, ceea ce am făcut la stânga, chiar dacă există o mulțime întâmplă aici este Am evidențiat Facebook.com și apoi observați că eu sunt defilare în jos, defilare în jos, defilare în jos, pentru a solicita antetele. Și veți vedea că Chrome dă mi esență conținutul interioare cererii am făcut. Nu e de formatare în destul de aceeași Astfel, nu observ există o mențiune a obține, observa există o mențiune a gazdei, Facebook.com, calea, sau slash, care este fișierul am cerut. 

Și apoi, dacă am defila copii de rezervă, vom fapt vezi că ceea ce sa întors Facebook pentru mine este toate aceste antete. Deci, în interiorul acestui plic virtuale într-adevăr, sunt o mulțime de perechi de valoare cheie. Un cuvânt, o colon, iar apoi o valoare. Un cuvânt, o colon, și o valoare. Acestea sunt numite antete. Și există cale mai multe detalii aici decât am de fapt, pasa acum. 

Dar acest lucru este al doilea ultima acolo, observă, că serverul Facebook.com lui, într-adevăr, a spus aici vine un text HTML. Deci, toate acestea este de a spune că, atunci când solicitați o web Pagina de la un browser la o Server, serverul răspunde că cu un plic proprie in interiorul caruia este text. Cu alte cuvinte, HTML. HyperText Markup Language. Care este o altă limbă că vom introduce astăzi ca oamenii sau calculatoare genera în scopul de a pune în aplicare pagini web. 

Mai exact, să ne uităm la asta. Am de gând să merg acum înapoi la site-ul Facebook. Și am de gând să doar Controlul clic sau clic dreapta și faceți clic pe Vedeți sursa paginii. Și chiar dacă nu utilizați Chrome, IE se poate face acest lucru, Firefox poate face acest lucru, Safari poate face acest lucru, chiar dacă meniul opțiuni ar putea arata un pic diferit. Și aceasta este HTML care Mark și companie la Facebook au scris. 

Și în mod colectiv, acest limbaj aici implementează albastru și alb pagina că am văzut în urmă cu o clipă. Acum, acest lucru este un pic copleșitoare. Dar dacă ne uităm în sus la stânga sus, suntem va începe pentru a vedea unele modele. Se pare că există o mulțime dintre acestea suport cu unghi deschis și apoi există acest cuvânt cheie HTML. Iată un alt deschis suport unghi și cap. 

Iată, dacă derulați în jos și în jos și în jos, eu sunt O să mergeți mai departe și să încerce pentru a căuta ceva. Există mult peste pe dreapta aici este trupul suport deschis. Și amintesc de ultima timp în care ne-am propus că cea mai simplă pagina web că un om s-ar putea scrie s-ar putea uita-te un pic ceva de genul asta. Tag-ul deschis HTML, cap deschis tag-ul, tag-ul titlu deschis, apoi titlul închis, cap inchis, deschis tag-ul body, un text, închis corp, HTML închis. 

Dar o pauză aici pentru un moment. Acest cod, chiar dacă ați nu scris înainte dar încă nu înțeleg destul de ce se întâmplă, arata destul de bine. Corect, e foarte curat. E foarte frumos stilistic. O mulțime de indentare și spațiu alb. Facebook nu este. Deci, de ce este atât de mult Facebook mai rău decât mi-am scris la HTML? Se pare că. 

Drept, acest lucru este ca o din cinci pentru stil. Există un motiv convingător pentru ei de a reduce aceste colțuri. Bine, așa că nu doresc să face mai ușor pentru tine să-l citiți. Deci, într-un fel, ele sunt obfuscating aceasta, un fel de ea codare cel puțin estetic așa că este mai greu pentru Myspace să meargă și să rip off lor pagina de start și HTML pentru aceasta. Se pare că, odată cu programele deși, inclusiv Chrome, putem curăța asta super-ușor. Deci, nu chiar ca e ca motiv. Ce altceva ar putea fi cauza. Da. Da, datele de costuri spatiu alb. Ce vrei sa spui? Da, exact. Dacă te-a lovit tasta Tab o mulțime sau bara de spațiu, ia în considerare implicațiile. Deci, fiecare tasta de pe tastatură este un [Inaudibil] reprezentate ca un octet. 

Deci presupun că Mark sau la oricare dintre devs aceste zile lovește bara de spațiu doar o singură dată pe această pagină HTML care reprezintă pagina de start Facebook. Și Facebook are o mulțime de utilizatori în aceste zile. Deci să presupunem că pagina de start Facebook este vizitat de un miliard de oameni de azi. Și cineva de la Facebook are a lovit bara de spațiu doar o singură dată. 

Deci, un octet suplimentar, un miliard de cereri, cu cât mai mult de date este Facebook transferarea pe internet pentru că cineva a lovit SPAȚIU pe tastatura lui sau ei? Un miliard de bytes, sau unul gigabyte de datele sunt trimise de pe serverele Facebook la oameni în jurul valorii de lume pentru nici un motiv bun. Acum, asta e doar un spațiu. 

Imaginați-vă dacă am curăța de fapt acest lucru lucru și-l indentat și a adăugat o mulțime de spațiu alb și de caractere tab și spații, ajungi gigaocteți de cheltuieli, dacă nu Terra bytes mai mult spațiu. Și astfel de super comune în lumea actuală de dezvoltare web este de a minify codul. Și vom vedea în cele din urmă cum s-ar putea face acest lucru. 

Dar astăzi, vom începe să scrie cod Asta este de fapt care poate fi citit de noi, oamenii. Se pare, însă, dacă te duci înapoi la acest instrument în Chrome Inspectați Element, Anterior, am fost pe fila Rețea. Se pare că, dacă te duci la fila Elemente, ceea ce vedeți de fapt este Chrome imprimat destul de Versiunea de aceeași HTML. Deci l-am deobfuscated. Deci, este nu se potrivesc pentru un calculator. Și acum poți de fapt faceți clic în jurul și să înceapă pentru a vedea ierarhia că este o pagină web. Deci, hai sa facem acest lucru de fapt. Am de gând să merg mai departe și deschide pe Mac-ul meu un program numit editare de text. Și reamintească faptul că aceasta este doar un program de text super-simplu. Windows are notepad.exe. Și am de gând să Verbatim tastați următoarele. Tip doc HTML, suport deschis HTML, închis suport HTML, avem capul paginii de aici, la sfârșitul capul paginii de aici, un titlu va fi ca, salut lume. 

Și apoi aici, avem nevoie de corpul paginii web. Caroserie închisă. Și apoi aici, salut lume. In regula. Așa că am scris o pagină de web super rapid. Am de gând să-l salvați ca hello.html pe desktop-ul meu. My Mac o să plâng, gândindu-mă că, așteptați un minut, acest lucru este un fișier text, faceți vrei să-i spunem .txt? Dar nu, vreau să folosesc punct HTML. 

Și atunci ce e frumos dacă am doar dublu clic acest fișier, hello.html, aici e pagina mea de web. Din păcate, eu sunt singura persoană din lume care pot vizita aceasta pagina acum. Pentru că în cazul în care nu-l trăiesc aparent? E pe Mac mea, nu? Ceea ce este inutil. Ca nimeni din această cameră să nu mai vorbim pe internet Puteți vizita, de fapt pagina. Așa că astăzi, avem nevoie pentru a introduce un alt element. 

Și pentru a face acest lucru, am de gând să mergeți mai departe și să se deschidă nor 9. Deci nor 9 este, desigur, un cloud service-- bazat CS50 IDE-- care are toate de spații de lucru noastre care rulează undeva pe internet. Și asta înseamnă că toate fișierele noastre sunt deja accesibile publicului. Așa că hai să mergem mai departe și de a face acest lucru. Am de gând să merg mai departe și a crea un nou fișier NCS50IDE. Am de gând să-l salvați ca înainte ca hello.html și faceți clic pe Salvare. Și acum doar pentru a economisi timp, am de gând a merge mai departe și să copiați inserați acest cod mai degrabă decât o reintroduceți. Și salvați-l. Și așa acum am un fișier hello.html numit. Dar cum am de fapt deschideți-l ca o pagina web? Ei bine, se pare că construit în a CS50 IDE nu este doar un compilator ca zăngăni și un debugger ca GDB și ciorchini de alte programe, există de fapt o cu drepturi depline server web care rulează în CS50 IDE. 

Voi toți, adică, au server de web proprie. Și un server de web este doar o bucată de software al cărui scop în viață este de a servi pagini web. Pentru a asculta pentru cereri de la browsere și răspunde cu mici plicuri virtuale de care este în interiorul conținut care am scris. Deci, acest server web este sursă de fapt, liberă și deschisă. În cazul în care open source înseamnă doar software-ul care altcineva a scris că toți dintre noi poate se vedea de fapt și de a descărca și chiar schimba codul sursă. Și se numește Apache. 

Și am făcut un pic mai ușor de utilizați în CS50IDE de numindu-l Apache 50. Astfel încât să poată de fapt înțelege următoarele. Am de gând să spun Apache 50 începutul. Și apoi am de gând doar să spun punct. Si vom vedea ceva oarecum Mesajul arcane spune stabilirea Apache documentul [? grup?] la domiciliu, ubuntu, indiferent că este, slash spațiu de lucru. Incepand server web Apache 2 cu succes. 

Deci, pe scurt, m-am doar au împins un buton și se întoarse pe un server web care e acum asculta pe internet pe portul TCP 80 la o anumită adresă. Și se spune aici, și acest lucru se va schimba în funcție pe numele de utilizator și de alți factori, dar observa acum, dacă mă faceți clic pe acest, IDE50 punct jharvard și așa și astfel, observați că în tot acest timp In ultimii săptămâni, s-ar putea avea observat că propria numele de utilizator este încorporat în dreapta sus colț de CS50IDE. 

Și că, de fapt a fost tot acest timp, adresa la care puteți vizita toate fișierele prin intermediul web. Până în prezent, nu a contat, pentru că în C, ai în general doresc lucruri care rulează într-un terminale, nu pe web. Dar astăzi, vom începe scrierea de cod bazat pe web pe care le vrem accesibil la URL-uri publice. Deci, ce am de gând să face este să faceți clic această adresă URL. 

Și observați că văd o destul de index urât, o listă director, dar ceea ce fișier sare la tine, probabil? Hello.html. Asta pentru că am salvat fișierul în spațiul de lucru meu. Și ceea ce am spus Apache serverul de web este sa te uiti in directorul spațiului de lucru a lui David. Și să Oricine din lumea vedea aceste fișiere. 

Și într-adevăr, dacă am acum click pe hello.html, Văd în această filă exact acest fișier. Acum observați, cloud 9 face ceva un pic de ajutor pentru noi. În cadrul IDE CS50, observa există brusc o bara de adrese. Asta pentru că, chiar dacă suntem folosind Chrome pentru a vizita CS50IDE, interior de CS50IDE este proprie versiune a unui browser web, chiar acum. Și așa, mai degrabă decât complica lucrurile ca atare, Am de gând să merg mai departe și doar să copiați acest URL. Am de gând să merg mai departe și doar deschide fereastra mea proprie Chrome. Deci nu e nici o magie aici, nu CS50IDE. Mă duc pentru a lipi literalmente meu J Harvard URL și apăsați pe Enter. Și voila, acum, și în teorie, toată lumea pe internet, în cazul în care am configurat permisiuni corespunzator, pot vizita acest fișier. Și așa acum, dacă i-am spus hello.html, Voila, acolo este pagina mea web incredibil de underwhelming. Deci, hai sa facem o verificare bun-simț rapid. Pentru că toate că este set conceptual sus. Și nu am de fapt, într-adevăr te-a învățat cum să scrie HTML în sine. Orice întrebări până acum pe ceea ce se sa întâmplat? Da. Are CS50 proprii aceste pagini de web? In ce sens? Buna intrebare. Deci, lui CS50 detine CS50.io. Am cumpărat într-adevăr că numele de domeniu. Și prin natura voi logare în CS50IDE, voi toți obține ceea ce se numește un subdomeniu. 

Deci IDE50-Malan, sau IDE50-Rob.CS50.io, asta e adresa ta unică în cadrul numele nostru de domeniu. Deci, în scopul cursului, aveți propria adresă unică. Dar am simplificat lucrurile prin cumpararea domeniului de nivel superior, CS50 dot I / O și apoi toți ceilalți este în interiorul că, ca să spunem așa. Și ne vom întoarce la care în câteva săptămâni, probabil, mai ales la nivel de proiect finală timp, când unii dintre voi s-ar putea doriți să obțineți dvs. nume de domeniu propriu. Este de fapt relativ simplă. In regula. Deci, hai sa facem acest lucru acum. Am de gând să se întoarcă în CS50IDE, în cazul în care dosarul meu acum, hello.html, nu este tot ceea ce interesant. Aș vrea să fac ceva un pic mai frumos decât asta. Deci, am de gând să fac ceva de genul asta. Lasă-mă să paragraphs.html deschis. Deci, acesta este un fișier care am scris în avans. În partea de sus a acesteia, cum ar fi întotdeauna, avem comentarii. Dar, în HTML, comentarii uite un pic diferit. On line trei și linia 14, vă vezi sintaxa pentru a începe un comentariu și se încheie un comentariu. 

Dar nici unul din lucrurile de la între aspectele funcțional. E doar o notă la un uman ce se întâmplă aici. Și, așa cum un bun-simț rapid verifica, dacă aș defilați în jos, ceea ce este evident noul tag că am introdus? Tag-urile până acum le-am vazut sunt deschise suport HTML, cap, titlu, și a corpului. Dar ceea ce este, evident, noi acum? 

Da, așa p. Tag-ul p sau punctul tag. Și apoi am împrumutat niște implicit Text latin pentru a constitui punctele mele. Pentru că ceea ce am vrut să demonstra cum s-ar putea reprezintă paragrafe de text în HTML. Și așa mai departe ceea ce începe să se întâmple aici este că nu există deja un model de dezvoltare. Și lasă-mă să merg mai departe și a face acest lucru. Lasă-mă să rândul său, primul off Apache. Și am de gând să-l spun pentru a se începe din nou în interiorul sursei de astăzi șapte director m. Așa că am acces la tot. 

Și acum, dacă mă întorc la această listare director, observați Văd fiecare fișier din ziua de azi. Și veți vedea în următor set problemă, vom vă dau instrucțiuni pentru a face exact acest lucru. Dacă am deschis paragraphs.html, aceasta ar putea precum și arata ca un limbaj de programare pentru tine, dacă nu vorbești sau de a citi latina. Dar acest lucru este doar trei paragrafe de text care sunt marcate în HTML. 

Și observați alineatul pauzele dintre ele. Pentru că se pare, si chiar daca ar putea fi înclinați să facă acest lucru, în timp ce în lumea reală, dacă doriți să puneți linia pauzele dintre lucruri, s-ar putea pur și simplu face acest lucru și a lovit Save. Și acum, dacă aș reîncărcați aici, aviz că totul doar estompeaza împreună într-o singură pată de text. Deoarece HTML este un fel de un limbaj prost. 

Este destinat a fi utilizat într-o astfel un mod care browser-ul va numai face în mod explicit ceea ce-l spun să faci. Deci, dacă nu-l spun da-mi un nou alineat, nu te duci sa vezi un nou alineat. Și, de fapt, ceea ce Browser-ul va face este chiar dacă te-a lovit Enter, să zicem nou și din nou și din nou, se deplasează în acest fel de text în jos pe ecran și apoi salvați și apoi reîncărcați, browser-ul va să se prăbușească toate acestea spațiu alb într-un singur spațiu, vizibil. In regula. Deci, asta e punctul tag. Și așa mai departe ceea ce este modelul care este în curs de dezvoltare aici? Ei bine, se pare a fi cazul în care HTML este vorba de a începe un tag și se încheie o etichetă. Și ceea ce este o etichetă? Ei bine, e doar o bucată de sintaxă. Deschis suport, un cuvânt cheie, suport închis, este o etichetă. Sau de a începe tag. Și apoi atunci când sunteți făcut să te exprimi, la fel ca în ai terminat cu paragraf ce faci ca să spunem așa opus. Dar opusul nu este destul de în spate. 

Tu pur și simplu prefixul aceeași etichetă anii nume cu un slash înainte ca aceasta. In regula. Deci, nu tot ceea ce interesant. Și, de fapt, nu suntem ceea ce face web toate că mai interesant. Ce se întâmplă dacă vreau să fac lucruri mai mari și mai îndrăznețe? Deci, se dovedește că aici este un exemplu în headings.html, în cazul în care în corpul meu, Am o etichetă H1, H2, H3, patru, cinci, sau șase, toate acestea par destul de arcane. Dar dacă mă duc deschide acest exemplu, să aruncăm o privire. Headings.html. 

Deci, în mod implicit browsere pot da textul care este mare si indrazneata de dimensiuni disparate. H1 este mare. H6 este mai mic și apoi orice altceva în între. Așa că e interesant, dar încă nu chiar pe web știu. Ce se întâmplă dacă vrem să am ceva ca o listă. . Deci, aici este o listă cu marcatori de trei case Harvard lui. 

Cum ai merge despre a face acest lucru? Ei bine, să ia o privire la list.html. Și aici, vom vedea o pic de funkiness dar să ia în considerare ceea ce se întâmplă. Deci, bazat pe ceea ce tocmai ai văzut, UL standuri pentru lista neordonata. Lista neordonata înseamnă doar marcatori. Nu sunt numere. Există, de asemenea ceva numit un Lista, care este un OL la etichetă ordonat. Apoi LI, element din listă este tot ce înseamnă. 

Și atât de în mod automat Numerele totul pentru tine. Dar, din nou, toate de indentare mele și spațiu alb este doar de dragul meu. Browser-ul nu e de fapt de gând să aibă grijă. Deci, chiar dacă nu a putut face acest lucru, doar pentru a fi clar, nu ar trebui să, chiar dacă browser-ul va mai putea să-l înțeleagă foarte bine. Am lovit reload în mea browser-ul, eu clic reload și nici o schimbare se intampla deoarece browser-ul încă face exact ceea ce am spus să fac. 

In regula. Deci, aceasta este tot doar text. Acum, haideți să facem ceva mai interesant. Am de gând să merg mai departe și imprumuta o parte din acest cod HTML. Am de gând să merg mai departe și a crea un nou fișier aici. Și vom numi acest rick.html. Avem disproporționat ceva second-hand numit o rola Rick în acest clasă în acest an, nu știu, aceasta sa întâmplat organic. 

Și acum e scăpat de sub control. Așa că am doar de gând să merg cu ea. Și dacă mă duc la Google Imagini și Rick Astley. Dacă nu știu de ce facem acest, citit doar pe Wikipedia. De fiecare dată când ați făcut clic pe link-ul, cineva a fost râs undeva. Și lasă-mă să merg acolo ahead-- mergem, să vezi această imagine. 

Deci, aici avem o imagine în Google Images. Și să presupunem că acest lucru este rezonabil peste tot pe internet. Deci, am de gând să-și asume că e bine pentru mine pentru a pune de fapt acest lucru în pagina mea de web. Am de gând să merg mai departe și copiați URL-ul imaginii. Și acum, dacă mă întorc la Cloud 9, să vedem ce pot face aici. Deci, aici este doar o pagină web. Acest lucru este Rick Astley, haha, Am de gând să merg acum înapoi la browser-ul meu, reîncărcați, și interesant. 

În cazul în care este Rick? Deci, lasă-mă să văd ce sa întâmplat. De fapt, am de gând să pretind ca n-am făcut asta. [Inaudibil] l-au pus aici. Vom reveni la asta într-un moment. Deci, aici e rick.html. Așa că nu-i Rick Astley. Deci, se dovedește putem de fapt, adauga-l aici. Aceasta este Rick Astley. Am de gând să spun da-mi o imagine a cărei sursa este adresa URL doar am copiat, care aparent este un fericit ceva ziua de nastere sau alte. 

Iar acum am de gând să închide tag-ul de genul asta. Deci, acest lucru este de ambalaj foarte mult timp. Dar observați că tot ce am făcut este imagine placuta deschis, sursă cu un atribut de acest lucru. Și e un URL foarte lung. Iar la sfârșit, observa acest lucru. Slash ce am făcut suport în unghi în loc de, ca orice alt tag-ul, având un suport deschis, IMG, închis suport? Doar să ia o presupunere, chiar dacă nu au nici un fel de familiaritate cu HTML înainte. 

Deci, este modul în care aceasta se închide comanda, dar de ce nu-l face cu adevărat intuitiv nu sens de a face ceva un pic mai mult verbose ca aproape imagine? Da. Da. Doar semantic, nu e nici un sens de incepand o imagine și se încheie o imagine, este fie acolo sau nu este. Deci, nu are sens să lase un gol pentru altceva în interiorul unei imagini. Tu chiar nu se poate face asta. Și așa sintaxa ar fi, în general, doar pentru a face slash în interiorul de tag-ul deschis sau tag-ul de start și apoi a lovit Salvare. 

Deci, dacă acum reîncărcați acest fișier, acum Am un bun pagină web de gătit aici. Și am putea cu siguranță enerva într-adevăr oameni prin încorporarea în schimb ca un link YouTube. Și, de fapt, în orice moment ai plecat vreodată la YouTube, și lasă-mă de fapt accidental Rick mă rostogolesc aici. Deci, Rick rola. Deci, Rick roll-- am de gând să merg aici. 

[MUSIC JOC] 

OK, o persoană a placut asta. Deci observați tot acest timp, daca faceți clic pe link Share, vă desigur obține URL-ul pe care le puteți de fapt încorpora într-un e-mail sau o imagine medico-legale sau într-o problemă sau stabilit într-un diapozitiv. Și acum, dacă în loc să faceți clic pe embed, observați că în tot acest timp, chestia asta a fost acolo. Am de gând să merg mai departe și să copiați acest lucru. 

Și astfel încât să putem vedea mai bine, eu sunt O să-l lipiți în editorul meu de text. Observați că această ceea ce YouTube a fost spui că. De fiecare dată când vizitați un Video de pe YouTube, dacă doriți să încorporați video pe dvs. pagină web, pur și simplu apuca acest lucru. Astfel încât acesta este încă un alt Tag-ul HTML numit iframe. Sau un cadru în linie. Deci, se pare prea un pic mai mult complexă decât toate celelalte. Deci, se dovedește că imaginea tag-ul și se pare că eticheta iframe ia ceea ce se numesc atribute. 

Și aceasta este o altă bucată de sintaxă în HTML. În plus față de etichetă anilor numele, deschis suport nume tag-ul, puteți controla comportamentul tag-ul de a avea o grămadă de atribut este egal cu valoarea. Atribut este egal cu valoarea. Și astfel, de exemplu, YouTube ne spune dacă doriți ca lățimea acest videoclip să fie 420 pixeli și înălțimea să fie 315 pixeli, care este cum ai exprima în HTML. 

Sursa video se întâmplă să fie că URL-ul lung YouTube și apoi alte chestii ca cadru de frontieră este zero, astfel încât, probabil, înseamnă că e nu de frontieră în jurul valorii de lucru. Permiteți ecran complet, probabil, înseamnă că utilizatorul posibilitatea să faceți clic pe un buton și de fapt, ecran complet video. Deci, dacă eu chiar vreau să fiu impresionant aici, în Rick dot HTML, mai degrabă decât a utiliza eticheta de imagine, să mi șterge că, în loc să inserați acest. Și acum reîncărca. Și acum aici vom merge din nou. Bine, asta e de ajuns. Bine, așa că am să încerc greu să nu faci asta din nou. Deci, ce sunt unele dintre cele mai takeaways aici? Deci HTML, la fel de urât ca aceste pagini de web sunt, este, de fapt destul de simplu. Nu este un limbaj de programare. Ea nu are funcții. Ea nu are bucle. Ea nu are condiții. Tot ce are este zeci de tag-uri diferite, fiecare dintre care are zero sau mai multe atribute. Și, de fapt, ceea ce este distractiv despre HTML pe măsură ce începe să se scufunde în este că este de sine docil foarte. 

Tot ce trebuie este o înțelegere de cadrul general de HTML. Ce este o etichetă, ceea ce este un atribut, cum a face tu configurați de fapt o pagină web după cum urmează. Și orice altceva este de fapt rezultatul de a privi într-o referință on-line sau googling cum se face unele tehnici sau cum am văzut, uita la sursă Facebook cod, se uită la un site web care vă place la el e codul sursă și intelegerea modului dezvoltatorii de acolo de fapt, a pus lucrurile. 

Astfel încât să putem face imagini la fel de bine. Și, de fapt, am făcut-o în urmă cu un moment. Lasă-mă să merg mai departe și doar vă arăt. Iată câteva mostre de cod. Dacă doriți vreodată să vadă grumpy cat. Deci observați că pot au o etichetă imagine aici. Și am un comentariu de mai sus ea. Am o alternativă text pentru accesibilitate. Deci cineva care e cu ajutorul unui ecran cititor din motive de vedere poate apoi au de fapt lor cititor de ecran spun cat morocănos. Pentru că în cazul în care nu pot vedea imaginea, ei cel puțin pot avea computerul lor spune-le verbal ce este. Și sursa de care fișier este cat.jpeg. Deci, în fapt, dacă am vrut să obține inteligent, ceea ce am putea avea done-- Nu promit să meargă la Rick Astley, așa Am de gând să Google pentru o pisica in loc. Și dacă mă duc la Google Images aici, și vom presupune că aceasta este o imagine de pisica mea. 

Să presupunem că am avea un control apasat sau chiar făcut clic pe acest lucru, accidental înfiorător. Și am de gând cat.jpeg pentru a salva pe desktop-ul meu. Lasă-mă să mă întorc acum la nor 9. Observați că aici, pot du-te pentru a încărca fișiere locale. Și dacă am apuca acest fișier, cat.jpeg, aviz că pot să-l trage și plasați-l în nor 9 și o să țipi la mine aici. 

Pentru ca ne-am deja dat un fișier cat.jpeg, dar este foarte ușor de apuca o fotografie pe care ați luate de la Facebook sau Flickr sau altele asemenea și de fapt drag and drop-l în nor 9 și apoi face o parte din propriul personal site-ul sau o problemă set șapte sau opt ca vom vedea în curând. Și apoi când vizita în cele din urmă că pisica, presupunând Am descarcat aceeași pisică, Notă that-- care a fost adorabil. 

Ceea ce ar vedea este ceva de genul asta fata aici. Deci, fișierele pe care le referință într-o pagină web poate fi locală în propria cont sau de la distanță pe unele alt server ca în cazul Rick Astley fotografie un pic în urmă. Deci, în cazul în care ceea ce else-- altceva putem face aici? Deci, haideți să aruncăm o privire la următoarele. Știi ce fel de rece? 

Am fost până acum făcând pagini web foarte statice. Vreau să condimenteze lucrurile, după cum urmează. Vreau sa fac propria motorul meu de căutare. Deci, pentru a face un motor de căutare, să mergeți mai departe și începe să faci acest lucru. Am de gând să mergeți mai departe și de a crea un nou fisier numit search.html. Si ne-am prefabed versiuni on-line. Hopa. Nu lipiți în fereastra terminal. Versiunile prefabricate online. Și am de gând să încep, după cum urmează. Deci, aici e începutul un fișier numit search.html. Am de gând să-l salvați în directorul sursă de astăzi. Am de gând pentru a apela această căutare. De fapt, vom face mai bine. CS50 căutare și de fapt de brand-l. Și acum, am de gând să spun ceva de genul H1 CS50 Căutare. Și apoi aici, H2 în curând. Și doar pentru a recapitula, H1 și H2 înseamnă respectiv ce? 

Da, atât de mare și îndrăzneț, și nu la fel de mare, dar încă îndrăzneț. Deci, dacă am salva acest lucru și du-te de aici, să vedem search.html fișier. Bine, și asta este right-- [neauzit]. Așteptare. David este confuz. Oh, e chiar acolo. David e un idiot. BINE. Deci nu este. Deci, de căutare CS50 în curând. Deci, acum, hai să sintetiza ceea ce am făcut săptămâna trecută. 

În cazul în care am vorbit despre de nivel inferior Mecanica HTTP. Și aceste idei noi de HTML, care este doar acest limbaj de marcare în cazul în care spune unui browser exact ce să facă și punerea în aplicare propria motorul nostru de cautare. Deci, în loc de doar spunând în curând, eu sunt de gând să introducă ceva numit o etichetă formular. Și în această formă, am de gând să au ceva de genul un câmp de intrare. 

Și numele această intrare câmp, am de gând să-l numesc Q. Și tipul de acest câmp de introducere Am de gând să spun este doar "text". Și un câmp de text, cum vom vezi, este doar o casetă de text. Și așa nu simt aici pentru a avea ceva în interiorul-o la acest punct. Și așa am de gând pur și simplu pentru a închide tag cu care oblică chiar în tag-ul în sine. Și apoi am de gând să au o altă intrare. Tipul de intrare este egal cu prezenta. Și apoi am de gând să închide acest unul. 

Iar acum am de gând să mă întorc aici. Si deja vedem, deși destul de urât, am Trebuie începuturile propria pagina mea de căutare aici. De fapt, lasă-mă să încerc să curăța asta un pic. Se pare că, în intrare aici, pot avea un alt atribut numit substituent. Și am putea vedea ceva de genul cuvinte cheie, sau mai precis, interoga pentru q. 

Și observați, acum, am acest tip de text gri care dispare ca Imediat ce am început să tastați, dar este, probabil, ceva le-ați văzut în alte pagini web. Nu-mi place foarte mult butonul Submit. Așa că am de fapt de gând să dea Butonul prezinte o valoare de căutare. Și acum, dacă aș reîncărcați, observați că Butonul meu devine numit de căutare. Știi, eu nu prea ca logo-ul de aici. Deci, generator de Google Font. 

Vreau să-și condimenteze asta mai departe. De căutare, astfel CS50. Lasă-mă să-mi creez propriul logo. Asta arată bine. Deci, acum lasă-mă să salveze acest as-- haide. În cazul în care se merge? Acolo. BINE. Pierdute ea. Salvează ca. Browsere prost. Așteaptă, vom rezolva această dată pentru totdeauna. Nu mergem. In regula. Scuze. Zi libera. Acum, acest lucru este funky. Ieșiți din ecran complet. In regula. 

Acum, ca o normală persoană, cu excepția imagine ca. Logo.gif. Acum am de gând să merg în CS50IDE și Am de gând să apuca pur și simplu logo-ul, Am de gând să-l trage în directorul meu sursă șapte, fișier există deja, eu sunt OK cu asta. Deci, am de gând să-l trece peste pentru că am avut deja. Și acum cum pot scapa de asta? 

Să mergem mai departe și de a face aici Image source este egal logo.gif. Inchide. Salvați. Și acum, dacă mă întorc la căutarea mea pagina, acum este în căutarea destul de bine. Bine, deci nu are destul de făcut ceva util. De fapt, lasă-mă să încercați să căutați pentru o pisică și vedem ce se întâmplă. Pisici. La naiba. Ea nu doar locul de muncă, se pare. Deci, ce este piesa cheie care lipsește aici? 

Corect, chiar dacă nu știi nici HTML, Am început marcarea forma de telefon și l-am spus cum să obțineți intrări, da-mi o casetă de text și un buton de trimitere, ce piesa este aparent lipsește? Să presupunem că doriți să obțineți de fapt, acest lucru funcționează corect. Ce trebuie să facem? Avem o nevoie să pună în aplicare la sfârșitul spate de baze de date sau motorul de căutare în sine, și că va lua o mulțime de timp, sincer. 

Deci, amintiți-vă ceea ce am făcut data trecută. Deci, dacă veți căuta pe Google pentru ceva și ați anticipat oprit, Reamintim, căutare instantanee. Așa că haideți să-mi rândul său, că off astfel încât acest fapt se comportă ca un browser mai vechi de școală, dacă am căuta acum pentru ceva de genul pisici, amintesc ce URL-ul arata. E destul de criptic. Dar încorporate în acolo, Reamintim, este căutare slash. Semn de întrebare q este egal cu pisici. 

Și care ar părea să-mi dea o grămadă de rezultate de căutare. Deci, știi ce am de gând să fac? Am de gând să împrumute Google pentru doar un minut. Am de gând să meargă peste aici și am de gând să spun că această acțiune face sau destinație, ca să spunem așa, ar trebui să fie literalmente Google. Și metoda am vrut la utilizarea va fi minim. 

Deci, ce este o acțiune? Acțiune este ciudat numit, dar asta înseamnă doar care este de gând să se ocupe de acțiunea acestui formular? Când m-am faceți clic pe Căutare, în cazul în care ar trebui să meargă rezultatul? Și dacă acum mă întorc la forma mea aici și reîncărcați pagina mea de web și acum caută ceva ca câine, observa acum Am re în aplicare Google. Dreapta? 

Dacă vreau pentru a căuta ceva altceva, it works pentru nu doar câini, de asemenea, funcționează pentru pisici. De asemenea, funcționează pentru CS50. Și OK, aceasta este doar sub copleșitoare, nu-i așa? Bine, dar chiar functioneaza. Deci, ce se intampla de fapt pe sa? Așa că am învățat browser-ul meu, cu ajutorul HTML, pentru a lua de intrare de la utilizator și trimite de fapt că de intrare la un server de la distanță prin HTTP. 

Și pentru că browser-ul meu înțelege HTTP, de fapt construi URL-ul, astfel încât ceea ce Ajung peste in browser-ul meu, observați ce se întâmplă atunci când am cautat câine. Dacă am faceți clic pe Căutare, observați că URL-ul se schimbă după cum am intenționat la google.com/search~~V interogare egal câine. Și asta pentru că forma cunoaște, pentru că metoda este de a lua, pur și simplu se adăuga la această adresă URL acolo. 

Acum, aceste pagini web sunt încă urât. Deci, haideți să introducă un alt bucată de sintaxă dacă putem astăzi. Și acest lucru este ceva cunoscut foi de stil în cascadă ca. Deci, lasă-mă să aruncăm o privire la acest exemplu aici și vezi dacă putem deduce ce se întâmplă. Aceasta este CSS0.html. Și acest lucru este în cazul în care lucrurile obține un pic urât. Pentru că, din păcate, în lumea de web, HTML singur nu poate face totul. Și deci, dacă doriți să stiliza pagina web, aveți nevoie de fapt să se concentreze pe estetica într-un mod diferit. Deci, aici, am corpul meu web Pagina interiorul, care este un div mare. Și un div înseamnă doar diviziune. Deci e ca un paragraf, dar nu are aceeași semantică de un paragraf de text. 

Acest lucru înseamnă doar la browser-ul, aici vine o regiune mare dreptunghiulară de web meu pagina, vreau să-l ocupe special. Acum, linia 21 este dacă acest div începe. Și să ia doar o presupunere. Care este efectul liniei 21 privind Restul conținutului paginii? Centrarea se. Asta e tot. Așa că nu am văzut un fel de centrarea fapt textul. 

De fapt, motorul meu de căutare, spre deosebire de real Google, a fost justificată peste tot la stânga. Și așa acum, în linie 21, vreau să spun, hei browser-ul, de a crea o divizie a paginii. Dă-mi un mare dreptunghi, invizibil. Asta e cum vreau să gândiți-vă la pagina de web. Și apoi stiliza cum urmează. In interiorul acestor citate, acum, este oa doua limbă că am introdus astăzi numite foi de stil în cascadă. Din fericire, nu este prea un limbaj de programare, asa ca este foarte limitată în sintaxa, ci de asemenea, foarte limitate în funcționalitatea sa întrucât HTML este despre toate marcarea datele unei pagini web și structura unei pagini web. CSS este general, în jurul ultima milă, estetica, obtinerea de dimensiunea și culoarea și plasarea exact chiar în o pagină web. Și într-adevăr, aceasta este formată cu perechi de valoare cheie. 

O proprietate ca aceasta, text alinia, urmat de două puncte, urmată de valoarea pe care proprietate, care, în acest caz este centru. Și acum observați poate cuib aceste lucruri. Dacă aș fi vrut totul în care Am evidențiat a fi centrat, de aceea am linie 21 și linia corespunzătoare 31. Dar să presupunem că acum vreau să spun John Harvard, bun venit pe pagina mea de start. 

Simbolul drepturilor de autor John Harvard. Și să presupunem vreau prima de aceste linii pentru a fi destul de mare. 36 pixeli. Deci asta-i o dimensiune decent. Și am vrut greutatea sa să fie îndrăzneț. Dar apoi mai jos, care, Vreau Text mai mic. Și de mai jos că, vreau Textul chiar mai mici. Scuze. Astăzi se simte ca o zi liberă. 

Deci, acum, ce fac să-și exprime acest lucru? Aici, pe linia 22 este un embedded div div sau imbricate, dacă vreți. Ea prea are propriul tag stil. Am specifica dimensiunea de 36. Am specifica o greutate font de bold. Aici jos, am specifica doar 24 de pixeli. Și, în sfârșit, în linie 28, pot specifica 12. Deci, doar ca o verificare rapidă bun-simț și ca o lectură uman acest lucru, care cuvintele de pe ecran sunt de fapt, va fi îndrăzneț? Liniile care sunt de fapt îndrăzneț? 

Doar John Harvard. Dreapta? Pentru că așa cum spune linia 22 hey browser-ul, aici este o divizie a paginii. Face dimensiunea fontului 36 puncte. Face greutatea font bold. De îndată ce a ajunge la eticheta de final corespunzător sau tag-ul închis pe linia 24, Asta înseamnă că, hei browser, nu mai faci ceea ce este faci. Și o notificare să fie clar, chiar dacă line 22 are toate aceste atribute ca stil, atunci când închide tag-ul, în conformitate 24, ai spus doar numele tag-ul este. 

Tu nu repeta stilul cuvânt sau ceva care este în interiorul acestor citate. Și așa că, dacă mă uit la acest lucru acum în browser-ul meu, să ia O privire la rezultatul final. Lasa-ma sa plec înainte de a acest fișier, care este CSS 0. Și este încă destul de simplu, dar obtinerea destul de interesant. Dar se pare că nu e alte lucruri pot face aici, și cu riscul de a face acest complet hidos, observă aici că, în mea corp de pagina mea de web, Pot să fac ceva amuzant cum ar fi bg sau culoare de fundal. 

Și rapid, ceea ce este culoarea ta preferata? Green-am auzit. In regula. Deci, acum, dacă am lovit reload acum, avem o pagină web verde. Bine, pentru ca nu e rău. Și acum, dacă vreau să fac acest lucru cu adevărat rece, pot face culoarea textului meu chiar roșu. Deci, haideți să vedem ce arata asta ca. Acum este în căutarea destul de bine. Și aici, dacă într-adevăr vrei să te pui cu cineva sau dacă doriți să fie unul dintre acei oameni care încearcă să vă păcălească să vizita un web pagină pentru că au păcălit Google în gândire există o grămadă de cuvinte cheie like-- să vedem, reîncărcați. În cazul în care sa dus? Și acolo ne-l. In regula. Deci, eu spun ca o parte, vom vorbesc despre aceste lucruri în câteva săptămâni atunci când vorbim despre securitate, în cazul în care tu de fapt buchete întregi încorporează de cuvinte cheie într-o pagină web, chiar dacă acestea nu sunt vizibile la o umane, cum ar fi Google cineva, desigur, poate găsi încă de fapt acest lucru. Bine, pentru ca e destul de hidos destul de repede. 

Și, de fapt, nu e tot că, spre deosebire de mult propria mea web Pagina ca un student, care Am început googling în jurul pentru a găsi versiunile anterioare de site-uri web. vechile mele A fost destul de rău. De fapt, am găsit o chiar înainte de clasă. Dar nu e mai rău acolo. Aceasta pare că a fost meu pagina principală în 1996. Se pare că m-am gândit a fost adecvat de a cere oamenilor numele lor înainte de a putea se vedea de fapt pagina mea de web. 

Și apoi m-am le-a arătat ceva stupid, probabil. Voi dezgropa mai mult pentru data viitoare. Dar pentru moment, să ia în considerare un pic de proiectare. Am vorbit despre stil. Și această pagină până în prezent și mai tot ce am scris este destul de curat stilistic. Dar ce despre design? Ei bine, există o mulțime de concediere în ceea ce am făcut aici. 

Am menționat cuvântul culoare într-un cuplu de locuri. Am menționat dimensiunea fontului într-o pereche de locuri și îndrăzneț într-un cuplu de locuri. Și fundamental, sunt co amesteca două limbi. Am HTML cu Tag-urile mele și mi atributele și apoi dintr-o dată, între ghilimele, am a doua limbă de azi numit CSS, care din nou, este doar acestea perechi de chei valoarea sau aceste proprietăți separate de două puncte. 

Se pare că de mult ca în C, unde ne-am poate începe să factor în un cod în fișiere antet, astfel încât putem face același lucru în HTML. Și un pas spre care este după cum urmează. Observați că această versiune, este CSS1.html aceeași pagină web exact structural. Așa că am o grămadă de divs, dar de data aceasta, am scăpat de înfășurare div după cum veți vedea. 

Și am dat aceste trei divs top, middle, și de jos, ID-uri unice. Acest lucru este frumos, pentru că de da aceste divizii a identificatorilor unici pagini, Pot să le referință în altă parte. Unde? Ei bine, lasă-mă să derulați în sus. Și până acum, în orice moment ne-am uitat în fruntea unei pagini web, ceea ce este singura eticheta care le-am avut în capul unei pagini web? Un pic mai tare. Doar titlul până în prezent. Dar se pare că nu e alte câteva lucruri puteți pune acolo, unul dintre care se numește o etichetă stil. Deci, un moment în urmă, ne-am uitat la un atribut de stil. Se pare că există o etichetă stil. Acesta aparține în interiorul capul unei pagini web. Și acum observați ce fac. Am interiorul acestui tag stil următoarele. Sunt literalmente menționat pe linia 20 Numele unei etichete pe care vreau să stiliza. 

Atunci am bretele buclat deschise și a închis bretele cret. Atât de asemănătoare în spirit de C, dar din nou, acest lucru nu este o funcție, aceasta este doar un detaliu sintactic aici. Și apoi, desigur, eu spun browser-ul, browser-ul hei, face întregul corp a paginii au o aliniere de text de centru. Și apoi acest spune următoarele. Hei browser, dacă vedeți un HTML element sau eticheta în pagina care are un identificator unic de top, astfel încât simbolul hash aici înseamnă doar idee unică de top, dă-i drumul și să facă dimensiunea fontului 36 iar greutatea sa font bold. 

Hei browser, un element a cărui ID-ul este de mijloc, face 24 de pixeli. Și hei browser, dacă vedeți un Ideea de fund, face 12 de pixeli. Efectul în cele din urmă este exact SAM. Dacă mă duc în CSS 1, The pagină are un aspect la fel. Dar suntem un pas spre un design ceva mai bine. Lasă-mă să mă întorc acum aici pentru a CSS2 și a vedea ce altceva am făcut. 

Acum pagina este foarte, foarte curat. De fapt, eu pot potrivi toate conținutul pe o pagină aici. Dar ceea ce tag-ul nou am a introdus, în mod evident? Link. Și nu e cel mai bun nume pentru o etichetă, pentru ca nu este un link, în sensul că o știm, dar acest lucru înseamnă un link într-un alt fișier. Aceasta este un fel de ascuțite include în C. 

Acesta este modul în HTML să spun hei browser, du-te conținutul de fișierul numit css2.css. Relația, pentru mine, este că este o foaie de stil. Și într-adevăr, asta e ceea ce-unul din S in stil cascadă foi mijloace. Aceasta este o foaie de stil. E doar fișierul text care conține o grămadă de proprietate. E o grămadă de stiluri pe care doriți să se aplice la o pagină. 

Și așa se pare că acest lucru este referindu-se la un al doilea fișier. Și dacă am deschis că, CSS2.css, observa că tot ce am făcut este copiați și lipiți toate de acest lucru în acest dosar. Și acum, chiar dacă nu ați mai codificate chestia asta înainte, doar ia în considerare cu pălărie de inginerie proverbial pe, de ce este aceasta o mai bine de proiectare, probabil? Factoring acele proprietăți CSS, punerea lor în propriul dosar. Chiar dacă am rezolvat aceasta acum problema ca cinci minute în prima versiune. 

Noi nu am îmbunătățit Pagina stilistic, acest lucru este doar mai bine Design într-un sens. De ce crezi? Da. Mai flexibil cum? Da. Deci, dacă vrei să mergi înapoi și de a schimba lucrurile, acum, aveți un singur loc în cazul în care vă puteți schimba lucrurile. Și, de fapt, pentru ceva ca problemă set de șapte, în cazul în care vom pune în aplicare o stoc site comercial, care va avea un grămadă de pagini. Și ar fi într-adevăr enervant, dacă vă decideți, hm, Nu-mi place foarte mult 24 pixeli, vreau să fie de 28 de pixeli sau ușor mai mare. Și apoi trebuie să faci un global găsi și înlocui sau deschide toate fișierele site-ul dvs. pur și simplu pentru a schimba de fapt o valoare. De factoring aceste stiluri într-un singur loc central, aveți posibilitatea să deschideți un fișier text acum în CS50IDE în orice program, schimba-l, salvați-l, și a făcut. Ai propagate cele schimbări peste tot. Și că ar fi la fel într-un fișier punct h, de asemenea. Astfel încât orice întrebări astfel acum pe această sintaxă? Bine, așa că am făcut tot se pare cu excepția de fapt punerea în aplicare a hyperlink-uri. Și așa să mergem mai departe și de a face acest lucru. Lasă-mă să merg mai departe și a crea un nou fișier aici. Am de gând să-l sun link.html, pune în codul de astăzi. 

Și am de gând să fac deschide Suport de tip doc html. Ca o paranteza, asta la top, această declarație tip doc, e singurul care e ciudat cu semn de exclamare. Trebuie doar să o fac acolo și-l înseamnă că sunt utilizați HTML versiunea 5. Versiunile mai vechi de limbă a avut mult mai mult siruri de caractere pe care le necesare pentru a pune acolo. Deci, aici este un exemplu numit link. 

Am nevoie de un corp de pagina mea de web aici. Și aici, un egal href să spunem HTTP://www.disney.com și site-ul meu preferat, vom spune. Bine, deci o foarte , pagina inofensive ușor de utilizat. Dacă acum mă duc în directorul meu listarea aici și deschide link.html, avem Hyper Text. 

Și într-adevăr, în cazul în care acest lucru este H în HTTP vine de la. Hypertext transfer protocol este despre transferul de text care are hyperlink-uri către alte resurse. Și într-adevăr, aici este familiar, dacă retro, albastru legătură că, dacă a făcut clic, mă va duce de fapt la Disney.com. Acum, oh, care vine în curând. Bine, asa ca acum, care sunt unele de implicațiile acestei? 

Și sincer, lumea începe pentru a obține un pic mai familiar și, de asemenea, un pic înfricoșător dar, de asemenea, un pic mai auto apărat odată ce începi pentru a înțelege aceste lucruri. Deoarece cote de pariuri sunt, unii dintre voi, dacă te duci prin dosarul spam Gmail sau chiar Inbox, ai probabil ajuns un fel de e-mail care este vă cere să schimbați parola verifica poate sau poate acreditările PayPal sau fleacuri. 

Și, de fapt, s-ar putea fi primit ceva care spune ca aici click pentru a reseta parola PayPal. Și acum, observați, dacă acest lucru nu este Disney.com dar, ca și badplace.com reîncărcați, act de faptul că textul de aici ar putea spune un fel de nimic. Și, de fapt, aceasta este doar cuvinte. De ce nu am fi de fapt foarte rău intenționat și spune http://www.paypal.com. 

Click aici pentru a reseta PayPal ta parola și acum reîncărcați. Acest lucru pare destul de legitim, nu? Adică, n-aș click pe un e-mail care spune doar acest lucru. Dar observați dihotomia aici. Se spune www.paypal.com, și, de fapt, așteptați un minut, știm că doriți S pentru securitate. Deci, acum, du-te la www.paypal.com HTTPS, dar dacă nu ați făcut acest lucru înainte, ajung în obiceiul de a situându-se peste link-uri mici aici. Și e greu să vezi pe ecran acolo, și nu e tot ce mai ușor aici. Dar aici, în mod jos colțul micuț face browser-ul de fapt, vă că vom spune la badplace.com loc de Paypal.com. Acum, în cazul în care mergem cu asta? Toate exemplele care le-am făcut astăzi, am codat greu și tastat manual. Web-ul este incredibil de neinteresant atunci când greu codul paginile dvs. de web, astfel încât conținutul este static și nu schimbarea. Desigur, toate noastre site-uri favorite astăzi, fie că este vorba Gmail sau Twitter sau Facebook sau orice număr de alte sunt dinamice. Sunt schimbare în ca răspuns la datele introduse de utilizator la fel ca rezultatele de căutare Google. 

Și așa, miercuri, ceea ce facem noi este lăsăm HTML și CSS introducere în spatele nostru și vom lua pentru a acordat că acum Știu că și vom introduce un nou limbaj de programare numit PHP, care place C, este de gând să ne dea puterea de a crea, de fapt programe care se generează de ieșire. În acest caz, vom folosi PHP pentru a genera dinamic web pagini utilizând acest nou limbaj. Cu atât mai mult cu privire la acest miercuri. Ne vedem atunci. 

[MUSIC JOC]