[Muzika] 

DAVID J Malan: Kjo është CS50 dhe ky është fillimi i javës së 7. Pra, të mirëpritur mbrapa. Dhe ju mund të kujtojnë se në problemin vendosur katër, ka pasur pak e një gjueti pastrues për disa shpërblime të pabesueshëm nga ku pasi të shërohen fotot e Stafi si këtu dhe në New Haven, ju u sfiduan për të gjetur sa më shumë prej këta shkencëtarë kompjuter si ju mund. Dhe ne kemi marrë një e tërë bandë e aplikimeve. Mendova se do të ndajnë disa me ty këtu sot. 

Dhe ne do të postoj të gjitha këto në internet. Por në mënyrë të veçantë, kam kërkuar për të tërheq vëmendjen tuaj to-- pra një, Sam ka qenë në mjaft disa prej tyre përgjithësisht duke paraqitur si kjo. Por duket se që nga këtë mëngjes, fituesi ishte një dikush me emër Ken me 24 e stafit kapur në kamera ose pak më shumë kur ju keni marrë në përbëjnë stafin shumta në foto. Foto këtu është Ken tjetër Marisë në New Haven. 

Tani, Ken, edhe pse, kthehet jashtë është pak e një rast qoshe kjo nuk ka ndodhur ende përpara. Ajo rezulton se ajo nuk ka ndodhur për mua për të vënë shtypura mirë në problemin vendosur katër që thotë se stafi papërshtatshëm për çmimet pabesueshëm sepse Ken është, sigurisht, një prej fotografët në stafin tonë. Tani, me tha se, ai fillimisht shkroi mua të them ju lutem mos postoni këto foto online. Unë mendoj se në pjesën më të madhe sepse shumica e fotografive se ky fotograf mori shikoni një diçka të vogël si kjo. Dhe si. 

Por Ken do të donte mua për të siguruar ju se ai është një fotograf shumë i mirë, ai është një profesionist, ai e merr fotot që nuk janë blurry, që janë më të mira në fokus, dhe ai mori mjaft disa prej vetë stafit tonë. Por në vend se vetëm të pranojmë Ken, ajo që ne menduam se do të bëjmë është të shkoni nëpër listën e Studentët të cilët aktuale të paraqitura. Dhe kjo rezulton se Lance me 15 fotografi, si e këtij mëngjesi ishte fitues ynë. 

Dhe foto këtu është Lance me Colton, me SKAZ, me veten, dhe me Sam. Por pastaj ajo rezulton se si të 11:46, kështu që vetëm pak më parë, Unë u ktheva në email time dhe gjeti se kemi pasur edhe një dorëzimi më shumë nga një student me emrin Bonnie të cilit email tha vetëm këtë. Nuk do të gënjejë, unë jam bërë këtë gjatë klasës. Dhe pastaj vazhdoi të bashkëngjitni vetëm 14 fotografi, një i trembur nga Lance-së 15. 

Por në fotot Bonnie, ajo kthehet jashtë ishin anëtarë të shumta të stafit, Sam në mesin e tyre, kështu që ajo që ne menduam se do të bëni është të pranojmë të dyja këto. Pra, përveç marrjen e Dropbox hapësirë ​​që të gjithë ata që morën pjesë merr, këto dy seksione gjithashtu do të marrin një drekë të mirë catered për ta dhe seksioni i tyre mates këtë javë që vjen. Dhe kështu që ju do të dëgjoni nga ne, Lance dhe Bonnie, në lidhje me atë. Congrats aq i madh për ta. Tani, ata prej jush që do të si drekë në përgjithësi e di se drekë CS50 në Kembrixh dhe New Haven është kjo e premte. Shko tek çaj website RSVP CS50 e. Dhe tani një fjalë në seminare. Më shumë curricularly. Pra, ne jemi afrohemi Pika e semestrit ku ju duhet të fillojë duke menduar në lidhje me projektet përfundimtare. Dhe në fakt, në vetëm pak, do të ashtuquajtura propozimet e para të jetë për shkak. Propozimet Pra, para janë të destinuara për Ndikimi jetë mjaft i ulët dhe të vërtetë vetëm një mundësi për që të shkruaj një shënim të shkurtër shokët tuaj mësim të informoj atij ose asaj çfarë jeni duke menduar ju mund të dëshironi të bëni për projektin tuaj përfundimtar. 

Tani, shumë studentë përfundojnë duke bërë bazuar web projektet përfundimtare. Dhe sigurisht, ne jemi vetëm Javën e kaluar tani në këtë dhe përtej zhyten në programimin e web. Pra, jo për t'u shqetësuar nëse ju kanë absolutisht asnjë ide se si ju do të ndërtuar idetë që ju mund të keni në mendjen tuaj. Kjo është me të vërtetë vetëm një funksion i detyruar të merrni ju të menduarit dhe duke folur me TF tuaj në lidhje me të. Por për të ju ndihmojë me këtë, dhe me projekte finale në fund të fundit, e di se CS50 ka traditë për të ofruar seminare. 

Dhe këto janë fakultative, duart në, ose leksion në bazë të mundësive për të mësuar më shumë në lidhje me temat që janë një ndihmëse pak për Sigurisht së plani mësimor, por megjithatë e mrekullueshme material për të përzënë projektet përfundimtare. Dhe kështu kjo është lista që është Stafi CS50 këtu në New Haven kanë dalë me për këtë vit për iOS programimit, Android programimit, zhvillimin e lojës, dhe rrush të shumë mjeteve dhe gjuhë dhe teknikat. 

Kështu që të mbajë një sy në faqen e internetit të CS50 e. Dhe në ndërkohë, në qoftë se ju dëshironi të regjistruar interesin tuaj në ndonjë nga këto, shkoni në regjistrin CS50 e çaj. Dhe ne pastaj do të ndjekë deri sa të ditë dhe kohët e fluturimit dhe vende dhe everything-- më çdo gjë do të të jetë Transmetuar dhe gjithashtu në dispozicion në kërkesë pasi në qoftë se ju nuk mund të vërtetë të bëjë atë. Pra, pa zhurmë më tej, ne lënë jashtë për herë të fundit me të merrni. 

Dhe kjo ishte si mesazh që ishte brenda zarfit virtuale, kujtojnë, se kemi kaluar nga router në router për router midis një shfletues web dhe një web server. Dhe se dukej një mesazh pak diçka si kjo. Ky ishte mesazhi më misterioze që ishte në fakt brenda një zarf shkruar në një copë letër të cilit Linja e parë thotë fjalë për fjalë, të merrni plagë. 

Dhe ashtu si një kontroll mendje e shëndoshë, çfarë treguar slash? Çfarë do të thotë kur slash kërkuar një faqe interneti? Ti kërkojë atë gjatë gjithë kohës. Më çdo kohë që ju vizitoni një faqe interneti, ju fakt nuk shkruani emrin e file. Ju ndoshta thjesht shkoni te Facebook.com, të hyjë, gmail.com, ose si. Dhe çfarë slash përfaqëson? Çfarë skedar? Ose çfarë faqe, konkretisht? 

Indeksi, vërtet. Pra faqen e parazgjedhur. Pra, nëse ju nuk specifikoni një fotografi emrin si ne do të fillojmë të shohim, ju jeni në të vërtetë vetëm të kërkuar jepni faqen e parazgjedhur të Facebook ose më jepni kutinë time apo të japë mua faqja parazgjedhur i lajmeve në faqen e internetit CNN apo të ngjashme. Dhe një server pastaj përgjigjet që mesazhi me diçka kështu, duke thënë: Po, unë flasin HTTP versionin 1.1. 

200, e cila është një status Kodi që ne njerëzit rrallë ndonjëherë shoh sepse kjo është e mirë. Sepse kjo do të thotë OK, kërkesën u prit dhe trajtohet siç duhet. Dhe llojin përmbajtja me sa duket në përgjigjen është mjaft shpesh, por jo gjithmonë, teksti. Dhe në mënyrë specifike, HTML. Dhe kjo është në fakt ku ne shikojmë sot. 

Pra, në fakt, unë jam duke shkuar për të shkuar përpara dhe të hapur një shfletues. Unë jam duke shkuar për të përdorur Chrome, ju mund të përdorni më ndonjë shfletues në javët që do të vijnë. Ne përgjithësi rekomandojmë Chrome sepse kjo është veçanërisht e mirë për zhvilluesit e programeve. Atë e mori një shumë të ndërtuar në mjete që e bëjnë më të lehtë për të zhvilluar jo vetëm HTML dhe CSS, gjëra ne do të fillojmë të flasim për sot, por edhe gjuhë të tjera si edhe. 

Dhe unë jam duke shkuar për të shkuar përpara dhe të shkojnë to-- Unë jam duke shkuar për të kontrolluar click ose djathtas klikoni kudo në një web faqe. Dhe unë jam duke shkuar për të shkuar në Inspect Element. Dhe unë jam duke shkuar për të shkulje tim ekran vetëm pak këtu. Më lejoni të shkojë kjo në fund. Pra, kjo është ajo që quhet Inspektori Chrome. Pra, kjo është si një debugging mjet ndërtuar në Chrome. 

Të gjithë ju tashmë kanë këtë në qoftë se ju keni qenë duke përdorur Chrome. Dhe kjo ju lejon të shihni se çfarë po ndodh në nën kapuç e disa web faqe. Pra, le të vërtetë të marrë një shikoni në këtë si në vijim. Ajo ka mënyrë më shumë karakteristika dhe ne kujdesemi për sot. Por ka këto tabs mbi këtu. Elementet, rrjeti, burimet, afat kohor, dhe disa sende të tjera. Unë jam duke shkuar për të klikoni mbi Rrjeti për një moment. 

Dhe kjo është pak e madhe në shikim të parë këtu. Por ajo që unë jam duke shkuar për të bëni është të le të më të lehtësuar atë një pak. Unë jam duke shkuar për ta kthyer në regjistrimi dritë në mënyrë që ajo është e kuqe. Dhe unë jam duke shkuar për të thënë ruajtur log. Dhe kjo është vetëm pak gjë që unë me motive nga me kalimin e kohës kjo do të shpëtojë çdo gjë që ndodh në shfletuesin. Dhe tani unë jam duke shkuar për të shkuar për http://facebook.com. 

Në fakt, le ta bëjmë www për masë të mirë, çaj. Enter. Pra, një URL që shumë prej ju mund të keni vizituar. Dhe tani web Facebook faqe vjen deri në krye. Dhe pastaj një bandë e tërë e sende fluturoi nga në fund. Dhe në fakt, rezulton se kur ju vizitoni facebook.com, ju nuk jeni vetëm duke bërë një kërkesë HTTP, del se do të Facebook.com dërgon 41 e këtyre zarf, secili me kërkesën e vet të merrni, siç tregohet, megjithëse prapa ekranit këtu, në pjesën e poshtme të ekranit, ajo tregon se, me të vërtetë, im Shfletuesi i bëri 41 kërkesat. 

Dhe në total, ajo bartet 861 kilobytes dhe ajo e mori për disa arsye sa më shumë si tetë sekonda për të shkarkuar të gjithë se. Pra, kjo është në fakt pak i çuditshëm që faqja Facebook do të marrë atë gjatë, por kështu që të jetë ajo në këtë rast. Tani, e gjithë kjo unë nuk e kujdesit të vërtetë për përjashtim të kërkesës larti. Pra, le të shkojnë në këtë një të drejtë këtu dhe më lejoni të zoom jashtë për vetëm një moment. 

Dhe më lejoni të zoom në në këtë. Pra, ajo që unë kam bërë në të majtën, edhe pse ka shumë ndodh gjatë këtu po unë kam theksuar Facebook.com dhe pastaj vëreni se unë jam scrolling poshtë, scrolling poshtë, scrolling poshtë, për të kërkuar headers. Dhe ju do të shihni se Chrome është duke treguar Me thelb përmbajtja e brendshme i kërkesës kam bërë. Kjo nuk është formatimit në krejt e njëjtë mënyrë, por vini re nuk ka përmendur të marrë, vini re nuk ka përmendur të ushtrisë, Facebook.com, rruga, apo Slash, që është skedari i kërkuar. 

Dhe pastaj në qoftë se unë lëviz të mbështetur, ne do të vërtetë shihni se çfarë Facebook kthyer për mua është të gjitha këto headers. Pra, brenda këtij zarf virtuale në të vërtetë janë shumë çifte kyçe me vlerë. Një fjalë, një zorrë e trashë, dhe pastaj një vlerë. Një fjalë, një zorrë e trashë, dhe një vlerë. Këto janë quajtur headers. Dhe nuk ka mënyrë më shumë detaje këtu se ne fakt e kujdesit për tani. 

Por kjo është e dyta për e fundit atje poshtë, vini re, se serveri facebook.com së, fakt, u tha këtu vjen disa HTML tekst. Pra, e gjithë kjo do të thotë që kur ju kërkoni një web faqe nga një shfletues në një server, server që i përgjigjet me një zarf të vetin brenda së cilës është tekst. Me fjalë të tjera, HTML. HyperText Markup Language. E cila është një gjuhë tjetër që ne kemi prezantuar sot se njerëzit apo kompjuterat gjenerojnë në mënyrë që të zbatojë web pages. 

Në mënyrë të veçantë, le të shohim në këtë. Unë jam duke shkuar për të shkuar mbrapa tani në faqen e internetit Facebook. Dhe unë jam duke shkuar për të vetëm click kontrollin ose right click dhe klikoni në View Page Source. Dhe edhe në qoftë se ju nuk e përdorni Chrome, IE mund ta bëjë këtë, Firefox-i mund ta bëjë këtë, Safari mund ta bëjë këtë, edhe pse menu Opsionet mund të duket pak më ndryshe. Dhe kjo është HTML që Mark dhe Kompania në Facebook kanë shkruar. 

Dhe për kolektivisht, kjo gjuhë këtu zbaton blu dhe faqe të bardhë që ne pamë një moment më parë. Tani, kjo është pak e madhe. Por, nëse ne shikojmë në të lartë të majtë, ne jemi do të fillojnë të shohin disa modele. Ajo duket sikur ka një shumë e këtyre kllapa kënd të hapur dhe pastaj nuk ka kjo HTML fjalen. Ja një tjetër të hapur kllapa kënd dhe kokë. 

Këtu është, në qoftë se ne lëvizni poshtë dhe poshtë dhe poshtë, unë jam do të shkojnë përpara dhe të përpiqemi për të kërkuar për diçka. Nuk ka mënyrë gjatë në të djathtë këtu është trupi i hapur kllapa. Dhe kujtojnë nga e kaluar koha që kemi propozuar se web faqe të thjeshtë që një njeri mund të shkruani mund të duket një diçka të vogël si kjo. Hapur tag HTML, kreu hapur tag, tag titullin e hapur, atëherë titulli mbyllur, kreu i mbyllur, të hapur tag trupit, disa tekst, trupin e mbyllur, HTML mbyllur. 

Por një pauzë këtu për vetëm një moment. Ky kod, edhe në qoftë se ju keni kurrë shkruar atë më parë por ende nuk e kuptojnë mjaft çfarë po ndodh, duket goxha e mirë. E drejtë, është shumë i pastër. Është shumë e stilistikisht e bukur. Një shumë e vulë dhe hapësirë ​​të bardhë. Facebook-së nuk është. Pra, pse është kaq shumë në Facebook më keq se unë në shkrim HTML? Me sa duket. 

E drejtë, kjo është si një nga pesë për stilin. Ka një arsye bindëse për ata të prerë këto qoshet. Të gjithë të drejtë, kështu që ata nuk duan të bëjnë më të lehtë për ju për të lexuar atë. Pra, në një farë mënyre, ata janë obfuscating atë lloj të përpiqen atë të paktën estetikisht në mënyrë se është e vështirë për Myspace për të shkuar dhe të shqyej off e tyre homepage dhe HTML për të. Ajo rezulton se me programet e Megjithatë, duke përfshirë Chrome, ne mund të pastër këtë ide super lehtë. Pra, kjo nuk është mjaft që është si arsye. Çfarë tjetër mund të jetë shkaku. Po. Po, kushton hapësirë ​​të bardhë e të dhënave. Cfare do te thuash? Po, pikërisht. Nëse ju goditi kyç Tab shumë ose space bar, konsiderojnë pasojat. Pra, çdo kyç në tastierën tuaj është një [Padëgjueshme] përfaqësuara si një byte. 

Pra, mendoj se Marku ose ndonjë nga devs këto ditë godet spacebar vetëm një herë Në këtë faqe HTML që përfaqëson faqen Facebook. Dhe Facebook ka një shumë e përdoruesve të këto ditë. Pra, mendoj se homepage Facebook është vizituar nga një miliard njerëz sot. Dhe dikush në Facebook ka goditi space bar vetëm një herë. 

Pra, një bajt shtesë, një miliard kërkesa, sa më shumë të dhënave është në Facebook transferimin në lidhje me internet sepse dikush goditi spacebar në tastierën e tij apo të saj? Një miliard bytes, ose një Gigabyte nga të dhënat është dërguar nga serverat e Facebook të njerëzve në mbarë botë për asnjë arsye të mirë. Tani, kjo është vetëm një hapësirë. 

Paramendoni nëse ne fakt pastruar këtë gjë dhe të prerë atë dhe shtoi një shumë hapësirë ​​të bardhë dhe karaktere tab dhe hapësira, ju deri në fund gigabajt të shpenzimeve, në qoftë se nuk terra bytes më tepër hapësirë. Dhe kështu super të zakonshme në Bota aktual i zhvillimit të internetit është që të minimizoj kodin tuaj. Dhe ne do të shohim përfundimisht si ju mund të bëni këtë. 

Por sot, ne do të filloni të shkruani kodin kjo është në fakt i lexueshëm nga ne njerëzit. Ajo rezulton, edhe pse, në qoftë se ju shkoni mbrapa për këtë mjet në Chrome Inspect Element, më parë, ne ishim në skedën e rrjetit. Ajo rezulton se në qoftë se ju shkoni në Elementet tab, ajo që ju shihni në fakt është Chrome e shtypur goxha version i të njëjtit HTML. Pra, ne kemi deobfuscated atë. Kështu që nuk është ndeshje për një kompjuter. Dhe tani ju mund të vërtetë klikoni përreth dhe të fillojnë për të parë hierarkinë që është një faqe web. Pra, le të bëjë në fakt këtë. Unë jam duke shkuar për të shkuar përpara dhe të hapur deri në Mac tim një program të quajtur tekst edit. Dhe kujtojnë se kjo është vetëm një program teksti super i thjeshtë. Windows ka notepad.exe. Dhe unë jam duke shkuar për Verbatim Llojin e mëposhtme. Lloji doc HTML, kllapa e hapur HTML, mbyllur kllapa HTML, ne kemi kreu i faqes këtu, fundi i kreut të faqes këtu, një titull do të jetë si, Hello World. 

Dhe pastaj këtu poshtë, ne kemi nevojë trupi i web faqe. Trupi i mbyllur. Dhe pastaj në këtu, Hello World. Në rregull. Pra, ne kemi shkruar një faqe të super të shpejtë web. Unë jam duke shkuar për të shpëtuar atë si hello.html në tavolinën e punës time. My Mac do të ankohen, duke menduar se, prit një minutë, kjo është një file teksti, të bëjë ju doni të telefononi atë txt? Por jo, unë dua të përdorni dot HTML. 

Dhe pastaj çfarë është mirë nëse unë thjesht klikoni këtë fotografi të dyfishtë, hello.html, këtu është web faqen time. Për fat të keq, unë jam Personi i vetëm në botë të cilët mund të vizitoni këtë faqe tani. Sepse ku e bën atë të jetojë me sa duket? Është në Mac tim, e drejtë? E cila është e padobishme. Si askush në këtë dhomë le të vetëm në internet në fakt mund të vizitoni atë faqe. Pra sot, ne kemi nevojë për futur një element tjetër. 

Dhe për të bërë këtë, unë jam duke shkuar për të shkojnë përpara dhe të hapur Cloud 9. Pra cloud 9 është sigurisht një cloud service-- bazuar CS50 IDE-- Kjo ka të gjitha hapësirave të punës sonë running diku në internet. Dhe kjo do të thotë se të gjitha dosjet tona janë të qasshme publikisht tashmë. Pra, le të shkojnë përpara dhe të bëjë këtë. Unë jam duke shkuar për të shkuar përpara dhe të krijojë një skedar të ri NCS50IDE. Unë jam duke shkuar për të shpëtuar atë si më parë si hello.html dhe klikoni për të shpëtuar. Dhe tani vetëm për të kursyer kohë, unë jam duke shkuar për të shkuar përpara dhe kopjoni ngjisni këtë kod në vend se Rivendos atë. Dhe për të shpëtuar atë. Dhe kështu që tani unë kam një file i quajtur hello.html. Por si mund ta fakt hapur atë si një faqe interneti? E pra, ajo rezulton të ndërtuar në të CS50 IDE nuk është vetëm një përpilues si tingëllim dhe një Rregullues si GDB dhe bunches e programe të tjera, ka në fakt një të drejta të plota të plotë web server running brenda CS50 IDE. 

Të gjithë ju, që do të thotë, keni vet web serverin tuaj. Dhe një web server është vetëm një pjesë e softuerit qëllimi i të cilave në jetë është për të shërbyer deri faqet e internetit. Për të dëgjuar për kërkesat nga shfletuesit dhe përgjigjet me pak zarf virtuale brenda së cilës është përmbajtje që unë kam shkruar. Pra, kjo web server është burim të vërtetë e lirë dhe të hapur. Ku burim të hapur vetëm do të thotë software që dikush tjetër ka shkruar se të gjithë ne mund të në fakt të parë dhe të shkarkoni dhe madje ndryshoni kodin burim. Dhe kjo është quajtur Apache. 

Dhe ne kemi bërë atë një pak më e lehtë për të përdorim në CS50IDE duke e quajtur atë Apache 50. Në mënyrë që ajo mund të vërtetë kuptojnë në vijim. Unë jam duke shkuar për të thënë Apache 50 fillimin. Dhe atëherë unë jam vetëm do të them dot. Dhe ne shohim disa disi Mesazhi misterioz duke thënë se vendosjen e apache është dokument [? grup?] në shtëpi, ubuntu, çfarëdo që është, çaj hapësirë ​​pune. Duke filluar nga web server Apache 2 me sukses. 

Pra histori të gjatë të shkurtër, unë kanë shtyrë vetëm një buton dhe u kthye në një web server i cili është tani duke dëgjuar në internet në portin TCP 80 në një adresë të veçantë. Dhe ai thotë se këtu, dhe kjo do të ndryshojë në bazë mbi emrin e përdoruesit dhe faktorë të tjerë, por vini re tani, nëse unë klikoni këtë, IDE50 dot jharvard dhe kështu dhe kështu, vini re se të gjithë këtë kohë për të kaluarën disa javë, ju mund të keni vënë re se vetë emrin tuaj është ngulitur në anën e sipërm të djathtë qoshe e CS50IDE. 

Dhe që në fakt ka qenë gjithë kjo Herën e adresën në të cilën ju mund të vizitoni të gjitha dosjet tuaja nëpërmjet internetit. Deri më tash, kjo nuk ka rëndësi, sepse në C, ju në përgjithësi duam që gjërat running në një terminal, jo në web. Por sot, ne fillim shkruar web bazuar kodin që ne duam të arritshme në URLs publike. Pra, ajo që unë jam duke shkuar për bëni është të klikoni këtë URL. 

Dhe vini re se unë shoh një mënyrë të drejtë Indeksi i shëmtuar, një listë drejtori, por ajo që dosja hedhje nga ju ndoshta? Hello.html. Kjo për shkak se unë ruajtur fotografi në Workspace time. Dhe ajo që unë kam thënë Apache web server është të shikoni në directory Davidit Workspace. Dhe le të gjithë në Bota shohin ato fotografi. 

Dhe me të vërtetë, në qoftë se unë tani klikoni mbi hello.html, Unë shoh në këtë tab pikërisht këtë dosje. Tani vini re, cloud vepër 9-së diçka pak të dobishme për ne. Brenda CS50 IDE, vini re nuk ka papritmas një bar adresë. Kjo për shkak se, edhe pse ne jemi duke përdorur Chrome për të vizituar CS50IDE, brenda CS50IDE është vet version i një shfletuesi web të drejtë tani. Dhe kështu në vend se komplikojë gjërat si i tillë, Unë jam duke shkuar për të shkuar përpara dhe vetëm kopje këtë URL. Unë jam duke shkuar për të shkuar përpara dhe vetëm të hapur vet dritaren time Chrome. Pra, nuk ka magji këtu, nuk ka CS50IDE. Unë jam vetëm duke shkuar për të fjalë për fjalë ngjitur im J Harvard URL dhe hit Enter. Dhe voila, tani unë, dhe në teori, të gjithë në internet, në qoftë se unë kam konfiguruar lejet në mënyrë të përshtatshme, mund të vizitoni këtë fotografi. Dhe kështu që tani, në qoftë se unë i thashë hello.html, voila, atje është web faqen time tepër të underwhelming. Pra, le të bëjë një kontroll të shpejtë mendje e shëndoshë. Sepse të gjithë që është konceptual të vendosur deri. Dhe ne nuk kemi në fakt të vërtetë ju mësoi se si të shkruajnë HTML në vetvete. Çfarëdo pyetjeje deri tani në atë që ka ndodhur vetëm? Po. A vetë CS50 këto faqe web? Në çfarë kuptimi? Pyetje e mirë. Pra CS50 zotëron CS50.io. Ne e kemi blerë të vërtetë këtë emër domain. Dhe nga natyra e ju djema prerje-transportim trupash në CS50IDE, të gjithë ju të merrni atë që quhet një subdomain. 

Pra IDE50-Malan, ose IDE50-Rob.CS50.io, kjo është adresa juaj unik brenda emrin tonë domain. Pra, për qëllimet e kursit, ju keni vet adresën tuaj unik. Por ne kemi thjeshtësuar gjërat nga blerjen e domain të nivelit të lartë, CS50 dot I / O dhe pastaj të gjithë të tjerët është brenda e që, si të thuash. Dhe ne do të kthehen në atë në disa javë ndoshta, veçanërisht në projektin e fundit kohë, kur disa nga ju mund të dëshironi të merrni emrat e domain tuaj. Kjo është në fakt relativisht drejtpërdrejtë. Në rregull. Pra, tani le të bëjmë këtë. Unë jam duke shkuar për të shkuar mbrapa në CS50IDE, ku dosjen time tani, hello.html, nuk është e gjitha që interesante. Unë do të doja të bëjë diçka pak nicer se kaq. Kështu që unë jam duke shkuar për të bërë diçka si kjo. Më lejoni paragraphs.html hapur. Pra, kjo është një file i kam shkruar më parë. Në krye të saj, si gjithmonë, ne kemi komente. Por në HTML, komente duket pak më ndryshe. On line tre dhe linjë 14, ju shih sintaksë për të filluar një koment dhe në fund një koment. 

Por asnjë të gjëra në midis çështjeve funksionalisht. Kjo është vetëm një shënim për një njerëzore çfarë po ndodh këtu. Dhe ashtu si një mendje e shëndoshë të shpejtë kontrolloni, nëse unë lëvizni poshtë, çfarë është e re qartë tag që ne i kemi futur? Tags deri më tani ne kemi parë jemi të hapur kllapa HTML, kreu, titullin, dhe trupin. Por ajo që është padyshim i ri tani? 

Yeah, kështu f. Tag p ose paragrafi tag. Dhe atëherë unë vetëm huazuar disa parazgjedhje Teksti latinisht të përbëjnë paragrafët e mia. Sepse ajo që kam kërkuar për të demonstrojë është se si ju fuqia përfaqësojnë paragrafët e tekstit në HTML. Dhe kështu që ajo që është duke filluar të ndodhë këtu është se ka tashmë një model zhvillimi. Dhe më lejoni të shkoj përpara dhe të bëjë këtë. Më lejoni së pari të fikur Apache. Dhe unë jam duke shkuar për të treguar atë për të filluar vetë përsëri brenda e burimit të sotëm shtatë Lista m. Kështu që unë të kenë qasje në çdo gjë. 

Dhe tani, në qoftë se unë kthehem në Ky listim drejtori, vini re unë shoh çdo skedar nga sot. Dhe ju do të shihni në Grupi tjetër problem, ne do të t'ju japë udhëzime për të bërë pikërisht këtë. Në qoftë se unë të hapur paragraphs.html, kjo mund të si dhe të duket si një gjuhë programimi për ju, nëse ju nuk flisni apo lexuar latinisht. Por kjo është vetëm tre paragrafë i tekstit që janë shënuar deri në HTML. 

Dhe vini re paragrafin Prishet mes tyre. Sepse ajo rezulton, dhe edhe pse ju mund të jenë të prirur për të bërë këtë, kurse në botën reale, në qoftë se ju doni të vënë linjë prishet në mes të gjërave, ju fuqi mjaft e thjesht bëni këtë dhe e goditi Save. Dhe tani, në qoftë se unë ringarkoni këtu, njoftimi se çdo gjë vetëm zbeh së bashku në vetëm një pikë të tekstit. Sepse HTML është lloj i një gjuhe memec. 

Ajo është menduar për t'u përdorur në të tilla një mënyrë se shfletuesi do të vetëm të bëjë në mënyrë të qartë atë që ju them se për të bërë. Pra, nëse ju nuk tregoni atë më jepni një paragraf i ri, ju nuk jeni duke shkuar për të parë një paragraf të ri. Dhe në fakt, çfarë shfletuesi do të bëjë është edhe në qoftë se ju goditi Enter, le të themi përsëri dhe përsëri dhe përsëri, duke lëvizur në këtë mënyrë me tekst poshtë në ekran dhe pastaj të shpëtuar dhe pastaj ringarkoni, shfletuesi do të rrëzohet të gjithë atë hapësirë ​​të bardhë në vetëm një whitespace të vetme, të dukshme. Në rregull. Pra, kjo është paragrafi tag. Dhe kështu që çfarë është model që është zhvilluar këtu? E pra, kjo duket të jetë rasti që HTML është e gjitha në lidhje me fillimin e një tag dhe duke i dhënë fund një tag. Dhe çfarë është një tag? E pra, kjo është vetëm një copë e sintaksës. Parantezë të hapur, një fjalen, kllapa mbyllur, është një tag. Ose të fillojnë tag. Dhe pastaj kur ju jeni bëhet shprehur veten, si në ju jeni bërë me paragrafin, ju të bëni në mënyrë që të flasin të kundërtën. Por e kundërta nuk është mjaft prapa. 

Ju thjesht prefiksin e njëjtë tag-së emri me një plagë përpara si kjo. Në rregull. Pra, jo të gjithë që emocionuese. Dhe në fakt, ne nuk jemi duke e bërë web të gjithë që më interesante. Çka nëse unë dua të bëj gjëra të mëdha dhe të guximshme? Pra, rezulton se këtu është një shembull në headings.html, ku në trupin tim, Unë kam marrë një tag H1, H2, H3, kater, pese ose gjashte, të gjitha nga të cilat duket mjaft misterioze. Por në qoftë se unë shkoj hapur këtë shembull, le të marrin një sy. Headings.html. 

Pra, shfletues by default mund të ju jap tekst kjo është e madhe dhe të guximshme të madhësive të ndryshëm. H1 është i madh. H6 është më i vogël dhe më pas çdo gjë tjetër në mes. Pra, kjo është interesante, por ende jo të vërtetë web unë e di. Çfarë ndodh nëse ne duam të kam diçka si një listë. . Kështu që këtu është një listë me kokrra të tre prej shtëpive Harvardit. 

Si keni shkuar për të bërë këtë? E pra, hidhini një sy në list.html. Dhe këtu, ne shohim një pak i funkiness por le të konsiderojmë se çfarë po ndodh. Pra, bazuar në atë që ju keni parë vetëm, UL qëndron për listën e parregullt. Listë të renditura thjesht do të thotë bulleted. Nuk ka asnjë numër. Ka edhe diçka që quhet një Lista e urdhëroi, i cili është një ol në tag. Pastaj LI, pika lista është e gjitha kjo do të thotë. 

Dhe kështu atë automatikisht Numrat e çdo gjë për ju. Por, përsëri, të gjithë vulë e mia dhe hapësira e bardhë është vetëm për shkakun tim. Shfletuesi nuk është në të vërtetë do të kujdesen. Pra, edhe pse ju nuk mund të bërë këtë, vetëm të jetë i qartë, ju nuk duhet edhe pse shfletuesi do të vazhdojë të jetë në gjendje për të kuptuar atë vetëm gjobë. Unë jam goditur ringarkoni në tim shfletuesi, unë jam duke klikuar ringarkoni dhe nuk ka ndryshim po ndodh sepse shfletuesi ende duke bërë pikërisht atë që unë them atë për të bërë. 

Në rregull. Pra, kjo është e gjitha vetëm tekst. Tani le të bëjë diçka më interesante. Unë jam duke shkuar për të shkuar përpara dhe hua disa nga këto HTML. Unë jam duke shkuar për të shkuar përpara dhe të krijojë një skedar të ri këtu. Dhe ne do të quajmë këtë rick.html. Ne kemi në mënyrë disproporcionale diçka përdorur quajtur një roll rick në këtë klasë këtë vit, unë nuk e di, ajo vetëm ka ndodhur organikisht. 

Dhe tani ajo doli jashtë kontrollit. Kështu që unë jam vetëm duke shkuar për të shkuar me të. Dhe kur të shkoj në Google Imazhet dhe Rick Astley. Nëse ju nuk e di pse ne bëjmë kjo, vetëm lexoni deri në Wikipedia. Çdo herë që të keni klikuar mbi link, dikush i është qeshur diku. Dhe më lejoni të shkoj atje ahead-- ne do të shkojmë, le të shohin këtë imazh. 

Pra, këtu ne kemi një Imazhi në Google Images. Dhe le të supozojmë se kjo është të arsyeshme kudo në internet. Kështu që unë jam duke shkuar për të supozojmë se është në rregull për mua që në fakt të vënë këtë në web faqen time. Unë jam duke shkuar për të shkuar përpara dhe kopje imazhit URL. Dhe tani, nëse unë kthehem në Cloud 9, le të shohim se çfarë mund të bëj këtu. Kështu që këtu është vetëm një faqe web. Kjo është Rick Astley, haha, Unë jam duke shkuar për të shkuar mbrapa tani në shfletuesin tim, ringarkoni, dhe interesante. 

Ku është Rick? Pra më lejoni të shohim se çfarë ka ndodhur. Në fakt, unë jam duke shkuar për pretendojë si unë nuk e ka bërë atë. [Padëgjueshme] e futi në këtu. Ne do të kthehen në se në një moment. Kështu që këtu është rick.html. Pra, kjo nuk është Rick Astley. Pra, ajo rezulton ne mund në fakt shtoni atë në këtu. Kjo është Rick Astley. Unë jam duke shkuar për të thënë më jepni një imazh të cilit burim është URL unë vetëm kopjuar, e cila me sa duket është një i lumtur ditëlindjen diçka ose të tjera. 

Dhe tani unë jam duke shkuar për mbylli tag si kjo. Pra, kjo është duke përfunduar super e gjatë. Por vini re se të gjitha unë kam bërë është imazhi parantezë hapur, burim me një atribut të kësaj. Dhe kjo është një URL të vërtetë e gjatë. Dhe në fund, vini re kjo. Slash Pse kam bërë kllapa angled në vend të, si çdo tag tjetër, të paturit e një parantezë të hapur, IMG, mbyllur kllapa? Vetëm të marrë me mend edhe nëse ju nuk kanë familjaritet whatsoever me HTML para. 

Pra, kjo është se si ajo mbyllet komanda, por pse e bën atë të vërtetë të bëjë intuitive kuptim për të bërë diçka pak më shumë fjalëshumë si imazh të ngushtë? Po. Po. Vetëm semantike, nuk ka kuptim të duke filluar një imazh dhe duke i dhënë fund një imazh, ajo është ose ka ose nuk është. Pra, kjo nuk ka kuptim për të lënë një boshllëk për çdo gjë tjetër brenda një imazh. Ju thjesht nuk mund ta bëjë këtë. Dhe kështu sintaksa në përgjithësi do të jetë vetëm për të bërë plagë përpara brenda e tag të hapur ose tag fillimit dhe pastaj goditi Save. 

Pra, nëse unë tani rifreskoni këtë fotografi, tani Unë kam marrë një web faqe të mirë gatim këtu. Dhe ne mund sigurisht me të vërtetë të fyejnë njerëzit nga embedding në vend si një lidhje në YouTube. Dhe në fakt, në çdo kohë ju keni shkuar ndonjëherë në YouTube, dhe më lejoni në fakt aksidentalisht rick roll veten këtu. Pra, Rick roll. Kështu rick roll-- unë jam duke shkuar për të shkuar këtu. 

[Muzika] 

OK, një person i pëlqente që. Pra, vini re të gjithë këtë kohë, në qoftë se ju klikoni Share linkun, ju natyrisht merrni URL që ju mund të vërtetë embed në një email ose një imazh mjeko-ligjor ose në një problem të vendosur ose në një rrëshqitje. Dhe tani, në qoftë se unë në vend që të klikoni mbi Mbjell, vini re se të gjithë këtë kohë, kjo stuff ka qenë atje. Unë jam duke shkuar për të shkuar përpara dhe kopje këtë. 

Dhe vetëm kështu që ne mund të shohim atë më të mirë, unë jam duke shkuar për të ngjitur atë në editor teksti time. Vini re se kjo çfarë YouTube ka qenë duke u thënë ju. Çdo herë që ju vizitoni një Video YouTube, në qoftë se ju duan të embed video në tuaj web faqe, thjesht kap kjo. Pra, kjo është edhe një HTML tag quajtur një iframe. Ose një në kuadër linjë. Pra, kjo shumë duket pak më shumë komplekse se të gjithë të tjerët. Pra, rezulton se imazhin tag dhe me sa duket tag iframe të cilat janë quajtur atribute. 

Dhe kjo është një tjetër pjesë e sintaksë në HTML. Përveç tag-së emri, i hapur kllapa emri tag, ju mund të kontrollojë sjelljen e tag duke pasur një bandë e tërë e atribut është e barabartë me vlerën. Atribut është e barabartë me vlerën. Dhe kështu për shembull, YouTube është duke na thënë në qoftë se ju doni gjerësia e këtë video të jetë 420 pixels dhe lartësia të jetë 315 pixel, kjo është si ju shprehin atë në HTML. 

Burimi i video po shkon të jetë se gjatë YouTube URL dhe pastaj disa sende të tjera si kufiri kornizë është zero, kështu që ndoshta do të thotë se ka nuk ka kufi rreth gjë. Lejo ekran të plotë ndoshta do të thotë se përdoruesit mund të klikoni një buton dhe në fakt ekran të plotë video. Pra, nëse unë me të vërtetë duan të jenë të mbresëlënëse këtu në Rick dot HTML, në vend që të përdorni tag imazhit, le të mua fshini se, në vend të ngjisni këtë. Dhe tani reload. Dhe tani këtu ne do të shkojmë përsëri. Të gjithë të drejtë, kjo është e mjaftueshme. Të gjithë të drejtë kështu që unë do të përpiqet e vështirë të mos e bëjë atë përsëri. Pra cilat janë disa nga takeaways këtu? Pra HTML, të shëmtuara si këto faqet e internetit janë, në fakt është shumë e thjeshtë. Kjo nuk është një gjuhë programimi. Ajo nuk ka funksione. Ajo nuk ka sythe. Ajo nuk ka kushte. Të gjitha ai ka është e dhjetra të etiketa ndryshme, secila prej të cilave ka zero ose më shumë atribute. Dhe në fakt, ajo që është argëtim për HTML si ju filloni për të zhyten në është se ajo është i aftë për shkollë shumë vetë. 

Të gjitha ai merr është një kuptim e kuadrit të përgjithshëm të HTML. Çfarë është një tag, ajo që është një atribut, si mendoni ju në të vërtetë të konfiguroni një faqe interneti si në vazhdim. Dhe çdo gjë tjetër është me të vërtetë rezultati e shikuar deri në një referencë në internet ose googling se si të bëjë disa teknikë ose siç e kemi parë, duke kërkuar në burim Facebook Kodi, duke kërkuar në një faqe interneti që ju pëlqen në atë është kodi burim dhe kuptuar se si zhvilluesve atje vuri në fakt gjërat jashtë. 

Pra, ne mund të bëjmë imazhe si. Dhe në fakt, ne e bëmë atë një moment më parë. Më lejoni të shkoj përpara dhe vetëm ju tregojnë. Ja disa kod mostër. Nëse ju ndonjëherë të dëshironi të shikoni macen ters. Kështu që vëreni se unë mund të kanë një etiketë imazhit këtu. Dhe unë kam marrë një koment mbi atë. Unë kam marrë një alternativë Teksti për qasje. Pra, dikush që është duke përdorur një ekran lexues për arsye të syve në fakt mund të pastaj të ketë e tyre Ekran lexuesi thonë cat ters. Sepse në qoftë se ata nuk mund të shihni imazhin, ata mund të paktën të ketë kompjuterin e tyre tregoni atyre verbalisht se çfarë është ajo. Dhe burimi i kësaj dosje është cat.jpeg. Pra, në fakt, në qoftë se unë me të vërtetë të kërkuar për të merrni zgjuar, atë që unë mund të ketë done-- Unë nuk premtoj për të shkuar në Rick Astley, kështu Unë jam duke shkuar për të google për një mace në vend. Dhe kur të shkoj në Google Images këtu, dhe ne do të supozojmë se kjo është një foto e macja ime. 

Le të supozojmë se unë kam kontrolli klikuar ose djathtas klikuar mbi këtë, rastësisht mërzitur. Dhe cat.jpeg unë jam duke shkuar për të ruajtur në tavolinën e punës time. Lermë të shkoj përsëri në Cloud 9. Vini re se këtu, unë mund të shkoni të ngarkoni fotografi lokale. Dhe në qoftë se unë kap këtë file, cat.jpeg, njoftimi që unë mund të drag atë dhe heqin atë në Cloud 9 dhe ajo do të bërtas në mua këtu. 

Sepse ne kemi tashmë ju dhënë një fotografi cat.jpeg, por është e super të lehtë për të kap një foto që e keni marrë nga Facebook ose Flickr apo si dhe në fakt drag and drop atë në Cloud 9 dhe pastaj të bëjë atë pjesë e vetë tuaj personal Faqja e internetit apo problem vendosur shtatë ose tetë si ne do të shohim së shpejti. Dhe pastaj kur ju në fund të vizitoni këtë mace, duke supozuar I shkarkuar që të njëjtën mace, njoftim that-- kjo ishte adorable. 

Çfarë ju do të shihni është diçka si kjo fytyrë këtu. Pra, dosjet që ju referencë në një web faqe ose mund të jetë lokal në tuaj llogari ose të largët në ndonjë server tjetër si në rastin e Rick Astley photo pak më parë. Pra, ku else--, çfarë tjetër mund të bëjmë këtu? Pra, le të marrin një vështrim në vijim. Ju e dini se çfarë është lloj i ftohtë? 

Deri më tani ne kemi qenë duke e bërë web faqet shumë statike. Unë dua të erëz gjërat si vijon. Unë dua të bëj vetë motorin tim e kërkimit. Pra, për të bërë një motor kërkimi, le të të shkojnë përpara dhe të fillojnë të bëjnë këtë. Unë jam duke shkuar për të shkuar përpara dhe për të krijuar një skedar të ri të quajtur search.html. Dhe ne kemi prefabed versionet online. Uh. Mos ngjitur në dritaren tuaj terminal. Versione Prefab online. Dhe unë jam duke shkuar për të filluar si më poshtë. Kështu që këtu është fillimi i një file i quajtur search.html. Unë jam duke shkuar për të shpëtuar atë në Lista burim sotme. Unë jam duke shkuar për të thirrur këtë kërkim. Në fakt, ne do të bëjë atë më të mirë. Kërko CS50 dhe në fakt markë atë. Dhe tani, unë jam duke shkuar për të thënë diçka si H1 CS50 Kërko. Dhe pastaj këtu poshtë, H2 vjen së shpejti. Dhe vetëm për radhitje, H1 dhe H2 thotë çfarë respektivisht? 

Po, kaq e madhe dhe të guximshme, dhe jo aq i madh, por ende të guximshme. Pra, nëse unë të shpëtuar këtë dhe të shkojnë mbi këtu, le të shohim file search.html. Të gjithë të drejtë, dhe kjo është right-- [e padëgjueshme]. Stand by. David është i hutuar. Oh, kjo është e drejtë atje. David është një idiot. NE RREGULL. Pra, nuk është. Pra CS50 Kërkimi vijnë së shpejti. Deri tani, le të sintetizojë çfarë kemi bërë javën e kaluar. 

Ku kemi biseduar rreth Mekanika nivelit më të ulët të HTTP. Dhe këto ide të reja i HTML, i cili është vetëm kjo gjuhë markup ku ju them një shfletues saktësisht çfarë duhet të bëni dhe të zbatojë vetë motorin e kërkimit tonë. Pra, në vend të vetëm duke thënë vjen së shpejti, unë jam do të prezantoj diçka që quhet një tag formë. Dhe në këtë formë, unë jam duke shkuar për kanë diçka si një fushë të dhëna. 

Dhe emri i këtij input fushë, unë jam duke shkuar për të thirrur atë Q. Dhe lloji i kësaj fushe të dhëna Unë jam duke shkuar për të thënë është vetëm "teksti". Dhe një fushë teksti, si ne do të të shihni, është vetëm një kuti teksti. Dhe kështu që nuk ka kuptim këtu që të ketë çdo gjë në brendësi të saj në këtë pikë. Dhe kështu që unë jam thjesht duke për të mbyllur tag me atë përpara çaj të drejtë në tag vetë. Dhe atëherë unë jam duke shkuar për kanë një kontribut tjetër. Lloj Input është e barabartë me të dorëzojë. Dhe atëherë unë jam duke shkuar për mbyllni këtë një shumë. 

Dhe tani unë jam duke shkuar për të shkuar mbrapa këtu. Dhe tashmë ne shohim, megjithëse mjaft e shëmtuar, unë kam mori fillimet e vet faqe mia Kërko këtu. Në fakt, më lejoni të përpiqet të pastruar këtë deri pak. Ajo rezulton se mbi të dhëna këtu, unë mund të ketë një tjetër atribut i quajtur placeholder. Dhe unë mund të shoh diçka si fjalë kyçe, apo më saktësisht, pyetje për q. 

Dhe vini re, tani, unë kam ky lloj i tekstit gri që zhduket si shpejt që unë të filloni të shkruani, por kjo është ndoshta diçka ju keni parë në faqet tjera të internetit. Unë vërtetë nuk e pëlqen butonin Submit. Kështu që unë jam vërtetë do të jap Butonin Submit një vlerë kërkim. Dhe tani, në qoftë se unë ringarkoni, konstatoj se Butoni im bëhet me emrin kërkimit. Ju e dini, unë nuk e bëj të vërtetë si logo këtu. Pra, gjenerator Google Font. 

Unë dua të erëz këtë ide edhe më tej. Kërkimi Pra CS50. Më lejoni të krijuar logon tim. Kjo duket e bukur. Kështu që tani më lejoni të shpëtuar këtë as-- vijnë më. Ku po shkon? Atje. NE RREGULL. Humbi atë. Ruaj si. Shfletues Stupid. Stand by, ne jemi duke shkuar për rregulluar këtë herë dhe për të gjithë. Atje shkojmë. Në rregull. Më vjen keq. Ditë pushimi. Tani kjo është e shokuar. Dil ekran të plotë. Në rregull. 

Tani, si një normale Personi, të ruajtur imazhin si. Logo.gif. Tani unë jam duke shkuar për të shkuar në CS50IDE dhe Unë jam duke shkuar për të rrëmbyer thjesht logon, Unë jam duke shkuar për të drag atë në burim shtatë drejtori im, skedari ekziston, unë jam në rregull me atë. Kështu që unë jam duke shkuar për të shkelur atë sepse unë tashmë kishte atë. Dhe tani si mund ta shpëtoj nga kjo? 

Le të shkojnë përpara dhe të bëjë këtu Burimi imazhit barabartë logo.gif. Mbylle këtë. Ruaj. Dhe tani, nëse unë kthehem në kërkimin tim faqe, tani është në kërkim mjaft të mirë. Të gjithë të drejtë, kështu që nuk ka mjaft bërë asgjë të dobishme. Në fakt, më lejoni të provoni të kërkoni për një mace dhe të shikoni se çfarë ndodh. Cats. Mallkuar atë. Ajo nuk ka vetëm punë, me sa duket. Pra, çfarë është pjesa kyçe që është zhdukur këtu? 

E drejtë, edhe në qoftë se ju nuk e dini ndonjë HTML, Unë kam filluar duke shënuar formularin telefonit dhe unë kam thënë se si për të marrë inputet, më jepni një kuti teksti dhe një buton të paraqesë, ajo pjesë me sa duket mungon? Supozoni se ne duam që në fakt të marrë kjo gjë duke punuar si duhet. Çfarë duhet të bëjmë? Ne kemi nevojë për të zbatuar fund mbrapa bazës së të dhënave apo search engine vetë, dhe kjo do të marrë një shumë e tërë e kohës, sinqerisht. 

Pra, mbani mend se çfarë kemi bërë për herë të fundit. Pra, nëse ju kërkoni për diçka në Google dhe keni parë fikur, Recall, kërko çastit. Pra më lejoni të kthehet që off në mënyrë që ky fakt sillet si një shfletues të vjetër shkollor, në qoftë se unë tani kërkoni për diçka si macet, kujtojnë se çfarë URL duket si. Kjo është goxha i fshehtë. Por ngulitur në atje, Recall, është kërkimi plagë. Pyetje shenjë q barabartë me macet. 

Dhe kjo do të duket për të dhënë më një bandë e tërë e rezultateve të kërkimit. Pra, ju e dini se çfarë unë jam duke shkuar për të bërë? Unë jam duke shkuar për të marrë hua Google për vetëm një minutë. Unë jam duke shkuar për të shkuar mbi këtu dhe unë jam duke shkuar për të thënë se kjo formon veprim ose destinacion, kështu që të flasin, duhet të vërtetë të jetë e Google. Dhe metoda kam kërkuar në përdorim do të jetë marrë. 

Pra, çfarë është veprim? Veprimi është quajtur në mënyrë të çuditshme, por që vetëm do të thotë i cili do të trajtojë veprimi i kësaj forme? Kur unë klikoni Kërko, ku duhet rezultati të shkojë? Dhe në qoftë se unë tani kthehem në formën time këtu dhe ringarkoni faqen time të internetit dhe tani kërkoni për diçka si qen, vini re tani Kam ri zbatuar Google. E drejtë? 

Nëse unë dua të kërkuar për diçka tjetër, ajo punon për jo vetëm qentë, ai gjithashtu punon për macet. Ai gjithashtu punon për CS50. Dhe OK, kjo është vetëm nën whelming, nuk është ajo? Të gjithë të drejtë, por në fakt ajo punon. Pra, çfarë ka qenë në fakt po ndodh? Kështu që unë kam mësuar shfletuesin tim, duke përdorur HTML, për të marrë të dhëna nga përdoruesi dhe në fakt të dërguar që input në një server në distancë duke përdorur HTTP. 

Dhe për shkak shfletuesin tim kupton HTTP, ai në fakt ndërtuar URL mënyrë që ajo që Unë deri përfundojnë gjatë në shfletuesin tim, vini re se çfarë ndodh kur kam kërkuar për qen. Nëse unë klikoni Kërko, vëreni se URL ndryshon si kam menduar të google.com/search~~V query barabartë me qen. Dhe kjo është për shkak të formës e di, sepse metoda është marrë, të thjesht append atë në atë URL atje. 

Tani, këto faqet e internetit janë ende të shëmtuar. Pra, le të prezantoj një tjetër pjesë e sintaksës në qoftë se ne mund sot. Dhe kjo është diçka e njohur si fletë Cascading Style. Pra, më lejoni të marrë një vështrim në ky shembull këtu dhe të shohim në qoftë se ne mund të konkludoj se çfarë po ndodh. Kjo është CSS0.html. Dhe kjo është ajo ku gjërat merrni pak shëmtuar. Sepse për fat të keq, në botën e internetit, HTML vetëm nuk mund të bëjë gjithçka. Dhe kështu që nëse doni të stilizoj faqen tuaj web, ju në të vërtetë duhet të përqëndrohet në estetikë në një mënyrë të ndryshme. Kështu që këtu, unë kam trupin e web tim faqe brenda e cila është një div madh. Dhe një div thjesht do të thotë ndarje. Pra, kjo është si një paragraf, por ajo nuk kanë të njëjtat semantikë e një paragraf të tekstit. 

Kjo thjesht do të thotë të shfletuesi, këtu vjen një rajon i madh drejtkëndëshe e web tim faqe, unë dua për të trajtuar atë posaçërisht. Tani, linja 21 është se ku div fillon. Dhe vetëm të marrë një guess. Cili është efekti i linjës 21 mbi Pjesa tjetër e përmbajtjes së faqes? Qendërzim atë. Kjo eshte e gjitha. Pra, ne nuk kemi parë një mënyrë për të në fakt qendërzim tekstin. 

Në fakt, motor kërkimi im, ndryshe nga aktuale Google, ishte i justifikuar mbi të gjithë në të majtë. Dhe kështu që tani, në përputhje 21, unë jam duke thënë, hej shfletuesi, të krijojë një ndarje të faqes. Vetëm më jepni një drejtkëndësh të madhe, të padukshme. Kjo është se si unë dua të mendoni për web faqe. Dhe pastaj stilizoj atë si vijon. Brenda këtyre kuotat, tani, është një gjuhë e dytë që ne kemi prezantuar sot quajtur Style Sheets Cascading. Fatmirësisht, edhe ajo nuk është e një gjuhë programimi, kështu që është shumë e kufizuar në sintaksën e saj, por gjithashtu shumë i kufizuar në funksionalitetin e saj kurse HTML është mbi të gjitha duke shënuar deri të dhënat e një faqe interneti dhe struktura e një web faqe. CSS është në përgjithësi në lidhje me milje kaluar, estetikë, marrjen madhësinë dhe ngjyrën dhe vendosja saktësisht e drejtë në një web faqe. Dhe me të vërtetë, ajo është e formuar me çifte kryesore me vlerë. 

Një pronë si kjo, teksti lidhur, e ndjekur nga një zorrë e trashë, i ndjekur nga vlerës se pronës, e cila në këtë rast është qendra. Dhe tani vini re ju mund fole këto gjëra. Në qoftë se unë të kërkuar çdo gjë në atë Unë e kam theksuar për t'u përqëndruar, kjo është arsyeja pse unë kam linjën 21 dhe linja përkatëse 31. Por mendoj tani dua të them Gjoni Harvard, të mirëpritur në faqen time në shtëpi. 

Simbol Copyright John Harvard. Dhe mendoj unë dua i pari i ato linja të jetë goxha i madh. 36 pixels. Pra, kjo është një madhësi të mirë. Dhe kam kërkuar peshën e saj të jenë të guximshëm. Por pastaj nën atë, Unë dua tekstin më të vogël. Dhe më poshtë se, unë dua Teksti edhe më të vogla. Më vjen keq. Sot ndjehet si një ditë pushimi. 

Deri tani, çfarë po bëj për të shprehur këtë? Këtu on line 22 është një ngulitur div ose div rrjetore, nëse ju do. Ajo gjithashtu ka tag stilin e vet. Unë specifikoni një madhësi font prej 36. Unë të specifikojë një peshë font të guximshme. Këtu poshtë, unë vetëm të specifikojë 24 pixels. Dhe së fundi, në përputhje 28, unë të specifikojë 12. Pra, ashtu si një kontroll të shpejtë mendje e shëndoshë dhe si një lexim të njeriut kjo, e cila fjalë në ekran janë në fakt do të jetë i guximshëm? Cilat linja janë në të vërtetë të guximshme? 

Vetëm John Harvard. E drejtë? Sepse ashtu si linja 22 thotë hey shfletuesi, këtu është një ndarje e faqes. Make it font madhësinë 36 pikë. Bëni font peshë guximshme. Sa më shpejt që ju të arritur në tag fund përkatëse ose tag mbyllur on line 24, që do të thotë, hej shfletues, ndaluar duke bërë çfarëdo qoftë ajo është që ju jeni duke bërë. Dhe njoftimi të jetë i qartë, edhe pse Linja 22 ka të gjitha këto atribute si stil, kur ju mbyllur tag në linjë 24, ju vetëm përmend emrin e tag-së. 

Ju nuk përsërisin stilin fjalë ose çdo gjë që është brenda këtyre citate. Dhe kështu që në qoftë se unë shoh në këtë tani në shfletuesin tim, le të marrin Një vështrim në rezultatin përfundimtar. Me ler te shkoj përpara të këtij file, e cila është CSS 0. Dhe kjo është ende mjaft i thjeshtë, por duke marrë goxha interesante. Por kjo rezulton se ka gjëra të tjera unë mund të bëni këtu, dhe në rrezikun e bërë kjo plotësisht shëmtuar, vini re këtu se në tim Trupi i web faqen time, Unë mund të bëjë diçka qesharake si bg apo ngjyrën e sfondit. 

Dhe të shpejtë, çfarë është ngjyra juaj e preferuar? E gjelbër kam dëgjuar. Në rregull. Deri tani, në qoftë se unë goditi ringarkoni tani, ne kemi një web faqe të gjelbër. Të gjithë të drejtë, kështu që nuk është e keqe. Dhe tani, në qoftë se unë dua të bëj këtë të vërtetë i ftohtë, unë mund të bëjë ngjyrën e tekstit tim edhe të kuqe. Pra, le të shohim se çfarë kjo duket si. Tani ajo është në kërkim të shumë e mirë. Dhe këtu poshtë, nëse jeni të vërtetë duan të luajnë me dikë ose në qoftë se ju doni të jetë një nga ata njerëz që përpiqet për mashtrim ju në duke vizituar një web faqe sepse ata kanë mashtruar Google në të menduarit ka një bandë e tërë e fjalë kyçe like-- le të shohim, reload. Ku shkoi? Dhe nuk na atë. Në rregull. Kështu që unë them këtë si një mënjanë, ne do të të flasim për këtë stuff në disa javë kur flasim për sigurisë, në qoftë se ju në fakt bunches mbjell e tërë e fjalë kyçe në një web faqe, edhe në qoftë se ata nuk janë të dukshme për një njerëzore, dikush si Google, natyrisht, ende mund të vërtetë të gjeni këtë. Të gjithë të drejtë, kështu që kjo është goxha shëmtuar shumë shpejt. 

Dhe në fakt, kjo nuk është e gjitha se shumë ndryshe nga web tim faqe si një universitare, e cila Unë fillova googling rreth për të gjetur versionet e fundit të faqet e mia të vjetra. Ajo ishte mjaft e keqe. Në fakt, unë e kam gjetur një para klasës. Por ka edhe më keq atje. Kjo me sa duket ishte im home page përsëri në vitin 1996. Me sa duket Mendova se ishte përshtatshme për të pyesni njerëz emrin e tyre para se ata mund në fakt të parë web faqen time. 

Dhe atëherë unë tregova diçka të trashë, ndoshta. Unë do të gjej më shumë për herën tjetër. Por tani për tani, le të konsiderojnë një grimë e dizajnit. Ne kemi biseduar në lidhje me stilin. Dhe kjo faqe deri tani dhe më çdo gjë që unë kam shkruar është shumë i pastër stilistikisht. Por ajo që për dizajn? E pra, nuk është një shumë e tepricë në atë që unë kam qenë duke bërë këtu. 

Unë e kam përmendur fjalën ngjyrë në disa vende. Unë e kam përmendur font size në një çift të vende dhe të guximshme në disa vende. Dhe në thelb, unë jam bashkë duke sjellë bashkë dy gjuhë. Unë kam marrë me HTML tags time dhe pushimin tim atributet dhe pastaj të gjithë një e papritur, mes thonjëza, unë kam gjuha e dytë sot quajtur CSS, e cila përsëri, është vetëm këto çiftet kyç vlerë apo këto prona të ndara nga colons. 

Ajo rezulton se shumë si në C ku ne mund të fillojnë në faktor jashtë disa kodin ne header fotografi, kështu që mund të bëjmë të njëjtën gjë në HTML. Dhe një hap drejt që është si vijon. Vini re se ky version, CSS1.html është strukturore të saktë të njëjtën faqe web. Kështu që unë kam marrë një bandë e tërë e divs, por këtë herë, unë kam gotten shpëtoj e këmishë div si ju do të shihni. 

Dhe unë kam dhënë këto tri divs të lartë, të mesëm, dhe në fund, ID unike. Kjo është e mirë, sepse nga duke i dhënë këtyre ndarjeve të faqes identifikues unik, Unë mund të referohen ato diku tjetër. Ku? E pra, më lejoni të lëvizni lart. Dhe deri më tani, në çdo kohë ne kemi shikuar në krye të një web faqe, çfarë është vetëm tag ne kemi pasur në kreu i një faqe interneti? Një louder pak. Vetëm titulli deri tani. Por kjo rezulton se ka disa gjëra të tjera ju mund të vënë në atje, një nga e cila është quajtur një tag stil. Pra, një moment më parë, ne shikuar në një atribut stil. Rezulton se ka një tag stil. Ajo i takon brenda kreu i një web faqe. Dhe tani vini re atë që unë jam duke bërë. Unë kam brenda kësaj tag stil në vijim. Unë jam fjalë për fjalë të përmendet në linjë 20 emrin e një tag që unë dua të stilizoj. 

Pastaj unë kam mbajtëse hapur kaçurrel dhe të mbyllura mbajtëse kaçurrel. Pra, të ngjashëm në frymë me C, por përsëri, kjo nuk është një funksion, kjo është vetëm një detaj sintaktik këtu. Dhe pastaj sigurisht, unë jam i thënë shfletuesi, hej shfletues, të bëjë tërë trupin e faqes kanë një shtrirjes tekst të qendrës. Dhe pastaj kjo është thënë në vijim. Hej shfletues, në qoftë se ju shihni një HTML element apo tag në faqen që ka një identifikues unik të lartë, kështu simboli hash këtu vetëm do të thotë ide unike e lartë, të shkojnë përpara dhe të bëjë madhësia e saj font 36 dhe pesha e saj font të guximshme. 

Hej shfletues, një element i të cilit ID është e mesme, e bëjnë atë 24 pixels. Dhe hej shfletues, në qoftë se ju shihni një Ideja e fund, e bëjnë atë 12 pixels. Efekti në fund është pikërisht sam. Nëse unë shkoj në CSS 1, faqe duket e njëjtë. Por ne jemi një hap drejt një dizajn pak më të mirë. Lermë të shkoj përsëri këtu në CSS2 dhe të shohim se çfarë tjetër unë kam bërë. 

Tani faqe është me të vërtetë, të vërtetë e të pastër. Në fakt, unë mund të përshtatet të gjithë përmbajtjen në një faqe këtu. Por ajo që tag re kam futur, natyrisht? Link. Dhe kjo nuk është emri më i mirë për një tag, sepse kjo nuk është një lidhje në kuptimin që ne e dimë atë, por kjo do të thotë një lidhje në një skedar tjetër. Kjo është lloj i si të mprehtë të përfshijë në C. 

Kjo është mënyra në HTML për të thënë hey shfletues, shkoni merrni përmbajtjen e fotografi quajtur css2.css. Marrëdhënia, për mua, është se kjo është një fletë stil. Dhe me të vërtetë, kjo është ajo që një nga S-së në Cascading Style Sheets anë. Kjo është një fletë stil. Është vetëm skedar teksti që përmban një bandë e tërë e pronës. Kjo është një bandë e tërë e stileve se ju dëshironi të aplikoni për një faqe. 

Dhe kështu kjo me sa duket është duke iu referuar një skedar të dytë. Dhe në qoftë se unë të hapur atë, CSS2.css, vini re se të gjitha unë kam bërë është kopjoni dhe ngjisni gjithë e kjo në këtë skedë. Dhe tani, edhe në qoftë se ju kurrë nuk kam koduar këto gjëra më parë, vetëm e konsiderojnë me proverbiale hat inxhinieri në, pse është kjo një Dizajni më i mirë ndoshta? Factoring nga ato prona CSS, vënien e tyre në dosjen e tyre. Edhe pse ne zgjidhur këtë Problemi si pesë minuta më parë në versionin e parë. 

Ne nuk kemi përmirësuar faqe stilistikisht, kjo është vetëm më e mirë Dizajni në një kuptim. Pse mendoni ju? Po. Më shumë fleksibël si? Po. Pra, nëse ju doni të shkoni mbrapa dhe për të ndryshuar gjërat, tani, ju keni një vend ku ju mund të ndryshojë gjërat. Dhe në fakt, për diçka si problem i vendosur shtatë, ku ne do të zbatojë një tregtimin e aksioneve website, që do të ketë një tërë bandë e faqeve. Dhe kjo do të jetë me të vërtetë i bezdisshëm, nëse ju vendosni, hm, Unë vërtetë nuk e pëlqen 24 pixels, unë dua ajo të jetë 28 pixels ose pak më e madhe. Dhe pastaj duhet të bëni një Global gjeni dhe të zëvendësojë ose të hapë të gjitha dosjet faqen tuaj te thjesht për të vërtetë të ndryshojë një vlerë. Duke factoring këto stile në një vend qendror, ju tani mund të hapur një file teksti në CS50IDE në çdo program, ndryshuar atë, për të shpëtuar atë, dhe bërë. Ju keni futem ato Ndryshimet kudo. Dhe kjo do të jetë e njëjtë në një skedar dot h si. Pra, çdo pyetje në këtë mënyrë tani në këtë sintaksë? Të gjithë të drejtë, kështu që ne kemi bërë gjithçka që duket përveç në fakt zbatuar hyperlinks. Dhe kështu që le të shkojnë përpara dhe të bëjë këtë. Më lejoni të shkoj përpara dhe të krijojë një skedar të ri këtu. Unë jam duke shkuar për të thirrur atë link.html, vënë në kodin e sotme. 

Dhe unë jam duke shkuar për të bërë të hapur kllapa lloj doc html. Si një mënjanë, kjo gjë më së të lartë, kjo deklaratë doc lloj, kjo është e vetmja që është e pazakontë me pikë thirrje. Ju vetëm duhet të bëjë atë atje dhe kjo do të thotë që ne jemi duke përdorur versionin e HTML 5. Versionet e vjetra të Gjuha e kishte shumë më të gjatë vargjet që ju nevojiten për të vënë atje. Kështu që këtu është një shembull i quajtur lidhje. 

Unë kam nevojë për një trupin e web faqen time këtu. Dhe këtu, një të barabartë href le të themi HTTP://www.disney.com dhe website im i preferuar, ne do të themi. Të gjithë të drejtë, kështu që një shumë padëmshëm, user friendly faqe. Nëse unë tani të shkojnë në directory time renditur këtu dhe të hapë link.html, ne kemi tekstin hiper. 

Dhe në të vërtetë, ky është vendi ku H në HTTP vjen nga. Protokolli i transferimit të HyperText ka të bëjë me transferimin tekstin që ka hyperlinks në burime të tjera. Dhe me të vërtetë, këtu është e njohur, nëse Retro, blu lidhje se nëse klikuar, në fakt do të çojë mua të Disney.com. Tani, oh, që vjen jashtë shpejt. Të gjithë të drejtë, kështu që tani, cilat janë disa nga implikimet e kësaj? 

Dhe sinqerisht, bota fillon për të marrë një pak më të njohur dhe gjithashtu një frikshme pak por edhe pak më shumë vetë mbrojtshëm sapo ju të filloni për të kuptuar këto gjëra. Sepse shanset janë, disa prej jush, në qoftë se ju shkoni nëpër dosjen tuaj Gmail spam apo edhe kutinë tuaj, ndoshta ju keni marrë disa lloj mail që është kërkuar që të ndryshojë tuaj Fjalëkalimi ndoshta ose ndoshta verifikuar kredencialet PayPal tuaj ose gjësend. 

Dhe në fakt, ju mund të keni marrë diçka që thotë se si klikoni këtu për të rivendosur PayPal fjalëkalimin tuaj. Dhe tani, vini re, në qoftë se kjo nuk është Disney.com por si badplace.com dhe ringarkoni, vini re se teksti këtu mund të them asgjë whatsoever. Dhe në fakt, kjo është vetëm fjalë. Pse nuk mundem të të jetë në fakt super me qëllim të keq dhe thonë http://www.paypal.com. 

Kliko këtu rivendosur PayPal tuaj fjalekalimin dhe tani reload. Kjo duket goxha e ligjshme, e drejtë? Unë do të thotë, unë nuk do të klikoni mbi një email që vetëm thotë kjo. Por vini re dikotominë këtu. Ajo thotë se www.paypal.com, dhe në fakt, prit një minutë, ne e dimë se ju doni s për sigurinë. Deri tani, të shkojnë në www.paypal.com HTTPS, por në qoftë se ju nuk keni bërë këtë më parë, do të marrë në zakonin e fluturonte mbi lidhjet pak këtu. Dhe është e vështirë për të parë në ekran atje, dhe kjo nuk është e gjitha që lehtë këtu. Por shumë më poshtë këtu në qoshe vogël pak bën shfletuesi fakt po ju them se ne jemi duke shkuar të badplace.com në vend të PayPal.com. Tani, ku po shkojmë me këtë? Të gjithë shembujt që kemi bërë sot, ne kemi koduar vështirë dhe të shtypur jashtë me dorë. Web është tepër jointeresant kur ju i vështirë kodin faqet tuaja web me qëllim që përmbajtja është statike dhe nuk ndryshon. Natyrisht, të gjithë e tona faqet e internetit të preferuar sot, nëse kjo është Gmail ose Twitter, ose Facebook apo ndonjë numër të tjerëve janë dinamike. Ata janë duke ndryshuar në përgjigje të dhëna përdoruesi ashtu si rezultatet e kërkimit Google. 

Dhe kështu të mërkurën, atë që ne bëjmë është kemi lënë HTML dhe futjen CSS prapa nesh dhe ne marrim për të dhënë se ne tani e dinë atë dhe ne kemi prezantuar një gjuhë të re programimi quajtur PHP, e cila si C, do të na japë pushteti që në fakt të krijuar programe që vetë të gjenerojë dalje. Në këtë rast, ne do të jetë duke përdorur PHP për të gjeneruar dinamike web faqet duke përdorur këtë gjuhë të re. Pra, më shumë se të mërkurën. Shihemi pastaj. 

[Muzika]