[Music kucheza] 

DAVID J Malan: Hii ni CS50 na huu ni mwanzo wa wiki 7. Hivyo kuwakaribisha nyuma. Na unaweza kukumbuka kuwa katika tatizo kuweka nne, kulikuwa na kidogo ya kumsaka mnyama mla mzoga kwa baadhi ya zawadi fabulous ambapo baada ya kupona picha za wafanyakazi wote hapa na katika New Haven, ungekuwa changamoto ya kupata kama wengi wa wale wanasayansi wa kompyuta kama unaweza. Na sisi tumepewa yote rundo la maoni. Walidhani Ningependa kushiriki chache na wewe hapa leo. 

Na tutaweza baada yote haya online. Lakini hasa, nilitaka kuteka mawazo yako to-- vizuri moja, Sam alikuwa katika wachache kabisa wao ujumla kuuliza kama hii. Lakini inaonekana kwamba kama ya asubuhi hii, mshindi ilikuwa mtu mmoja jina lake Ken kwa 24 ya wafanyakazi alitekwa kwenye kamera au chache zaidi wakati kuchukua katika akaunti ya wafanyakazi mbalimbali katika picha. Picha hapa ni Ken ujao Maria katika New Haven. 

Sasa, Ken, ingawa, anarudi nje kidogo ya kesi kona hiyo bado kilichotokea kabla. Ni zinageuka kuwa hakuwa na kutokea kwangu kuweka magazeti faini katika tatizo kuweka nne ambazo anasema kwamba wafanyakazi ni wasiostahili kwa ajili ya zawadi fabulous kwa sababu Ken ni, bila shaka, moja ya wapiga picha juu ya wafanyakazi wetu. Sasa, kwa kuwa alisema, yeye awali aliandika kwangu kusema tafadhali wala post picha hizi online. Nadhani katika sehemu kubwa kwa sababu wengi wa picha kuwa mpiga picha hii alichukua kuangalia kitu kidogo kama hii. Na kama. 

Lakini Ken ungependa mimi kuwahakikishia wewe kwamba yeye ni mpiga picha nzuri sana, yeye ni mtaalamu, yeye anachukua picha ambayo si blurry, kwamba ni bora katika lengo, na yeye alichukua wachache kabisa wa wafanyakazi wetu wenyewe. Lakini badala ya kukiri tu Ken, nini sisi mawazo tunatarajia kufanya ni kwenda kupitia orodha ya wanafunzi halisi ambao kuwasilishwa. Na zinageuka kuwa Lance kwa Picha 15 kama ya leo asubuhi alikuwa mshindi wetu. 

Na pichani hapa ni Lance na Colton, na Skaz, na nafsi yangu, na Sam. Lakini basi zinageuka kuwa kama ya 11:46, hivyo kidogo tu iliyopita, Mimi kurudi email yangu na kukuta kwamba tulikuwa bado na mtu mmoja zaidi ya kuwasilisha na mwanafunzi mmoja aitwaye Bonnie ambao email alisema tu hii. Si kwenda uongo, mimi nina kufanya hivyo wakati wa darasa. Na kisha aliendelea na ambatisha tu 14 picha, moja aibu ya Lance ya 15. 

Lakini katika Bonnie ya picha, ni zamu nje walikuwa wanachama nyingi wafanyakazi, Sam kati yao, hivyo nini sisi mawazo atafanya ni kukiri wote wawili wa haya. Hivyo kwa kuongeza kupata Dropbox nafasi hiyo kila mtu ambaye alishiriki inapata, sehemu hizi mbili mapenzi pia kupokea nzuri anasaidiwa chakula cha mchana kwa ajili yao na sehemu zao mates wiki hii ijayo. Na hivyo mtasikia kutoka kwetu, Lance na Bonnie, juu ya hilo. Congrats kubwa sana kwao. Sasa, wale ambao ungekuwa kama chakula cha mchana kwa ujumla zaidi tunajua kwamba chakula cha mchana CS50 katika Cambridge na New Haven ni Ijumaa hii. Kwenda CS50 tovuti kufyeka RSVP. Na sasa neno juu ya semina. Curricularly zaidi. Hivyo sisi ni inakaribia hatua ya muhula ambapo unapaswa kuanza kufikiri juu ya miradi ya mwisho. Na kwa kweli, katika kidogo tu, mapenzi kinachojulikana mapendekezo ya awali kuwa kutokana. Mapendekezo hivyo kabla ni maana ya athari itakuwa pretty chini na kwa kweli tu nafasi kwa kutunga kumbuka short mafundisho wenzako ndio mnamfundisha kwake kile unachokifikiria wewe kutaka kufanya kwa ajili ya mradi wako wa mwisho. 

Sasa, wanafunzi wengi kuishia kufanya mtandao msingi miradi ya mwisho. Na bila shaka, tuko tu wiki sasa mwisho katika hii na zaidi ya mbizi katika programu ya mtandao. Hivyo si kuwa na wasiwasi kama wewe kuwa na kabisa hakuna wazo jinsi ungependa kujenga mawazo ambayo unaweza kuwa katika akili yako. Hii ni kweli tu kazi na kulazimisha kupata wewe kufikiri na kuzungumza na TF yako kuhusu hilo. Lakini kwa kukusaidia kwa hilo, na na miradi ya mwisho hatimaye, tunajua kwamba CS50 ina desturi ya sadaka semina. 

Na hawa ni hiari, mikono juu ya, au hotuba kulingana na fursa kujifunza zaidi kuhusu mada ambazo ni ancillary kidogo kozi ya mtaala, lakini hata hivyo ajabu nyenzo ya kuendesha miradi ya mwisho. Na hivyo hii ni orodha hiyo ni CS50 wafanyakazi hapa katika New Haven wamekuja na kwa mwaka huu kuhusu iOS programu, Android programu, mchezo maendeleo, na mashada ya zana zaidi na lugha na mbinu. 

Hivyo kuweka jicho kwenye tovuti CS50. Na wakati huo huo, kama Ningependa kwa kujiandikisha maslahi yako katika kimojawapo cha vitu hivi, kwenda CS50 kufyeka kujiandikisha. Na ndipo tutakuwa kufuatilia kama kwa siku na nyakati ndege na maeneo na everything-- zaidi kila kitu mapenzi kuwa streamed na pia inapatikana kwenye mahitaji baada ya kama huwezi kweli kufanya hivyo. Hivyo bila wasiwasi zaidi, sisi wakaacha mara ya mwisho kwa GET. 

Na hii ilikuwa kama ujumbe kwamba alikuwa ndani ya bahasha virtual, kukumbuka, kwamba sisi kupita kutoka ruta na router kwa ruta kati ya kivinjari na mtandao server. Na ujumbe kwamba inaonekana kitu kidogo kama hii. Hii ilikuwa ni ujumbe zaidi arcane kwamba ilikuwa kwa kweli ni ndani ya bahasha Imeandikwa katika kipande cha karatasi ambaye mstari wa kwanza anasema halisi, kupata kufyeka. 

Na kama vile sanity hundi, nini kufyeka kuashiria? Je kufyeka maana wakati kuomba tovuti? Wewe ombi hilo wakati wote. Wengi wakati wowote wewe kutembelea tovuti, wewe si kweli aina katika jina la faili. Pengine tu kwenda Facebook.com, kuingia, gmail.com, au kama. Na nini kufyeka kuwakilisha? Nini faili? Au kile ukurasa, hasa? 

Ripoti, yeah. Hivyo ukurasa default. Hivyo kama huna bayana faili jina kama tutaweza kuanza kuona, wewe ni kweli kuomba tu nipe chaguo-msingi ukurasa wa Facebook au nipe Inbox yangu au kutoa mimi chaguo-msingi ukurasa wa habari kwenye tovuti ya CNN au kama. Na server kisha anajibu kwamba ujumbe na kitu kama hii, akisema ndiyo, mimi kusema HTTP toleo 1.1. 

200, ambayo ni hali ya kificho kwamba sisi binadamu mara chache milele kuona kwa sababu ni nzuri. Kwa sababu ina maana sawa, ombi alipokelewa na kubebwa vizuri. Na aina ya maudhui inaonekana katika kukabiliana ni mara nyingi kabisa, lakini si mara zote, maandishi. Na hasa, HTML. Na hiyo ni kweli ambapo sisi kuangalia leo. 

Hivyo kwa kweli, mimi nina kwenda mbele na kufungua browser. Mimi nina kwenda kutumia Chrome, unaweza kutumia zaidi browser yoyote katika wiki ijayo. Sisi ujumla kupendekeza Chrome kwa sababu ni hasa nzuri kwa watengenezaji programu. Ni got mengi ya kujengwa katika zana kwamba kufanya hivyo ni rahisi kuendeleza si tu HTML na CSS, mambo tutaweza kuanza kuzungumza juu ya leo, lakini pia lugha nyingine kama vile. 

Na mimi nina kwenda mbele na kwenda to-- Mimi nina kwenda Kudhibiti click au kulia click popote kwenye mtandao. Na mimi nina kwenda kwa Kukagua kipengele. Na mimi nina kwenda tweak yangu screen kidogo tu hapa. Hebu hoja hii hadi chini. Hivyo hii ni kile kinachoitwa Chrome ya Inspekta. Hivyo hii ni kama debugging chombo kujengwa katika Chrome. 

Wote wa tayari una hii kama tumekuwa kutumia Chrome. Na utapata kuona nini kinaendelea chini ya Hood ya baadhi ukurasa wa mtandao. Basi hebu kweli kuchukua kuangalia hii kama ifuatavyo. Ni ina sifa njia zaidi na sisi huduma ya juu leo. Lakini kuna tabo hizi zaidi ya hapa. Vipengele, mtandao, vyanzo, kalenda ya matukio, na baadhi ya mambo mengine. Mimi nina kwenda click kwenye Mtandao kwa sasa. 

Na ni kidogo mno katika mtazamo wa kwanza hapa. Lakini nini mimi kwenda kufanya ni basi mimi kurahisisha hilo kidogo. Mimi nina kwenda kurejea kwenye kurekodi mwanga ili ni nyekundu. Na mimi nina kwenda kusema kuhifadhi gogo. Na hii ni kidogo tu Jambo I figured nje baada ya muda ambayo inaenda kuokoa kila kitu kinachotokea katika browser. Na sasa mimi nina kwenda kwa http://facebook.com. 

Kwa kweli, hebu kufanya www kwa hatua nzuri, kufyeka. Kuingia. Hivyo URL kwamba wengi wa unaweza kuwa alitembelea. Na sasa Facebook ya mtandao ukurasa anakuja juu kwa juu. Na kisha kundi zima la mambo akaruka na chini. Na kwa kweli, zinageuka kuwa wakati wa ziara Facebook.com, wewe si tu kufanya ombi moja HTTP, zinageuka kuwa kwenda Facebook.com inapeleka 41 ya bahasha hizo, kila mmoja kwa kupata wake ombi wenyewe, kama ilivyoainishwa, angalau nyuma ya screen hapa, chini ya screen, inaonyesha kuwa, kwa hakika, yangu kisakuzi alifanya 41 maombi. 

Na katika jumla, ni kuhamishiwa 861 kilobytes na ilichukua kwa sababu fulani sekunde kama nane kwa kushusha yote hayo. Hivyo hiyo ni kweli weird kidogo kwamba tovuti ya Facebook itachukua kwamba muda mrefu, lakini na iwe hivyo katika kesi hii. Sasa, haya yote mimi si kweli huduma kuhusu isipokuwa kwa ombi topmost. Basi hebu kwenda kwa hii moja hapa hapa na napenda kuvuta nje kwa muda tu. 

Na napenda kuvuta hii. Hivyo kile nimepata kufanyika katika kushoto ingawa kuna mengi kinachoendelea juu hapa ni Nimekuwa yalionyesha Facebook.com na kisha taarifa kwamba mimi nina scrolling chini, scrolling chini, scrolling chini, kuomba vichwa. Na utaona kwamba Chrome ni kuonyesha mimi kimsingi yaliyomo ndani ya ombi nilifanya. Siyo formatting katika sawa kabisa njia, lakini taarifa kuna kutaja ya kupata, taarifa kuna kutaja ya jeshi, Facebook.com, njia, au kufyeka, ambayo ni faili mimi ombi. 

Na kisha kama mimi kitabu kuunga, tutaweza kweli kuona kwamba kile Picha akarudi kwangu ni wote wa vichwa hizi. Hivyo ndani ya kwamba bahasha virtual Hakika mengi ya thamani jozi ufunguo. Neno, matumbo, na kisha thamani. Neno, matumbo, na thamani. Hizi ni wito vichwa. Na kuna undani njia zaidi hapa kuliko sisi kweli huduma kuhusu hivi sasa. 

Lakini hii ni ya pili kwa mwisho moja chini ya hapo, taarifa kwamba kompyuta Facebook.com wa, Hakika alisema hiyo inakuja baadhi HTML asilia. Hivyo yote haya ni kusema kwamba wakati ombi mtandao ukurasa kutoka browser kwa server, kwamba server anajibu na bahasha yake mwenyewe ndani ya ambayo ni ya maandishi. Kwa maneno mengine, HTML. HyperText ghafi lugha. Ambayo ni lugha nyingine kwamba sisi kuanzisha leo kwamba binadamu au kompyuta kuzalisha ili kutekeleza kurasa za mtandao. 

Hasa, hebu tuangalie hii. Mimi nina kwenda sasa kurudi nyuma na tovuti ya Facebook. Na mimi nina kwenda tu kudhibiti click au click haki na bonyeza View Kwanza Chanzo. Na hata kama huna matumizi Chrome, IE unaweza kufanya hivyo, Firefox unaweza kufanya hivyo, Safari anaweza kufanya hivyo, hata kama orodha chaguzi ili kuangalia tofauti kidogo. Na hii ni HTML kwamba Mark na kampuni katika Facebook wameandika. 

Na kwa pamoja, lugha hii hapa kutekeleza bluu na nyeupe ukurasa kuwa tuliona wakati iliyopita. Sasa, hii ni kidogo mno. Lakini kama sisi kuangalia juu juu kushoto, tuko kwenda kuanza kuona baadhi mwelekeo. Inaonekana kama kuna mengi wa haya wazi pembe mabano na kisha kuna HTML hii Keyword. Hapa ni mwingine wazi pembe mabano na kichwa. 

Hapa ni, kama sisi kitabu chini na chini na chini, mimi nina kwenda mbele na kujaribu kutafuta kitu fulani. Kuna njia zaidi ya juu ya haki hapa ni wazi mabano mwili. Na kukumbuka kutoka mwisho Wakati huo sisi mapendekezo kuwa rahisi mtandao ukurasa kwamba binadamu anaweza kuandika ili kuangalia kitu kidogo kama hii. Open HTML tag, wazi kichwa tag, wazi cheo tag, kisha kufungwa cheo, kufungwa kichwa, wazi tag mwili, baadhi ya maandishi, imefungwa mwili, kufungwa HTML. 

Lakini kunyamaza hapa kwa muda tu. Kanuni hii, hata kama wameweza kamwe kuandikwa yake kabla lakini bado hawana kabisa kuelewa nini kinaendelea, inaonekana nzuri sana. Haki, ni safi sana. Ni sana stylistically nzuri. Mengi ya indentation na nafasi nyeupe. Picha ya si. Hivyo ni kwa nini Picha sana mbaya zaidi kuliko mimi katika kuandika HTML? Inavyoonekana. 

Haki, hii ni kama moja kati ya watano kwa mtindo. Kuna sababu ya kulazimisha kwa wao kukata pembe hizo. Haki wote, hivyo hawana unataka iwe rahisi kwa wewe kuisoma. Hivyo katika baadhi ya hisia, wao uko obfuscating hayo, aina ya scrambling ni angalau aesthetically hivyo kwamba ni vigumu kwa Myspace kwenda na mpasuko mbali yao Mzee na HTML kwa ajili yake. Ni zinageuka kuwa na mipango ingawa, ikiwa ni pamoja na Chrome, tunaweza safi hii up super urahisi. Hivyo ni kabisa si kwamba kama sababu. Nini kingine inaweza kuwa ni sababu. Naam. Naam, gharama nyeupe nafasi data. Ni nini maana? Yeah, kwa uhakika. Kama hit muhimu Tab mengi au nafasi bar, kufikiria matokeo. Hivyo kila muhimu kwenye keyboard yako ni [Inaudible] kuwakilishwa kama Byte moja. 

Hivyo kudhani kuwa Mark au yoyote ya devs siku hizi hits spacebar mara moja tu katika ukurasa huu HTML kwamba inawakilisha Mzee Facebook. Na kuungana ana mengi ya watumiaji siku hizi. Hivyo kudhani kuwa Mzee Facebook ni alitembelea na watu bilioni leo. Na mtu katika Facebook ina hit nafasi bar mara moja tu. 

Hivyo Byte moja ya ziada, bilioni maombi, kiasi gani data zaidi ni Facebook kuhamisha juu ya mtandao kwa sababu mtu kugonga spacebar kwenye keyboard yake? Bilioni ka, au gigabyte moja ya data ni kuwa ametumwa kutoka watumishi Picha kwa watu walio karibu dunia bila sababu nzuri. Sasa, hiyo ni nafasi moja tu. 

Hebu fikiria kama sisi kweli safi hii Jambo up na indented yake na aliongeza mengi ya nafasi nyeupe na tabo wahusika na mazingira, kuishia matumizi gigabytes, kama si terra ka zaidi ya nafasi. Na hivyo super kawaida katika dunia halisi ya maendeleo ya mtandao ni kwa minify kanuni yako. Na tutaweza hatimaye kuona jinsi unavyoweza kufanya hivyo. 

Lakini leo hii, tutaweza kuanza kuandika code hiyo ni kweli someka na binadamu yetu. Zinageuka, ingawa, kama wewe kurudi nyuma kwa chombo hiki katika Chrome Kukagua kipengele, hapo awali, tulikuwa juu ya tab Network. Ni zinageuka kuwa kama wewe kwenda mambo tabo, nini kweli kuona ni Chrome pretty kuchapishwa toleo la HTML hiyo. Hivyo tumekuwa deobfuscated yake. Hivyo ni hakuna mechi kwa kompyuta. Na sasa unaweza kweli bonyeza kuzunguka na kuanza kuona uongozi kwamba ni ukurasa wa mtandao. Basi hebu kweli kufanya hivyo. Mimi nina kwenda mbele na kufungua juu ya Mac yangu mpango ujulikanao maandishi hariri. Na kukumbuka kwamba hii ni super rahisi Nakala mpango. Madirisha ina notepad.exe. Na mimi nina kwenda kwa verbatim aina zifuatazo. Aina Doc HTML, wazi bracket HTML, imefungwa mabano HTML, tuna mkuu wa ukurasa hapa, Mwishoni mwa mkuu wa ukurasa hapa, cheo itakuwa kama, hello dunia. 

Na kisha chini hapa, tunahitaji mwili wa ukurasa wa mtandao. C. mwili. Na kisha katika hapa, hello dunia. Sawa. Hivyo tumekuwa imeandikwa mtandao super haraka ukurasa. Mimi nina kwenda kuokoa ni kama hello.html kwenye eneo kazi yangu. My Mac ya kwenda kulalamika, kufikiri kuwa, kusubiri dakika, hii ni faili maandishi, kufanya unataka simu yake txt? Lakini hakuna, mimi nataka kutumia nukta HTML. 

Na kisha nini ni nzuri kama mimi tu bonyeza mara mbili faili hili, hello.html, hapa ni mtandao ukurasa wangu. Kwa bahati mbaya, mimi ni mtu pekee katika dunia ambao wanaweza kutembelea ukurasa huu hivi sasa. Kwa sababu ambapo gani kuishi inaonekana? Ni juu ya Mac yangu, sawa? Ambayo ni bure. Kama hakuna mtu katika chumba hiki achilia mbali kwenye mtandao kweli anaweza kutembelea ukurasa huo. Hivyo leo, tunahitaji kuanzisha kipengele kingine. 

Na kwa kufanya hivyo, mimi nina kwenda kwa kwenda mbele na kufungua wingu 9. Hivyo wingu 9 ni ya kweli a wingu msingi service-- CS50 IDE-- Hiyo ina wote wa workspaces wetu mbio mahali fulani kwenye mtandao. Na hiyo ina maana kwamba wote wa mafaili yetu ni hadharani kupatikana tayari. Basi hebu kwenda mbele na kufanya hili. Mimi nina kwenda kwenda mbele na kujenga mpya faili NCS50IDE. Mimi nina kwenda kuokoa ni kama kabla kama hello.html na bonyeza kuokoa. Na sasa tu ili kuokoa muda, mimi nina kwenda kwenda mbele na nakala kuweka kanuni hii badala ya retype yake. Na kuiokoa. Na hivyo sasa nina faili inayoitwa hello.html. Lakini ni jinsi gani mimi kwa kweli kufungua ukurasa wa mtandao kama? Naam, ni zamu nje kujengwa katika CS50 IDE si tu compiler kama Clang na HatiJava kama GDB na mashada ya programu nyingine, kuna kweli fledged kamili mtandao wa kompyuta kukimbia ndani ya CS50 IDE. 

Nyote, hii ni kusema, wenyewe mtandao wa kompyuta yako. Na mtandao wa kompyuta ni tu kipande ya programu ambao lengo katika maisha ni kuwatumikia up kurasa za mtandao. Kuwasikiliza kwa maombi kutoka browsers na kujibu kwa bahasha kidogo virtual ndani ya ambayo ni maudhui ambayo nimekuwa imeandikwa. Hivyo server mtandao huu ni kweli huru na ya chanzo. Ambapo wazi chanzo tu ina maana programu kwamba mtu mwingine ana imeandikwa kwamba sisi sote Unaweza kweli kuona na kushusha na hata kubadilisha kanuni chanzo. Na ni kuitwa Apache. 

Na tumekuwa alifanya hivyo rahisi kidogo kutumia katika CS50IDE na kuiita Apache 50. Ili iweze kweli kuelewa yafuatayo. Mimi nina kwenda kusema Apache 50 mwanzo. Na kisha mimi nina kwenda tu kusema nukta. Na tunaona baadhi kiasi fulani arcane ujumbe kusema kuweka Apache ya hati [? Kundi?] nyumbani, ubuntu, chochote yaani, kufyeka workspace. Kuanzia mtandao wa kompyuta Apache 2 kwa mafanikio. 

Hivyo hadithi muda mfupi, mimi tu kusukuma kifungo na akageuka kwenye mtandao kompyuta ambaye ni sasa kusikiliza kwenye mtandao juu ya bandari TCP 80 katika anuani maalum. Na inasema hapa, na hii itabadilika Kulingana juu ya jina lako na mambo mengine, lakini taarifa sasa kama mimi bonyeza huu, IDE50 nukta jharvard na hivyo na hivyo, taarifa kwamba muda wote huu kwa kadhaa iliyopita wiki, unaweza kuwa na niliona kuwa jina lako mwenyewe ni iliyoingia katika mkono wa kulia juu kona ya CS50IDE. 

Na kwamba kweli imekuwa haya yote kuweka wakati anuani saa ambayo unaweza kutembelea wote wa files yako kupitia mtandao. Hadi sasa, bado cha muhimu, kwa sababu katika C, wewe kwa ujumla wanataka mambo mbio katika wastaafu, si kwenye mtandao. Lakini leo hii, tunaanza kuandika mtandao msingi kificho kwamba hatuna wanataka kupatikana katika URLs umma. Kwa hiyo kile nitakacho kufanya ni bonyeza URL hii. 

Na taarifa kwamba naona haki mbaya ripoti, orodha directory, lakini kile faili anaruka nje saa wewe pengine? Hello.html. Hii ni kwa sababu mimi kuokolewa file katika workspace yangu. Na nini nimekuwa aliiambia Apache mtandao wa kompyuta ni kuangalia katika orodha ya Daudi workspace. Na mtu yeyote katika dunia kuona files wale. 

Na hakika, kama mimi sasa click kwenye hello.html, Mimi naona ndani ya tab hii hasa faili hilo. Sasa angalia, wingu 9 ya matendo kitu kidogo manufaa kwa sisi. Ndani ya CS50 IDE, kuna taarifa ghafla bar mahali. Hii ni kwa sababu hata kama tuko kutumia Chrome kutembelea CS50IDE, ndani ya CS50IDE ni yake mwenyewe toleo la kivinjari hivi sasa. Na hivyo badala ya mambo magumu kama vile, Mimi kwenda mbele na nakala tu URL hii. Mimi kwenda mbele na tu kufungua Chrome yangu mwenyewe dirisha. Hivyo hakuna uchawi hapa, hakuna CS50IDE. Mimi tu kwenda literally kuweka J wangu Harvard URL na hit Enter. Na voila, sasa mimi, na katika nadharia, kila mtu kwenye mtandao, ikiwa nimepata kimeundwa ruhusa ipasavyo, Unaweza kutembelea faili hii. Na hivyo sasa, kama nilivyosema hello.html, voilà, kuna ni incredibly aghali mtandao ukurasa wangu. Basi hebu kufanya haraka sanity hundi. Kwa sababu yote hayo ni dhana seti up. Na tumekuwa kweli si kweli kufundishwa jinsi ya kuandika HTML per se. Maswali yoyote hivi sasa juu ya nini ilitokea tu? Ndiyo. Je, CS50 kumiliki kurasa hizi mtandao? Ni katika maana gani? Nzuri swali. Hivyo CS50 anamiliki CS50.io. Tumekuwa kweli kununuliwa kwamba jina la uwanja. Na kwa asili ya nyie magogo katika CS50IDE, wewe wote kupata kile kinachoitwa subdomain. 

Hivyo IDE50-Malan, au IDE50-Rob.CS50.io, hiyo ni anwani yako ya kipekee ndani ya uwanja wetu jina. Hivyo kwa madhumuni bila shaka, una kipekee anwani yako mwenyewe. Lakini tumekuwa rahisi mambo na kununua ngazi ya juu ya uwanja, CS50 nukta I / O na kisha kila mtu mwingine ni ndani ya kwamba, hivyo kusema. Na tutaweza kuja nyuma na kwamba katika wiki kadhaa pengine, hasa katika mradi fainali muda, wakati baadhi yenu kutaka kupata majina yako mwenyewe domain. Ni kweli kiasi moja kwa moja. Sawa. Basi hebu sasa kufanya hivyo. Mimi nina kwenda nyuma katika CS50IDE, ambapo faili yangu sasa hivi, hello.html, si yote ya kuvutia. Ningependa kufanya kitu kidogo nicer kuliko hiyo. Hivyo nina kwenda kufanya kitu kama hiki. Napenda paragraphs.html wazi. Hivyo hii ni faili niliandika mapema. Juu ya jambo hilo, kama daima, tuna maoni. Lakini katika HTML, maoni kuangalia tofauti kidogo. On line tatu na mstari 14, wewe ona syntax kwa kuanza maoni na kuishia maoni. 

Lakini hakuna mambo katika kati ya mambo functionally. Ni tu kumbuka kwa binadamu nini kinaendelea hapa. Na kama vile sanity haraka kuangalia, kama mimi kitabu chini, nini dhahiri mpya tag kwamba tumekuwa ilianzisha? Vitambulisho hivi sasa tumeona ni wazi mabano HTML, kichwa, cheo, na mwili. Lakini nini ni wazi mpya sasa? 

Yeah, hivyo uk. P tag au aya tag. Na kisha mimi tu alikopa baadhi chaguo-msingi Nakala Amerika ya kuunda aya yangu. Kwa sababu nini nilitaka kuonyesha ni jinsi waweza kuwakilisha aya ya maandishi katika HTML. Na hivyo kile mapya ya kutokea hapa ni kwamba kuna tayari mfano zinazoendelea. Na napenda kwenda mbele na kufanya hili. Hebu kwanza kuzima Apache. Na mimi nina kwenda kupeleka habari kuanza yenyewe tena ndani ya chanzo leo saba m directory. Ili niweze kupata kila kitu. 

Na sasa, kama mimi kurejea hii orodha directory, taarifa ninaona kila faili kuanzia leo. Na utaona katika Tatizo ijayo kuweka, tutaweza kutoa maelekezo wewe kwa kufanya hasa hili. Kama mimi kufungua paragraphs.html, hii nguvu pamoja na kuangalia kama lugha ya programu na wewe kama huna kusema au kusoma Kilatini. Lakini hii ni aya tatu tu ya maandishi kwamba ni alama juu katika HTML. 

Na taarifa aya mapumziko kati yao. Kwa sababu ni zamu nje, na hata kama wewe inaweza kuwa kutega kufanya hivyo, ambapo katika ulimwengu wa kweli, kama unataka kuweka mstari mapumziko kati ya mambo, waweza kabisa tu kufanya hivyo na kugonga Hifadhi. Na sasa, kama mimi upya hapa, taarifa kwamba kila kitu tu blurs pamoja katika Blob moja tu ya maandishi. Kwa sababu HTML ni aina ya lugha bubu. 

Ni ni maana ya kutumika katika hayo njia kwamba browser mapenzi tu kufanya wazi nini kuwaambia ni kufanya. Hivyo kama huna kuwaambia ni nipe aya mpya, wewe si kwenda kuona aya mpya. Na kwa kweli, ni nini kisakuzi kwenda kufanya ni hata kama wewe hit Enter, hebu sema tena na tena na tena, kusonga njia hii maandishi chini ya screen na kisha kuokoa na kisha upya, browser ni kwenda kuanguka wote wa nafasi hiyo nyeupe ndani ya moja tu, inayoonekana whitespace. Sawa. Hivyo hiyo ni aya tag. Na hivyo nini mfano hiyo ni kuendeleza hapa? Naam, inaonekana kuwa kesi hiyo HTML ni wote kuhusu kuanzia tag na kumalizia tag. Na ni nini tag? Naam, ni tu chunk ya syntax. Open mabano, keyword, kufungwa mabano, ni tag. Au kuanza tag. Na kisha wakati uko amefanya kuonyesha mwenyewe, kama katika wewe ni kosa na aya, kufanya hivyo kusema kinyume. Lakini kinyume sio kabisa nyuma. 

Wewe tu kiambishi huo tag ya jina na kufyeka mbele kama hii. Sawa. Hivyo si wote kwamba kusisimua. Na kwa kweli, sisi siyo kufanya mtandao yote ya kuvutia zaidi. Nini kama nataka kufanya mambo makubwa na ujasiri? Hivyo zinageuka kuwa hapa ni mfano katika headings.html, ambapo katika mwili wangu, Mimi nimepata H1 tag, H 2, H 3, nne, tano, au sita, ambayo yote kuonekana pretty arcane. Lakini kama mimi kwenda kufungua hili mfano, hebu tuangalie. Headings.html. 

Hivyo browsers na msingi anaweza kukupa maandishi hiyo ni kubwa na ujasiri wa ukubwa tofauti. H1 ni kubwa. H6 ni ndogo na kisha kila kitu kingine katika kati ya. Hivyo hiyo ni ya kuvutia lakini bado si kweli mtandao Najua. Nini kama tunataka nina kitu kama orodha. . Hivyo hapa ni orodha Vitone ya tatu ya nyumba Harvard. 

Jinsi gani kwenda juu ya kufanya hii? Naam, tuangalie list.html. Na hapa, tunaona kidogo ya funkiness lakini hebu fikiria nini kinatokea. Hivyo kulingana na nini umefanya tu kuonekana, Ul anasimama kwa orodha unordered. Orodha unordered tu ina maana Vitone. Hakuna idadi. Kuna pia kitu kinachoitwa kuamuru orodha, ambayo ni OL katika tag. Kisha li, orodha ya bidhaa ni wote maana yake. 

Na hivyo moja kwa moja idadi ya kila kitu kwa ajili yenu. Lakini tena, wote wa indentation yangu na nafasi nyeupe ni tu kwa ajili yangu. Kisakuzi siyo kweli kwenda huduma. Hivyo hata kama wewe hakuweza kufanya hivyo, tu kuwa wazi, unapaswa ingawa kisakuzi mapenzi bado kuwa na uwezo wa kuelewa nzuri tu. Mimi kupiga Reload katika wangu browser, mimi nina kubonyeza Reload na hakuna mabadiliko kinachotokea kwa sababu kisakuzi bado kufanya nini hasa mimi kuwaambia ni kufanya. 

Sawa. Hivyo hii yote ni maandishi tu. Sasa hebu kufanya kitu zaidi ya kuvutia. Mimi nina kwenda kwenda mbele na kukopa baadhi ya HTML huu. Mimi nina kwenda kwenda mbele na kuunda faili mpya hapa. Na tutaweza wito rick.html hii. Tuna allra kutumika kitu aitwaye Rick roll katika hili tabaka la mwaka huu, mimi sijui, ilitokea tu hai. 

Na sasa ni got nje ya kudhibiti. Hivyo mimi nina kwenda tu kwenda nayo. Na nikienda na Google Picha na Rick Astley. Kama hawajui nini cha kufanya hii, tu kusoma juu ya Wikipedia. Kila wakati umefanya clicked juu ya kiungo, mtu imekuwa akicheka mahali fulani. Na napenda kwenda huko ahead-- sisi kwenda, hebu kuona picha hii. 

Hivyo hapa tuna picha katika Google Picha. Na hebu kudhani kwamba hii ni sababu kila mahali kwenye mtandao. Hivyo nina kwenda kwa kudhani ni sawa kwa ajili yangu kwa kweli kuweka hii katika mtandao ukurasa wangu. Mimi kwenda mbele na nakala URL ya picha. Na sasa kama mimi kurejea wingu 9, hebu angalia nini siwezi kufanya hapa. Hivyo hapa ni tu ukurasa wa mtandao. Hii ni Rick Astley, haha, Mimi nina kwenda sasa kurudi nyuma kwa browser yangu, upya, na ya kuvutia. 

Ambapo ni Rick? Hivyo basi mimi kuona nini kilichotokea. Kwa kweli, mimi nina kwenda kujifanya kama sikuweza kufanya hivyo. [Inaudible] kumtia hapa. Tutaweza kuja nyuma na kwamba katika wakati huu. Hivyo hapa ni rick.html. Hivyo hiyo ni si Rick Astley. Hivyo ni zamu nje tunaweza kweli kuongeza naye katika hapa. Hii ni Rick Astley. Mimi nina kwenda kusema nipe picha ambao chanzo ni URL mimi tu kunakiliwa, ambayo inaonekana ni furaha kuzaliwa kitu au nyingine. 

Na sasa mimi nina kwenda karibu tag kama hii. Hivyo hii ni wrapping super muda mrefu. Lakini taarifa kwamba wote Nimekuwa kufanyika ni mabano wazi picha, chanzo kwa sifa ya hii. Na ni kweli kwa muda mrefu URL. Na mwishoni sana, taarifa hii. Kwa nini nimefanya kufyeka angled bracket badala ya, kama kila tag mengine, kuwa mabano wazi, IMG, imefungwa mabano? Tu kuchukua nadhani hata kama wewe hawana uzoefu wowote na HTML kabla. 

Hivyo ni jinsi gani kufunga amri, lakini kwa nini je, ni si kweli kufanya Intuitive maana kwa kufanya kitu kidogo zaidi verbose kama picha karibu? Naam. Naam. Tu semantically, hakuna hisia ya kuanzia picha na kumalizia picha, ni ama huko au siyo. Hivyo haina mantiki kuondoka pengo kwa kitu kingine chochote ndani ya picha. Wewe tu hawezi kufanya hivyo. Na hivyo syntax ingekuwa ujumla kuwa tu kufanya kufyeka mbele ndani ya ya tag wazi au kuanza tag na kisha kugonga Hifadhi. 

Hivyo kama mimi sasa upya faili hili, sasa Mimi nimepata nzuri mtandao ukurasa kupikia hapa. Na tunaweza hakika kweli waudhi watu na upachikaji badala kama kiungo cha YouTube. Na kwa kweli, wakati wowote wameweza milele wamekwenda YouTube, na napenda kwa kweli ajali Rick unaendelea mwenyewe hapa. Hivyo Rick roll. Hivyo Rick roll-- mimi nina kwenda hapa. 

[Music kucheza] 

OK, mtu mmoja walipenda hiyo. Hivyo taarifa muda wote huu, kama wewe bonyeza Kushiriki kiungo, wewe bila shaka kupata URL kwamba unaweza kweli kuiweka katika barua pepe au picha kuchunguza mauaji au katika tatizo kuweka au katika slide. Na sasa, kama mimi badala click kwenye kupachika, taarifa kwamba muda wote huu, mambo haya imekuwepo. Mimi nina kwenda mbele na nakala hii. 

Na tu ili tuweze kuona vizuri zaidi, mimi nina kwenda kuweka ndani ya mhariri wangu wa maandishi. Taarifa kwamba hii ni nini YouTube imekuwa nawaambia. Kila wakati wa ziara Video YouTube, kama wewe wanataka kupachika video juu yako mtandao ukurasa, tu kunyakua hii. Hivyo hii ni bado mwingine Tag HTML aitwaye iframe. Au katika mstari sura. Hivyo pia inaonekana kidogo zaidi ngumu zaidi kuliko wengine wote. Hivyo ni zamu nje kwamba picha tag na inaonekana iframe tag kuchukua kile ni wito sifa. 

Na hii ni nyingine kipande cha syntax katika HTML. Mbali na tag ya jina, wazi bracket tag jina, unaweza kudhibiti mwenendo wa tag kwa kuwa rundo zima la sifa sawa na thamani. Sifa sawa na thamani. Na hivyo kwa mfano, YouTube anatueleza kama unataka upana wa video hii kuwa 420 saizi na urefu kuwa 315 saizi, hiyo ni jinsi kueleza kuwa katika HTML. 

Chanzo cha video ni kwenda kuwa kwamba URL muda mrefu YouTube na baadhi ya mambo mengine basi kama sura mpaka ni sifuri, hivyo kwamba pengine ina maana kuna hakuna mipaka kuzunguka kitu. Kuruhusu screen kamili pengine ina maana kwamba mtumiaji Unaweza bonyeza kifungo na kweli full screen video. Hivyo kama mimi kweli unataka kuwa kuvutia hapa katika Rick nukta HTML, badala ya kutumia tag picha, basi mimi kufuta kwamba, badala kuweka hii. Na sasa Reload. Na sasa hapa sisi kwenda tena. Haki wote, hiyo inatosha. Haki zote hivyo mimi kujaribu ngumu si kufanya hivyo tena. Kwa hiyo kile ni baadhi ya takeaways hapa? Hivyo HTML, kama mbaya kama kurasa hizi mtandao ni, ni kweli pretty rahisi. Siyo lugha ya programu. Haina kazi. Haina mizunguko. Haina masharti. Yote ina ni kadhaa ya vitambulisho tofauti, ambayo kila mmoja ina zero au zaidi sifa. Na kwa kweli, nini furaha kuhusu HTML kama wewe kuanza kupiga mbizi katika ni kwamba ni sana binafsi kufundishwa. 

Yote inachukua ni uelewa ya mfumo wa jumla wa HTML. Ni tag nini, ni nini sifa, jinsi gani unaweza kweli configure mtandao kama ifuatavyo. Na kila kitu kingine ni kweli matokeo ya kuangalia juu katika kumbukumbu online au googling jinsi ya kufanya baadhi mbinu au kama tumeona, kuangalia chanzo Facebook kanuni, kuangalia tovuti kwamba wewe kama saa ni chanzo kanuni na kuelewa jinsi watengenezaji huko kweli kuweka mambo ya nje. 

Hivyo tunaweza kufanya picha pia. Na kwa kweli, sisi alifanya hivyo wakati iliyopita. Hebu kwenda mbele na tu kuonyesha. Hapa ni baadhi ya kanuni sampuli. Kama umewahi wanataka kuona grumpy paka. Hivyo taarifa kwamba naweza na tag picha hapa. Na mimi nimepata maoni juu yake. Mimi nimepata mbadala Nakala kwa upatikanaji. Hivyo mtu ambaye kwa kutumia screen msomaji kwa sababu ya mbele kweli anaweza kisha kuwa wao screen msomaji kusema grumpy paka. Kwa sababu kama hawawezi ona picha, wao Unaweza angalau kuwa na kompyuta zao kuwaambia ni kwa maneno yale. Na chanzo cha faili kwamba ni cat.jpeg. Hivyo kwa kweli, kama kweli alitaka kupata wajanja, kitu ambacho ninaweza kuwa na done-- Mimi ahadi si kwenda Rick Astley, hivyo Mimi nina kwenda google kwa ajili ya paka badala yake. Na nikienda kwa Google Picha hapa, na tutaweza kudhani kwamba hii ni picha ya paka wangu. 

Tuseme kwamba mimi kuwa na udhibiti clicked au haki clicked juu ya hili, kwa bahati mbaya creepy. Na cat.jpeg mimi nina kwenda kuokoa kwenye eneo kazi yangu. Sasa niende nyuma wingu 9. Taarifa kwamba hapa, siwezi kwenda kupakia faili za mitaa. Na kama mimi kunyakua huu file, cat.jpeg, ilani niweze Drag na kushuka ndani ya wingu 9 na ni kwenda yell saa yangu hapa. 

Kwa sababu tumekuwa tayari kupeni cat.jpeg faili, lakini ni super rahisi kunyakua picha kwamba wameweza kuchukuliwa kutoka Facebook au Flickr au kama na kwa kweli Drag na kuacha ni ndani ya wingu 9 na kisha kufanya hivyo sehemu ya binafsi yako mwenyewe tovuti au tatizo kuweka saba au nane kama tutaweza hivi karibuni kuona. Na kisha wakati hatimaye ziara kwamba paka, kuchukua mimi kupakuliwa kwamba paka huo, ilani that-- iliyokuwa adorable. 

Nini ungependa kuona ni kitu kama hii uso hapa. Hivyo mafaili kwamba kumbukumbu ndani ya ukurasa wa mtandao yanaweza ama kuwa serikali za mitaa katika yako mwenyewe akaunti au kijijini juu ya baadhi server mengine kama katika kesi ya Rick Astley picha kidogo iliyopita. Hivyo ambapo else-- nini kingine tunaweza kufanya hapa? Basi hebu tuangalie yafuatayo. Unajua nini aina ya baridi? 

Sisi hivi sasa wamekuwa kufanya kurasa za mtandao tuli sana. Nataka spice mambo up kama ifuatavyo. Nataka kufanya search yangu mwenyewe injini. Hivyo kufanya search injini, hebu kwenda mbele na kuanza kufanya hivyo. Mimi nina kwenda mbele na kujenga faili mpya iitwayo search.html. Na sisi prefabed matoleo online. Whoops. Je, si kuweka katika terminal dirisha yako. Matoleo Prefab online. Na mimi nina kwenda kuanza kama ifuatavyo. Hivyo hapa ni mwanzo wa faili inayoitwa search.html. Mimi nina kwenda kuokoa ni katika chanzo directory ya leo. Mimi nina kwenda kuwaita Search hii. Kwa kweli, tutaweza kufanya vizuri zaidi. CS50 Search na kwa kweli bidhaa hiyo. Na sasa, mimi nina kwenda kusema kitu kama H1 CS50 Search. Na kisha chini hapa, H 2 kuja hivi karibuni. Na tu kwa kurejea, H1 na H2 maana gani mtiririko? 

Yeah, hivyo kubwa na ujasiri, na si kubwa, lakini bado ujasiri. Hivyo kama mimi ila huu na kwenda juu hapa, hebu angalia faili search.html. Haki wote, na hii moja ni right-- [inaudible]. Kusimama kwa. Daudi ni kuchanganyikiwa. Oh, ni haki pale. Daudi ni idiot. SAWA. Kwa hiyo, kuna ni. Hivyo CS50 la kuja hivi karibuni. Hivyo sasa, hebu kuunganisha nini tulifanya wiki iliyopita. 

Ambapo kuongelea kiwango cha mechanics chini ya HTTP. Na mawazo haya mapya ya HTML, ambayo ni haki hii lugha ghafi ambapo kuwaambia kisakuzi hasa nini cha kufanya na kutekeleza utafutaji yetu wenyewe injini. Hivyo badala ya akisema kuja hivi karibuni, mimi nina kwenda kuanzisha kitu kinachoitwa tag fomu. Na katika fomu hii, mimi nina kwenda kwa kuwa na kitu kama shamba pembejeo. 

Na jina la pembejeo huu shamba, mimi nina kwenda kumwita Swali: Na aina ya pembejeo uwanja huu Mimi nina kwenda kusema ni "Nakala". Na uwanja wa maandishi, kama tutaweza kuona, ni tu sanduku maandishi. Na hivyo hana kuhisi hapa na chochote ndani yake katika hatua hii. Na hivyo mimi nina tu kwenda kuifunga tag na kwamba mbele kufyeka haki katika tag yenyewe. Na kisha mimi nina kwenda kwa na pembejeo nyingine moja. Pembejeo aina ni sawa na kuwasilisha. Na kisha mimi nina kwenda kwa kuifunga moja pia. 

Na sasa mimi nina kwenda nyuma hapa. Na tayari tunaona, angalau pretty mbaya, nimekuwa got mwanzo wa search yangu mwenyewe ukurasa hapa. Kwa kweli, napenda kujaribu safi hii juu kidogo. Ni zinageuka kuwa juu ya pembejeo hapa, siwezi kuwa Sifa mwingine aitwaye placeholder. Na mimi ili kuona kitu kama maneno, au zaidi hasa, swala kwa q. 

Na taarifa, sasa, nina aina hii ya maandishi Gray kwamba kutoweka kama haraka kama mimi kuanza kuandika, lakini pengine kitu wameweza kuona katika kurasa nyingine mtandao. Mimi si kweli kama Kuwasilisha kifungo. Hivyo mimi nina kweli kwenda kutoa Kuwasilisha kifungo thamani ya utafutaji. Na sasa, kama mimi upya, taarifa kwamba kifungo changu inakuwa aitwaye utafutaji. Unajua, mimi si kweli kama alama hapa. Hivyo jenereta Google herufi. 

Nataka spice hii juu zaidi. Search hivyo CS50. Napenda kuunda alama yangu mwenyewe. Kwamba inaonekana nzuri. Hivyo sasa napenda kuokoa hii as-- kuja juu. Ambapo ni kwenda? Huko. SAWA. Amekosa yake. Ila kama. Kijinga browsers. Kusimama kwa, tunakwenda kurekebisha hili mara moja na kwa wote. Kuna sisi kwenda. Sawa. Pole. Mbali siku. Sasa hii ni funky. Toka screen kamili. Sawa. 

Sasa, kama kawaida mtu, kuokoa picha kama. Logo.gif. Sasa mimi nina kwenda katika CS50IDE na Mimi nina kwenda tu kunyakua alama, Mimi nina kwenda Drag ni katika yangu directory chanzo saba, faili tayari ipo, mimi nina sawa na kwamba. Hivyo nina kwenda kwa kuipuuza kwa sababu mimi tayari alikuwa nayo. Na sasa ni jinsi gani mimi kujikwamua hili? 

Hebu kwenda mbele hapa na kufanya picha chanzo ni sawa na logo.gif. Kuifunga. Kuokoa. Na sasa kama mimi kurejea tafuta yangu ukurasa, sasa ni kuangalia nzuri sana. Haki wote, hivyo ina si amefanya kabisa kitu chochote muhimu. Kwa kweli, napenda kujaribu kutafuta kwa ajili ya paka na kuona nini kinatokea. Paka. Damn it. Haina tu kazi, inaonekana. Basi nini kipande muhimu hiyo ni kukosa hapa? 

Haki, hata kama hamjui HTML wowote, Nimeanza kuashiria up fomu ya simu na nimekuwa aliiambia yake jinsi ya kupata pembejeo, nipe sanduku maandishi na kuwasilisha kifungo, kipande kile inaonekana kukosa? Tuseme tunataka kweli kupata jambo hili kufanya kazi kwa usahihi. Tufanye nini haja ya kufanya? Tuna haja ya kutekeleza ya mwisho ya nyuma Mbegu au injini ya utafutaji yenyewe, na kwamba kwenda kuchukua mengi yote ya wakati, kusema ukweli. 

Basi kumbuka kile tulichofanya mara ya mwisho. Hivyo kama wewe kutafuta kitu kwenye Google na una mapema akageuka mbali, wanakumbuka, tafuta papo. Hivyo basi mimi kugeuka kuwa mbali ili hii kwa kweli kutenda kama browser wakubwa shule, kama mimi sasa kutafuta kitu kama paka, kukumbuka kile URL inaonekana kama. Ni pretty cryptic. Lakini iliyoingia katika huko, wanakumbuka, ni kufyeka utafutaji. Swali alama q ni sawa na paka. 

Na kwamba inaweza kuonekana nipe rundo zima la matokeo ya utafutaji. Ili kujua nini mimi nina kwenda kufanya? Mimi nina kwenda kukopa Google kwa dakika moja tu. Mimi nina kwenda juu ya hapa na mimi nina kwenda kusema kwamba hii ndiyo hatua au marudio, ili kuzungumza, lazima literally kuwa Google. Na mbinu nilitaka kwa matumizi ni kwenda kuwa kupata. 

Hivyo ni hatua gani? Hatua ni weirdly jina lake, lakini kwamba tu ina maana ambaye ni kwenda kushughulikia hatua ya aina hii? Wakati mimi bonyeza Search, ambapo lazima matokeo kwenda? Na kama mimi sasa kurejea fomu yangu hapa na Reload mtandao ukurasa wangu na sasa kutafuta kitu kama mbwa, taarifa sasa I have re kutekelezwa Google. Sawa? 

Kama mimi nataka kutafuta kitu mwingine, ni kazi kwa si tu mbwa, pia kazi kwa ajili ya paka. Pia kazi kwa CS50. Na sawa, hili ni jambo jema chini ya whelming, si hivyo? Sawa, lakini ni kweli kazi. Hivyo nini hasa kinachoendelea? Hivyo nimekuwa kufundishwa browser yangu, kwa kutumia HTML, kuchukua pembejeo kutoka kwa mtumiaji na kwa kweli kutuma pembejeo kwamba kijijini server kutumia HTTP. 

Na kwa sababu kisakuzi yangu anaelewa HTTP, ni kweli kujenga URL ili kile Mimi kuishia juu katika browser yangu, taarifa nini kinatokea wakati mimi searched kwa mbwa. Kama mimi bonyeza Search, taarifa kwamba URL mabadiliko kama mimi nia kwa google.com/search~~V swala sawa na mbwa. Na hiyo ndiyo sababu aina anajua, kwa sababu ni njia ya kupata, kwa kifupi append kwa kuwa URL huko. 

Sasa, kurasa hizi mtandao bado ni mbaya. Basi hebu kuanzisha mwingine mmoja kipande cha syntax kama tunaweza leo. Na hili ni jambo inayojulikana kama shuka kuachia style. Hivyo basi mimi tuangalie mfano huu hapa na kuona kama tunaweza kudai nini kinaendelea. Hii ni CSS0.html. Na hii ni mahali ambapo mambo kupata kidogo mbaya. Kwa sababu kwa bahati mbaya, katika ulimwengu wa mtandao, HTML peke yake haiwezi kufanya kila kitu. Na hivyo kama unataka stylize mtandao ukurasa wako, wewe kweli haja ya kuzingatia aesthetics katika njia tofauti. Hivyo hapa, nina mwili wa mtandao wangu ukurasa ndani ya ambayo ni div kubwa. Na div tu ina maana mgawanyiko. Hivyo ni kama aya lakini hana semantiki sawa ya aya ya maandishi. 

Hii ina maana kwa browser, hiyo inakuja kubwa mkoa mstatili wa mtandao wangu ukurasa, nataka kushughulikia hilo hasa. Sasa, mstari 21 Hapa ndipo kwamba div kuanza. Na tu kuchukua nadhani. Ni athari ya mstari 21 juu ya nini mapumziko ya yaliyomo ya ukurasa? Centering yake. Hayo ni yote. Hivyo hatujaona njia ya kweli centering asilia. 

Kwa kweli, search injini yangu, tofauti na Google halisi, mara zote haki juu ya upande wa kushoto. Na hivyo sasa katika mstari 21, mimi kusema, hey browser, kujenga mgawanyiko wa ukurasa. Nipe tu kubwa, asiyeonekana mstatili. Hayo ni jinsi mimi wanataka kufikiri juu ya ukurasa wa mtandao. Na kisha stylize ni kama ifuatavyo. Ndani ya quotes hizo, sasa, ni lugha ya pili kwamba sisi ilianzisha leo aitwaye kuachia style karatasi. Shukrani nyingi, hiyo pia ni si lugha ya programu, hivyo ni mdogo sana katika syntax wake lakini pia mdogo sana katika utendaji wake ambapo HTML ni wote kuhusu kuashiria up data ya mtandao na muundo wa ukurasa wa mtandao. CSS kwa ujumla ni kuhusu mwisho maili, aesthetics, kupata ukubwa na rangi na uwekaji hasa haki katika ukurasa wa mtandao. Na hakika, ni sumu kwa thamani jozi ufunguo. 

Mali kama hii, maandishi align, ikifuatiwa na koloni, ikifuatiwa na thamani ya kwamba mali hiyo, ambayo katika kesi hii ni kituo cha. Na sasa taarifa yenu Unaweza kiota mambo haya. Kama nilitaka kila kitu kwa kuwa Nimekuwa yalionyesha kuwa unaozingatia, hiyo ndiyo sababu nina mstari 21 na mstari sambamba 31. Lakini tuseme sasa nataka kusema John Harvard, kuwakaribisha kwa ukurasa wangu wa nyumbani. 

Ishara hati miliki John Harvard. Na nadhani wanataka kwanza ya wale mistari kuwa pretty kubwa. 36 saizi. Hivyo hiyo ni ukubwa heshima. Na nilitaka uzito wake kuwa na ujasiri. Lakini basi chini kwamba, Nataka maandishi madogo. Na chini ya hapo, nataka Nakala hata kidogo. Pole. Leo anahisi kama siku mbali. 

Hivyo sasa, je, Mimi kufanya kueleza hili? Hapa kwenye mstari 22 ni iliyoingia div au nested div, kama wewe. Ni pia ina mtindo tag yake mwenyewe. Mimi kutaja ukubwa wa herufi ya 36. Mimi kutaja herufi uzito wa ujasiri. Chini hapa, mimi tu kutaja 24 saizi. Na hatimaye, katika mstari 28, mimi kutaja 12. Hivyo tu kama haraka sanity hundi na kama kusoma binadamu hivyo, ambayo maneno juu ya screen ni kweli kwenda kuwa na ujasiri? Ambayo mistari ni kweli ujasiri? 

Tu John Harvard. Sawa? Kwa sababu tu kama mstari 22 anasema hey browser, hapa ni mgawanyo wa ukurasa. Matokeo yake ni ukubwa wa herufi 36 uhakika. Kufanya font uzito koze. Haraka kama wewe kufikia sambamba mwisho tag au kufungwa tag kwenye mstari 24, kwamba maana yake, hey browser, kuacha kufanya chochote ni unafanya. Na taarifa kwa kuwa wazi, hata kama mstari 22 ina wote wa sifa hizi kama style, wakati karibu tag katika mstari 24, wewe tu kutaja jina tag ya. 

Huwezi kurudia neno style au chochote hiyo ni ndani ya quotes hizo. Na hivyo kama mimi kuangalia hii sasa katika browser yangu, hebu kuchukua a tuangalie matokeo ya mwisho. Hebu kwenda mbele ya faili hili, ambayo ni CSS 0. Na ni bado pretty wazi, lakini kupata pretty kuvutia. Lakini zinageuka kuna ya mambo mengine siwezi kufanya hapa, na katika hatari ya kufanya hii hideous kabisa, taarifa hapa kwamba katika wangu mwili wa mtandao ukurasa wangu, Siwezi kufanya kitu funny kama bg au rangi ya asili. 

Na haraka, nini rangi yako favorite? Green nikasikia. Sawa. Hivyo sasa, kama mimi hit Reload sasa, tuna kijani mtandao ukurasa. Haki wote, hivyo hiyo ni si mbaya. Na sasa, kama nataka kufanya kweli hii baridi, siwezi kufanya alama ya asilia wangu hata nyekundu. Basi hebu angalia nini hii inaonekana kama. Sasa ni kuangalia nzuri sana. Na chini hapa, kama kweli wanataka fujo na mtu au kama unataka kuwa mmoja wa watu wale ambao anajaribu kukuhadaa kutembelea mtandao ukurasa kwa sababu wameweza mkadanganywa Google katika kufikiri kuna rundo zima ya maneno muhimu like-- hebu angalia, Reload. Wapi ni kwenda? Na huko kwetu. Sawa. Kwa hiyo nasema huu kama kando, tutaweza majadiliano juu ya mambo haya katika wiki chache wakati sisi majadiliano juu amani, kama nyinyi kweli kupachika mashada zima la maneno katika ukurasa wa mtandao, hata kama uko kutoonekana kwa binadamu, mtu kama Google, bila shaka, bado anaweza kweli kupata hii. Haki wote, hivyo hiyo ni mzuri hideous pretty haraka. 

Na kwa kweli, si wote kwamba sehemu kubwa tofauti na mtandao wangu mwenyewe ukurasa kama shahada ya kwanza, ambayo Mimi kuanza googling karibu na kupata matoleo ya zamani ya Nje yangu ya zamani. Ilikuwa ni pretty mbaya. Kwa kweli, sikuweza kupata moja tu kabla ya darasa. Lakini kuna mabaya zaidi huko nje. Hii inaonekana alikuwa yangu ukurasa wa nyumbani nyuma mwaka 1996. Inavyoonekana nilifikiri ilikuwa sahihi kuuliza watu majina yao kabla hawakuweza kweli kuona mtandao ukurasa wangu. 

Na kisha mimi kuwaonyesha kitu kijinga, pengine. Mimi itabidi kuchimba zaidi kwa wakati ujao. Lakini kwa sasa, hebu kufikiria kidogo ya kubuni. Tumekuwa aliyesema kuhusu style. Na ukurasa huu hivi sasa na zaidi kila kitu nimekuwa imeandikwa ni pretty safi stylistically. Lakini nini kuhusu mpango? Naam, kuna mengi ya redundancy katika kile nimekuwa kufanya hapa. 

Nimekuwa zilizotajwa neno rangi katika michache ya maeneo. Nimekuwa zilizotajwa ukubwa wa herufi katika michache ya maeneo na ujasiri katika michache ya maeneo. Na kimsingi, mimi nina ushirikiano mingling lugha mbili. Mimi nimepata HTML na vitambulisho yangu na yangu sifa na kisha kwa ghafla, kati ya quotes, nina lugha ya pili leo aitwaye CSS, ambayo tena, ni tu hizi thamani jozi ufunguo au mali hizi kutenganishwa kwa koloni. 

Ni zinageuka kuwa sana kama katika C ambapo sisi Unaweza kuanza kwa sababu nje baadhi kificho katika kichwa mafaili, hivyo tunaweza kufanya hivyo katika HTML. Na hatua kuelekea kuwa ni kama ifuatavyo. Taarifa kwamba toleo hili, CSS1.html ni kimuundo exact mtandao ukurasa. Hivyo mimi nimepata rundo zima ya divs, lakini wakati huu, nimekuwa wamezipata kuondoa kanga div kama utaona. 

Na Nimekupa wale divs tatu juu, kati, na chini, Vitambulisho vya kipekee. Hii ni nzuri, kwa sababu kwa kutoa tarafa wale ya ukurasa vitambulisho vya kipekee, Siwezi rejea yao mahali pengine. Wapi? Naam, napenda kitabu juu. Na hivi sasa, wakati wowote tumekuwa inaonekana katika kichwa cha ukurasa wa mtandao, nini tag tu tulikuwa na katika mkuu wa ukurasa wa mtandao? Kidogo nguvu zaidi. Tu jina hadi sasa. Lakini zinageuka kuna ya wachache na mambo mengine unaweza kuweka katika huko, mmoja wa ambayo ni kuitwa tag style. Hivyo wakati iliyopita, sisi inaonekana katika style sifa. Zinageuka kuna tag style. Iko ndani ya mkuu wa ukurasa wa mtandao. Na sasa taarifa nini mimi kufanya. Nina ndani ya hii mtindo tag zifuatazo. Mimi literally kutaja juu ya mstari 20 jina la tag kwamba nataka stylize. 

Basi nina wazi curly brace na kufungwa curly brace. Hivyo sawa katika roho kwa C, lakini tena, hii si kazi, hili ni jambo jema kwa undani kisintaksia hapa. Na kisha bila shaka, mimi nina kuwaambia browser, hey browser, kufanya mwili mzima wa ukurasa na asilia alignment ya kituo hicho. Na kisha hii ni kusema yafuatayo. Hey browser, ukiona HTML kipengele au tag katika ukurasa kwamba ina kitambulisho kipekee ya juu, hivyo hash ishara hapa ina maana tu wazo kipekee ya juu, kwenda mbele na kufanya ukubwa wa herufi zake 36 na herufi zake uzito koze. 

Hey browser, kipengele ambaye ID ni katikati, kufanya hivyo 24 saizi. Na hey browser, ukiona wazo la chini, kufanya hivyo 12 saizi. Athari katika mwisho ni hasa sam. Kama mimi kwenda katika CSS 1, ukurasa inaonekana sawa. Lakini sisi ni hatua kuelekea kubuni kidogo bora. Sasa niende nyuma hapa CSS2 na kuona nini kingine mimi tumefanya. 

Sasa ukurasa ni kweli, kweli safi. Kwa kweli, siwezi kifafa wote wa yaliyomo kwenye ukurasa hapa. Lakini nini mpya tag na mimi ilianzisha, ni wazi? Kiungo. Na si jina bora kwa tag, kwa sababu si kiungo kwa maana ya kuwa tunajua kuwa, lakini hii ina maana kiungo katika baadhi ya faili nyingine. Hii ni aina ya kama mkali ni pamoja na katika C. 

Hii ni njia katika HTML kusema hey browser, kwenda kupata yaliyomo ya faili inayoitwa css2.css. Uhusiano, kwangu, ni kwamba ni karatasi style. Na hakika, hilo ndilo moja ya S katika kuachia style karatasi njia. Hii ni karatasi style. Ni tu maandishi faili zenye rundo zima la mali. Ni kundi zima la mitindo kwamba unataka kuomba kwa ukurasa. 

Na hivyo hii inaonekana ni akimaanisha faili la pili. Na kama mimi kufungua hiyo, CSS2.css, taarifa kwamba wote mimi tumefanya ni nakala na kuweka zote ya hii katika faili hii. Na sasa, hata kama wewe sijawahi kutolewa mambo haya kabla, tu kufikiria kwa proverbial kofia uhandisi juu ya nini ni a huu bora kubuni pengine? Factoring nje mali hizo CSS, kuweka katika faili yao wenyewe. Hata ingawa sisi kutatuliwa hii Dakika tatizo kama mitano iliyopita katika toleo la kwanza kabisa. 

Tumekuwa si kuboreshwa stylistically ukurasa, hii ni bora kubuni katika baadhi ya hisia. Kwa nini unafikiri? Naam. Zaidi rahisi ni jinsi gani? Naam. Hivyo kama unataka kwenda nyuma na kubadili mambo, sasa, una sehemu moja ambapo unaweza kubadili mambo. Na kwa kweli, kwa ajili ya kitu kama tatizo kuweka saba, ambapo tutaweza kutekeleza ya hisa internet tovuti, ambayo inaenda kuwa rundo zima la kurasa. Na itakuwa kweli annoying kama wewe kuamua, hm, Mimi si kweli kama 24 saizi, nataka kuwa ni 28 saizi au kubwa kidogo. Na kisha una kufanya kimataifa kupata na kuchukua nafasi au kufungua wote wa mafaili tovuti yako tu kwa kweli mabadiliko thamani moja. By factoring nje mitindo haya ndani ya sehemu moja kuu, sasa unaweza kufungua faili moja Nakala katika CS50IDE katika mpango wowote, mabadiliko hayo, ila ni, na kufanyika. Umefanya kupandwa wale mabadiliko kila mahali. Na kwamba itakuwa sawa katika faili nukta h pia. Hivyo maswali yoyote hivyo mbali juu ya syntax hii? Haki wote, hivyo tumekuwa amefanya kila kitu inaonekana isipokuwa kweli kutekeleza viungo. Na hivyo hebu kwenda mbele na kufanya hili. Hebu kwenda mbele na kuunda faili mpya hapa. Mimi nina kwenda kuiita link.html, kuweka katika kanuni ya leo. 

Na mimi nina kwenda kufanya wazi mabano doc aina html. Kama kando, jambo hili katika juu, hii doc aina tamko, ni moja tu kwamba ni weird kwa mshangao uhakika. Wewe tu na kufanya hivyo kuna nayo ina maana sisi ni kutumia toleo HTML 5. Wazee matoleo ya Lugha alikuwa kwa muda mrefu masharti kwamba zinahitajika ili kuweka huko. Hivyo hapa ni mfano inayoitwa kiungo. 

Nahitaji mwili wa mtandao ukurasa wangu hapa. Na katika hapa, sawa href hebu sema HTTP://www.disney.com na tovuti yangu favorite, tutaweza kusema. Haki wote, hivyo sana innocuous, mtumiaji wa kirafiki ukurasa. Kama mimi sasa kwenda katika saraka yangu orodha hapa na kufungua link.html, tuna maandishi mfumuko. 

Na hakika, hii ni mahali ambapo H katika HTTP anatokea. HyperText uhamisho itifaki ni kuhusu kuhamisha maandishi ambayo ina viungo kwa rasilimali nyingine. Na hakika, hapa ni utambuzi, kama retro, bluu kiungo kwamba kama clicked, kwa kweli risasi mimi Disney.com. Sasa, loo, hiyo ni kuja nje hivi karibuni. Haki wote, hivyo sasa, ni baadhi ya maana ya hii? 

Na kusema ukweli, dunia kuanza kupata ukoo kidogo zaidi na pia scarier kidogo lakini pia kidogo zaidi binafsi defensible mara moja kuanza kuelewa mambo haya. Kwa sababu ni tabia mbaya, baadhi yenu, kama kwenda kupitia barua taka yako folder Gmail au hata Inbox yako, wewe wameweza pengine kujipatia baadhi ya aina ya email hiyo ni kuuliza wewe kubadili yako nenosiri labda au labda kuthibitisha sifa yako PayPal au whatnot. 

Na kwa kweli, unaweza kuwa wamepokea kitu ambacho anasema kama click hapa kuweka upya nenosiri lako PayPal. Na sasa, taarifa, iwapo hii si Disney.com lakini kama badplace.com na Reload, kumbuka kuwa maandishi hapa naweza kusema chochote wowote. Na kwa kweli, hii ni maneno tu. Mbona mimi kwa kweli kuwa super kwa makusudi na kusema http://www.paypal.com. 

Bonyeza hapa upya PayPal yako password na sasa upya. Hii inaonekana pretty halali, sawa? I mean, napenda click kwenye email kwamba tu anasema hii. Lakini taarifa dichotomy hapa. Inasema www.paypal.com, na kwa kweli, kusubiri dakika, Tunajua kwamba unataka s kwa ajili ya usalama. Hivyo sasa, nenda kwa www.paypal.com HTTPS, lakini kama wewe sijawahi jambo hili kabla, je kuingia katika tabia ya imetulia juu ya viungo kidogo hapa. Na ni vigumu kuona juu ya screen huko, na ni kwamba wote si rahisi hapa. Lakini njia ya chini hapa katika vidogo kona kidogo anafanya kisakuzi kweli kuwaambia kwamba tunakwenda kwa badplace.com badala ya Paypal.com. Sasa, ambapo ni sisi kwenda na hili? Mifano yote tumefanya leo, tumekuwa ngumu coded na typed nje manually. Mtandao ni incredibly uninteresting wakati mgumu kanuni mtandao kurasa yako ili bidhaa hiyo ni tuli na kamwe mabadiliko. Bila shaka, wote wa wetu favorite Nje leo, kama ni Gmail au Twitter au Facebook au idadi yoyote ya wengine ni nguvu. Wao ni kubadilisha katika kukabiliana na pembejeo mtumiaji kama matokeo ya Google. 

Na hivyo siku ya Jumatano, nini cha kufanya ni sisi kuondoka HTML na CSS kuanzishwa nyuma yetu na sisi kuchukua nafasi ya kwamba sisi sasa kujua na sisi kuanzisha mpya lugha ya programu aitwaye PHP, ambayo kama C, kinaenda kutupa uwezo wa kweli kujenga mipango kwamba wao wenyewe kuzalisha pato. Katika kesi hiyo, tutaweza kutumia PHP kuzalisha dynamically mtandao kurasa kutumia lugha hii mpya. Hivyo zaidi juu ya kwamba siku ya Jumatano. Tazama wewe hapo. 

[Music kucheza]