[MÅ«zikas atskaÅoÅ¡anai] 

DAVID J Malan: Tas ir CS50 un Å¡is ir sÄkums nedÄÄ¼as 7. TÄtad welcome back. Un jÅ«s varat atgÄdinÄt, ka jo problÄma noteikti Äetri, tur bija mazliet scavenger medÄ«bas daÅ¾iem pasakains balvÄm kuru pÄc tam, kad atgÅ«t fotogrÄfijas personÄls gan Å¡eit, gan New Haven, jums tika apstrÄ«dÄti atrast tik daudz Å¡ie datorzinÄtnieku kÄ jÅ«s varÄtu. Un mÄs esam ieguvuÅ¡i veselu Ä·ekars iesniegumus. DomÄju, ka man dalÄ«ties daÅ¾as ar jums Å¡eit Å¡odien. 

Un mÄs pÄc visiem Å¡iem tieÅ¡saistÄ. Bet jo Ä«paÅ¡i, es gribÄju vÄrst jÅ«su uzmanÄ«bu kuri paredzÄti, labi vienu, Sam bija diezgan maz no tÄm parasti rada kÄ Å¡is. Bet Å¡Ä·iet, ka no Å¡orÄ«t, uzvarÄtÄjs tika noteikta kÄds nosaukts Ken ar 24 darbinieku notverti uz kameru vai nedaudz vairÄk, ja jÅ«s Åemt veido vairÄkus darbiniekus attÄliem. AttÄlotie Å¡eit ir Ken nÄkamais Marijai in New Haven. 

Tagad, Ken, lai gan, izrÄdÄs ÄrÄ ir mazliet stÅ«ra lietas tas nav vÄl noticis pirms tam. IzrÄdÄs, ka tas nenotika man likt sodu drukÄt problemÄtiskajÄs noteikti Äetri, kas saka, ka darbinieki ir tiesÄ«bu saÅemt pasakains balvÄm jo Ken ir, protams, viens no fotogrÄfi par mÅ«su darbiniekiem. Tagad, ar to teica, viÅÅ¡ SÄkotnÄji rakstÄ«ja man teikt lÅ«dzu, nav post Å¡os fotoattÄlus tieÅ¡saistÄ. Es domÄju, ka liela daÄ¼a jo lielÄkÄ daÄ¼a no fotogrÄfijas ka Å¡is fotogrÄfs ÅÄma meklÄt mazliet kaut kas lÄ«dzÄ«gs Å¡im. Un tamlÄ«dzÄ«gi. 

Bet Ken gribÄtu mani pÄrliecinÄt jums ka viÅÅ¡ ir Ä¼oti labs fotogrÄfs, viÅÅ¡ ir profesionÄls, viÅÅ¡ sÄk fotogrÄfijas, kas nav neskaidra, kas ir labÄk fokusÄ, un viÅÅ¡ paÅÄma diezgan maz mÅ«su paÅ¡u darbiniekiem. Bet nevis tikai atzÄ«t Ken, ko mÄs domÄjam, ka mÄs gribÄtu darÄ«t ir iet cauri sarakstam faktiskie studenti, kuri iesnieguÅ¡i. Un izrÄdÄs, ka Lance ar 15 foto no Å¡Ä rÄ«ta bija mÅ«su uzvarÄtÄjs. 

Un attÄlotie Å¡eit ir Lance ar Colton, ar Skaz, ar sevi, un ar Semu. Bet tad izrÄdÄs, ka no 11:46, lai tikai mazliet pirms, Es devos atpakaÄ¼ uz manu e-pastu, un konstatÄja, ka mums bija vÄl vairÄk viens iesniegums students nosaukts Bonnie kuru e-pasts teica tikai to. Nav iet gulÄt, es esmu darot laikÄ klasÄ. Un tad turpinÄja pievienot tikai 14 foto, viens kautrÄ«gs no Lance ir 15. 

Bet Bonnie fotogrÄfijas, izrÄdÄs ÄrÄ bija vairÄki darbinieki, Sam starp tÄm, lai to, ko mÄs domÄjam, ka mÄs varÄtu darÄ«t, ir jÄatzÄ«st, abi Å¡ie. TÄtad papildus iegÅ«t Dropbox telpa, ka ikvienam, kas piedalÄ«jÄs saÅem, Å¡Ä«s divas sadaÄ¼as bÅ«s arÄ« saÅem jauku aizrÄdÄ«jums pusdienas par viÅiem un to sadaÄ¼u palÄ«gu Å¡o nÄk nedÄÄ¼as. Un tÄpÄc jums bÅ«s dzirdÄt no mums, Lance un Bonnie, par to. Tik liels Apsveicu uz tiem. Tagad, tiem no jums, kas bÅ«tu tÄpat pusdienÄm vispÄrÄ«gÄk zinÄt, ka CS50 pusdienas Cambridge un New Haven ir Å¡o piektdien. Iet uz CS50 MÄjas slash RSVP. Un tagad vÄrds par seminÄriem. VairÄk curricularly. TÄtad mÄs esam tuvojas punkts semestra kur jums vajadzÄtu sÄkt domÄjot par galÄ«gajiem projektiem. Un patiesÄ«bÄ, tikai mazliet, bÅ«s tÄ saukto pre priekÅ¡likumi bÅ«t saistÄ«ts. TÄtad iepriekÅ¡ priekÅ¡likumi ir domÄti bÅ«t diezgan zema ietekme un patieÅ¡Äm tikai iespÄja jums rakstÄ«t Ä«su piezÄ«mi JÅ«su mÄcÄ«bu puisis uz jÄinformÄ viÅam vai viÅai to, ko jÅ«s domÄjat jÅ«s varÄtu vÄlÄties darÄ«t, lai jÅ«su galÄ«go projektu. 

Tagad daudzi studenti beigties darot tÄ«mekÄ¼a galÄ«gos projektus. Un, protams, mÄs esam tikai Tagad pagÄjuÅ¡ajÄ nedÄÄ¼Ä Å¡ajÄ un tÄlÄk iegremdÄÅ¡anÄs web programmÄÅ¡anu. TÄpÄc nav jÄuztraucas, ja jums nav nekÄdu ideju, kÄ jÅ«s varÄtu veidot idejas, kas Jums varÄtu bÅ«t jÅ«su prÄtÄ. Tas ir patieÅ¡Äm vienkÄrÅ¡i piespieÅ¾ot funkcija lai saÅemtu jums domÄt un runÄt ar savu TF par to. Bet, lai palÄ«dzÄtu jums ar to, un ar galÄ«gajiem projektiem, visbeidzot, zina, ka CS50 ir tradÄ«cija piedÄvÄt seminÄrus. 

Un Å¡ie ir obligÄta, hands on, vai lekciju, pamatojoties uz iespÄjÄm lai uzzinÄtu vairÄk par tÄmÄm, kas ir mazliet aksesuÄra kurss ir mÄcÄ«bu programma, bet tomÄr brÄ«niÅ¡Ä·Ä«gi materiÄls braukt galÄ«gos projektus. Un tÄ tas ir saraksts, kas ir CS50 darbinieki Å¡eit New Haven ir jÄnÄk klajÄ ar par Å ogad par iOS programmÄÅ¡ana, Android programmÄÅ¡ana, spÄÄ¼u izstrÄde, un Ä·ekarus vairÄk rÄ«kiem un valodas un metodes. 

Lai saglabÄtu acu par CS50 tÄ«mekÄ¼a vietnÄ. Un tajÄ paÅ¡Ä laikÄ, ja vÄlaties reÄ£istrÄjiet savu interesi par kÄdu no Å¡iem, iet uz CS50 ir slÄ«psvÄ«tra reÄ£istrÄ. Un mÄs pÄc tam sekot, kÄ uz dienas un lidojumu laiki un vietas un everything-- visvairÄk viss bÅ«s noskatÄ«ties un pieejami arÄ« pÄc pieprasÄ«juma pÄc tam, ja jÅ«s nevarat faktiski darÄ«t to. TÄtad bez papildu ADO, mÄs left off pÄdÄjo reizi ar GET. 

Un tas bija, piemÄram, ziÅu, kas bija iekÅ¡pusÄ virtuÄlo aploksnÄ, atgÄdinÄt, ka mÄs nodots no router router router starp interneta pÄrlÅ«ku un web servera. Un ka ziÅa izskatÄ«jÄs mazliet kaut kas lÄ«dzÄ«gs Å¡im. Tas bija vairÄk arcane ziÅa, ka patiesÄ«bÄ bija iekÅ¡Ä aploksnÄ rakstÄ«ts uz papÄ«ra, kuru PirmÄ lÄ«nija saka burtiski, iegÅ«t slÄ«psvÄ«tra. 

Un tÄpat kÄ veselÄ«ba pÄrbaudÄ«tu, ko darÄ«ja slash apzÄ«mÄ? Ko slash nozÄ«mÄ, ja pieprasot mÄjas lapÄ? JÅ«s lÅ«gt to visu laiku. LielÄkÄ daÄ¼a jebkurÄ laikÄ jÅ«s apmeklÄjat tÄ«mekÄ¼a vietni, jÅ«s nav faktiski ierakstiet faila nosaukumu. JÅ«s, iespÄjams, dodieties uz Facebook.com, ievadÄ«t, gmail.com, vai tamlÄ«dzÄ«gi. Un ko tas slash pÄrstÄv? Kas failu? Vai kÄda lapa, konkrÄti? 

Indekss, jÄ. TÄtad noklusÄjuma lapÄ. TÄtad, ja jums nav jÄnorÄda failu nosaukt kÄ mÄs sÄksim redzÄt, jÅ«s faktiski tikai pieprasot iedodiet man noklusÄjuma lapu Facebook vai dot man manu inbox vai dot mani noklusÄjuma lapu jaunumi uz CNN mÄjas lapÄ vai tamlÄ«dzÄ«gi. Un serveris, tad atbild uz ka ziÅojums ar kaut ko piemÄram, tas, sakot jÄ, es runÄt HTTP versija 1.1. 

200, kas ir statuss kods, ko mÄs cilvÄki reti kÄdreiz redzÄt, jo tas ir labi. Jo tas nozÄ«mÄ OK, pieprasÄ«jumu Tika saÅemti un apstrÄdÄti pareizi. Un satura tips acÄ«mredzot atbildÄ ir diezgan bieÅ¾i, bet ne vienmÄr, teksts. Un konkrÄti, HTML. Un tas ir patiesÄ«bÄ ja mÄs skatÄmies uz Å¡odienu. 

TÄtad faktiski, es ieÅ¡u uz priekÅ¡u un atvÄrt pÄrlÅ«kprogrammu. Es esmu gatavojas izmantot Chrome, jÅ«s varat izmantot visvairÄk jebkuru pÄrlÅ«ku nedÄÄ¼Äs nÄkt. MÄs parasti iesakÄm Chrome jo tas ir Ä«paÅ¡i labs programmatÅ«ras izstrÄdÄtÄjiem. Tas ir ieguvuÅ¡i daudz celta rÄ«ki, kas atvieglo attÄ«stÄ«t ne tikai HTML un CSS, lietas, mÄs sÄksim runÄt par Å¡odien, bet arÄ« citÄs valodÄs, kÄ arÄ«. 

Un es ieÅ¡u uz priekÅ¡u un iet kuri paredzÄti, Es esmu gatavojas kontrolÄt klikÅ¡Ä·i vai pa labi noklikÅ¡Ä·iniet jebkurÄ tÄ«mekÄ¼a lapÄ. Un es ieÅ¡u uz PÄrbaudÄ«t elementu. Un es esmu gatavojas kniebiens manu ekrÄns tikai nedaudz Å¡eit. Ä»aujiet man pÄrvietot to uz leju. TÄtad, tas ir tas, ko sauc Chrome inspektors. TÄtad tas ir kÄ atkÄ¼Å«doÅ¡ana instruments iebÅ«vÄts Chrome. 

Visi no jums jau ir Å¡is ja jÅ«s esat bijis, izmantojot Chrome. Un tas Ä¼auj jums redzÄt, kas notiek par zem motora pÄrsega daÅ¾u mÄjas lapÄ. TÄtad pieÅemsim faktiski paiet apskatÄ«t Å¡Ä« Å¡Ädi. Tas ir veids, kÄ vairÄk funkcijas un mÄs rÅ«pÄjamies par Å¡odien. Bet tur ir Å¡Ä«s cilnes nekÄ Å¡eit. Elements, tÄ«kls, avoti, grafiku, un daÅ¾i citi sÄ«kumi. Es esmu gatavojas klikÅ¡Ä·iniet uz TÄ«kls brÄ«di. 

Un tas ir mazliet milzÄ«gs pÄc pirmÄ acu uzmetiena Å¡eit. Bet ko es esmu gatavojas darÄ«t, ir Ä¼aut mani vienkÄrÅ¡otu tÄ mazliet. Es esmu gatavojas, lai ieslÄgtu Ierakstot gaismu tÄpÄc, ka tas ir sarkans. Un es esmu gatavojas teikt saglabÄt Å¾urnÄlu. Un tas ir tikai nedaudz lieta, ko es sapratu, laika gaitÄ, kas notiek, lai saglabÄtu viss, kas notiek pÄrlÅ«kprogrammÄ. Un tagad es ieÅ¡u uz http://facebook.com. 

PatiesÄ«bÄ, pieÅemsim do www labs pasÄkums, slÄ«psvÄ«tra. Enter. Tik URL, ka daudzi no jÅ«s varÄtu bÅ«t apmeklÄjis. Un tagad Facebook tÄ«mekÄ¼a lapa nÄk augÅ¡Ä. Un tad viss Ä·ekars sÄ«kumi lidoja apakÅ¡Ä. Un patiesÄ«bÄ, izrÄdÄs, ka kad jÅ«s apmeklÄjat Facebook.com, JÅ«s esat ne tikai padarÄ«t vienu HTTP pieprasÄ«jumu, izrÄdÄs, ka gatavojas Facebook.com nosÅ«ta 41 no Å¡Ä«m aploksnÄm, katrs ar savu GET pieprasÄ«jumu, kÄ norÄdÄ«ts, lai gan aiz ekrÄna Å¡eit, apakÅ¡Ä ekrÄna, tas norÄda, ka, protams, mans pÄrlÅ«kprogramma veikti 41 pieprasÄ«jumus. 

Un kopumÄ, tas nodots 861 kilobaitiem un tas aizÅÄma kÄdu iemeslu dÄÄ¼ tik daudz kÄ astoÅas sekundes lejupielÄdÄt visu to. TÄtad tas ir faktiski mazliet dÄ«vaini ka Facebook vietÄ bÅ«tu pieÅemt, ka garÅ¡, bet lai tÄ bÅ«tu Å¡ajÄ gadÄ«jumÄ. Tagad tas viss man nav Ä«sti aprÅ«pi Par izÅemot augÅ¡Äjais pieprasÄ«juma. So iesim uz Å¡o vienu tieÅ¡i Å¡eit un Ä¼aujiet man tÄlinÄtu tikai brÄ«di. 

Un Ä¼aujiet man tuvinÄtu Å¡o. TÄtad, ko es esmu darÄ«jusi pie kreisi, lai gan tur ir daudz kas notiek vairÄk nekÄ Å¡eit tiek Esmu iezÄ«mÄts Facebook.com un pÄc tam paziÅojums, ka es esmu, ritinot uz leju, ritinot uz leju, ritinot uz leju, pieprasÄ«t galvenes. Un jÅ«s redzÄsiet, ka Chrome rÄda mani bÅ«tÄ«bÄ iekÅ¡Äjie saturs LÅ«guma es. Tas nav formatÄjumu gluÅ¾i tas pats veids, bet paziÅojums tur ir pieminÄts nokÄ¼Å«t, paziÅojums tur ir pieminÄts uzÅÄmÄjas, Facebook.com, ceÄ¼Å¡, vai slÄ«psvÄ«tra, kas ir fails es pieprasÄ«ts. 

Un tad, ja es ritinÄt atpakaÄ¼ uz augÅ¡u, mÄs faktiski redzÄt, ka tas, ko Facebook atpakaÄ¼ man ir visas Å¡Ä«s galvenes. TÄtad iekÅ¡pusÄ Å¡Ä« virtuÄlÄ aploksnÄ patieÅ¡Äm ir daudz galveno vÄrtÄ«bu pÄrus. VÄrdam, resnÄs zarnas, un pÄc tam vÄrtÄ«ba. VÄrds, kolu, un vÄrtÄ«ba. Tos sauc galvenes. Un tur ir veids, kÄ sÄ«kÄk Å¡eit nekÄ mÄs tieÅ¡Äm rÅ«p tieÅ¡i tagad. 

Bet tas ir otrais pÄdÄjais tur lejÄ, ievÄrosiet, ka facebook.com serveri, tieÅ¡Äm teica Å¡eit nÄk kÄdu tekstu HTML. TÄtad tas viss ir ko teikt ka tad, kad jÅ«s lÅ«gt tÄ«mekÄ¼a lapa no pÄrlÅ«ka uz A serveri, ka serveris ir atbilde ar aploksnÄ pati iekÅ¡pusÄ, kas ir teksts. Citiem vÄrdiem sakot, HTML. Hiperteksta iezÄ«mÄÅ¡anas valoda. Kura cita valoda ka mÄs ieviest Å¡odien ka cilvÄki vai datori Ä£enerÄt Lai Ä«stenotu interneta lapas. 

KonkrÄti, aplÅ«kosim Å¡o. Es esmu gatavojas tagad iet atpakaÄ¼ Facebook mÄjas lapÄ. Un es esmu gatavojas tikai kontrole klikÅ¡Ä·is vai labais klikÅ¡Ä·is un noklikÅ¡Ä·iniet uz SkatÄ«t lapas avotu. Un pat tad, ja jÅ«s neizmantojat Chrome, IE var izdarÄ«t, Firefox var izdarÄ«t, Safari var darÄ«t, pat ja izvÄlni iespÄjas varÄtu izskatÄ«ties nedaudz atÅ¡Ä·irÄ«gs. Un tas ir HTML, ka Mark un UzÅÄmums at Facebook ir uzrakstÄ«juÅ¡i. 

Un, lai kolektÄ«vi, Å¡Ä« valoda Å¡eit Ä«steno zilÄ un baltÄ lapa ka mÄs redzÄjÄm pirms brÄ«Å¾a. Tagad tas ir nedaudz milzÄ«gs. Bet, ja mÄs skatÄmies uz augÅ¡u kreisajÄ augÅ¡ÄjÄ stÅ«rÄ«, mÄs esam gatavojas sÄkt, lai redzÄtu daÅ¾us modeÄ¼us. IzskatÄs, ka ir daudz no Å¡iem atvÄrtÄ kakta kronÅ¡teinu un tad tur ir Å¡is atslÄgvÄrds HTML. LÅ«k, vÄl viens atvÄrts leÅÄ·is kronÅ¡teins un galva. 

Te ir, ja mÄs ritiniet uz leju un uz leju un uz leju, es esmu gatavojas iet uz priekÅ¡u un mÄÄ£inÄt lai meklÄtu kaut ko. Tur ceÄ¼Å¡ pÄri pa labi Å¡eit ir atvÄrta kronÅ¡teins Ä·ermenis. Un atceros no pÄdÄjÄs laiks, ka mÄs ierosinÄjÄm ka vienkÄrÅ¡ÄkÄ mÄjas lapÄ ka cilvÄks varÄtu uzrakstÄ«t varÄtu izskatÄ«ties mazliet kaut kas lÄ«dzÄ«gs Å¡im. AtvÄrt HTML tag, atvÄrtas virsas tag, open nosaukums tag, tad slÄgta nosaukums, slÄgta galva, open Ä·ermeÅa tag, kÄdu tekstu, slÄgta Ä·ermeni, slÄgta HTML. 

Bet pauze Å¡eit tikai brÄ«di. Å is kods, pat ja jÅ«s esat nekad rakstÄ«ts to pirms bet joprojÄm nav gluÅ¾i saprast kas notiek, izskatÄs diezgan labi. Pareizi, tas ir Ä¼oti tÄ«rs. Tas ir Ä¼oti stilistiski jauki. Daudz iedobi un atstarpÄm. Facebook s nav. TÄtad, kÄpÄc ir Facebook tik daudz sliktÄks nekÄ I rakstot HTML? AcÄ«mredzot. 

Pareizi, tas ir kÄ viens no pieciem stilu. Tur ir pÄrliecinoÅ¡s iemesls viÅiem samazinÄt Å¡os stÅ«riem. Labi, tÄpÄc viÅi nevÄlas padarÄ«t to vieglÄk, lai jÅ«s, lai to izlasÄ«tu. TÄtad savÄ ziÅÄ, viÅi apspÄlÄjot to, sava veida Å¡ifrÄÅ¡anas to vismaz estÄtiski tik ka tas ir grÅ«tÄk MySpace lai iet un noÄrdÄ«t to mÄjas lapa un HTML par to. IzrÄdÄs, ka ar programmÄm lai gan, tostarp Chrome, mÄs varam sakopt Å¡o augÅ¡u super viegli. TÄtad, tas nav gluÅ¾i tas, kÄ iemeslu. Kas vÄl varÄtu bÅ«t iemesls. JÄ. JÄ, balto laukumu izmaksas dati. Ko tu ar to domÄ? JÄ, tieÅ¡i tÄ. Ja jÅ«s hit taustiÅu tab par partiju vai SPACE, apsvÄrt sekas. TÄtad, katru taustiÅu uz tastatÅ«ras ir [Dzirdams] pÄrstÄvÄja vienu baitu. 

TÄtad pieÅemsim, ka preÄu zÄ«me vai kÄds no devs Å¡ajÄs dienÄs hits atstarpes tikai vienreiz Å ajÄ HTML lapu, pÄrstÄv Facebook mÄjas lapu. Un Facebook ir daudz LietotÄju Å¡ajÄs dienÄs. TÄtad pieÅemsim, ka Facebook mÄjas lapa apmeklÄ miljards cilvÄku Å¡odien. Un kÄds at Facebook ir hit starpdevÄjs tikai vienu reizi. 

TÄtad viens papildu baitu, miljardu pieprasÄ«jumi, cik daudz datu Facebook pÄrceÄ¼ot internetÄ tÄpÄc, ka kÄds hit spacebar uz viÅa vai viÅas klaviatÅ«ru? Miljards baitu, vai vienu gigabaita dati tiek nosÅ«tÄ«ti no Facebook serveriem lai cilvÄki visÄ pasaule bez pamatota iemesla. Tagad tas ir tikai viens telpa. 

IedomÄjieties, ja mÄs tieÅ¡Äm tÄ«rÄ«t Å¡is lieta up un izrobota, un piebilda, daudz balto laukumu un tab rakstzÄ«mes un atstarpes, jÅ«s galu galÄ izdevumu gigabaitiem, ja ne terra baiti vairÄk vietas. Un tÄ super sastopama Faktiskais pasaule web izstrÄde ir samazinÄt savu kodu. Un mÄs beidzot redzÄt kÄ jÅ«s varÄtu darÄ«t. 

Bet Å¡odien, mÄs sÄksim rakstÄ«t kodu tas tieÅ¡Äm lasÄma ar mums cilvÄkiem. IzrÄdÄs, lai gan, ja jÅ«s iet atpakaÄ¼ Å¡o rÄ«ku Chrome PÄrbaudÄ«t elementu, IepriekÅ¡ mÄs bijÄm uz cilnes Network. IzrÄdÄs, ka, ja jums iet uz tab elementi, ko jÅ«s faktiski redzÄt ir Chrome ir diezgan drukÄts versija, ka paÅ¡a HTML. TÄtad mÄs esam deobfuscated to. TÄtad, tas ir sakritÄ«bas par datoru. Un tagad jÅ«s varat faktiski noklikÅ¡Ä·iniet uz apkÄrt un sÄkt redzÄt hierarhiju, kas ir mÄjas lapa. TÄtad pieÅemsim faktiski darÄ«t. Es ieÅ¡u uz priekÅ¡u un atvÄrt uz mans Mac programma, ko sauc teksta rediÄ£Ät. Un atcerÄties, ka tas ir tikai super vienkÄrÅ¡u tekstu programma. Windows ir notepad.exe. Un es esmu gatavojas burtiski ierakstiet sekojoÅ¡o. Doc tipa HTML, open kronÅ¡teins HTML, slÄgta kronÅ¡teinu HTML, mums ir vadÄ«tÄjs lapÄ Å¡eit, beigas galvas lapÄ Å¡eit, Nosaukums bÅ«s tÄpat, Hello pasaulÄ. 

Un tad uz leju Å¡eit, mums ir nepiecieÅ¡ams Ä·ermenis mÄjas lapÄ. SlÄgtÄ virsbÅ«ve. Un tad Å¡eit, hello world. Viss kÄrtÄ«bÄ. TÄpÄc mÄs esam uzrakstÄ«jis super Ätru tÄ«mekÄ¼a lapu. Es esmu gatavojas, lai saglabÄtu to kÄ hello.html uz mana galda. My Mac gatavojas sÅ«dzÄties, domÄjot, ka, pagaidiet minÅ«ti, tas ir teksta fails, do jÅ«s vÄlaties, lai izsauktu to txt? Bet nÄ, es vÄlos izmantot dot HTML. 

Un tad, kas ir jauki, ja es vienkÄrÅ¡i dubultklikÅ¡Ä·i uz Å¡o failu, hello.html, Å¡eit ir mana mÄjas lapa. DiemÅ¾Äl, es esmu vienÄ«gais cilvÄks pasaulÄ kas var apmeklÄt Å¡o lapu tieÅ¡i tagad. Jo, ja tas dzÄ«vo acÄ«mredzot? Tas ir par manu Mac, vai ne? Kura ir bezjÄdzÄ«gi. TÄpat kÄ neviens Å¡ajÄ telpÄ nemaz nerunÄjot par internetu faktiski var apmeklÄt Å¡o lapu. TÄtad Å¡odien, mums ir nepiecieÅ¡ams, lai ieviest citu elementu. 

Un, lai to izdarÄ«tu, es esmu gatavojas iet uz priekÅ¡u un atvÄrt mÄkoni 9. TÄtad mÄkonis 9, protams, ir mÄkonis balstÄ«tas service-- CS50 IDE-- Tas ir visu mÅ«su darbvietas darbojas kaut kur internetÄ. Un tas nozÄ«mÄ, ka visas mÅ«su failus ir publiski pieejami jau. So iesim uz priekÅ¡u un darÄ«t to. Es ieÅ¡u uz priekÅ¡u un izveidot jaunu failu NCS50IDE. Es esmu gatavojas, lai saglabÄtu to kÄ agrÄk kÄ hello.html un noklikÅ¡Ä·iniet uz SaglabÄt. Un tagad tikai, lai ietaupÄ«tu laiku, es eju iet uz priekÅ¡u un kopÄt ielÄ«mÄt Å¡o kodu nevis atkÄrtojiet to. Un saglabÄjiet to. Un tÄpÄc tagad man ir failu sauc hello.html. Bet kÄ es varu tieÅ¡Äm atveriet to, kÄ mÄjas lapÄ? Nu, izrÄdÄs, iebÅ«vÄta lÄ«dz CS50 IDE ir ne tikai kompilators piemÄram Å¡Ä·indÄt un atkÄ¼Å«dotÄjs piemÄram GDB un Ä·ekarus citÄm programmÄm, tur ir tieÅ¡Äm pilnvÄrtÄ«ga tÄ«mekÄ¼a serveris darbojas daÅ¾u CS50 IDE. 

Visi no jums, proti, ir sava web serveri. Un web serveris ir tikai gabals par programmatÅ«ru, kuras mÄrÄ·is dzÄ«vÄ ir kalpot up interneta lapas. Lai klausÄ«tos pieprasÄ«jumiem no pÄrlÅ«kprogrammÄm un atbildÄt ar nelielu virtuÄlo aploksnÄm no kuriem iekÅ¡pusÄ ir saturu, kas es esmu uzrakstÄ«jis. TÄtad Å¡Ä« tÄ«mekÄ¼a serveris ir faktiski bezmaksas un atvÄrtÄ koda. Ja open source tikai nozÄ«mÄ programmatÅ«ra, ka kÄds cits ir rakstÄ«ts, ka visi no mums var faktiski redzÄt un lejupielÄdÄt un pat mainÄ«t pirmkodu. Un to sauc Apache. 

Un mÄs esam padarÄ«juÅ¡i mazliet vieglÄk izmantot CS50IDE zvanot to Apache 50. TÄpÄc, ka tÄ faktiski var saprast sekojoÅ¡o. Es esmu gatavojas teikt Apache 50 sÄkums. Un tad es esmu tikai gatavojas teikt dot. Un mÄs redzam daÅ¾us nedaudz arcane ziÅu sakot nosakot Apache dokumentu [? grupa?] uz mÄjÄm, Ubuntu, kÄds tas ir, slash darbvietas. SÄkot tÄ«mekÄ¼a serveris Apache 2 veiksmÄ«gi. 

Tik garÅ¡ stÄsts Ä«ss, es tikko uzstÄjÄm pogu un pagriezÄs uz web serveri, kurÅ¡ ir tagad klausÄ«ties internetÄ par TCP portu 80 pie konkrÄtÄ adresÄ. Un tas saka Å¡eit, un tas mainÄ«sies Based JÅ«su lietotÄjvÄrds un citiem faktoriem, bet paziÅojums tagad, ja es noklikÅ¡Ä·iniet uz to, IDE50 dot jharvard un tik un jÄ, ievÄroju, ka visu Å¡o laiku Par pÄdÄjo vairÄkus nedÄÄ¼as, jums varÄtu bÅ«t pamanÄ«ju, ka savu lietotÄjvÄrdu ir iestrÄdÄta augÅ¡ÄjÄ labajÄ rokÄ stÅ«ris CS50IDE. 

Un tas tieÅ¡Äm ir bijis tas viss laikam adresi, kur jÅ«s varat apmeklÄt visus savus failus caur web. LÄ«dz Å¡im tas nav vienaldzÄ«gs, jo C, jÅ«s parasti vÄlas lietas stiepjas terminÄls, kas nav tÄ«meklÄ«. Bet Å¡odien, mÄs sÄkam rakstot tÄ«mekÄ¼a kodu ka mÄs vÄlamies pieejama publiskajÄs URL. TÄtad, ko es esmu gatavojas darÄ«t, ir noklikÅ¡Ä·iniet uz Å¡o URL. 

Un paziÅojums, ka es redzu diezgan neglÄ«ts indekss, direktoriju sarakstu, bet tas, ko fails lec ÄrÄ pie jums droÅ¡i vien? Hello.html. Tas ir tÄpÄc, ka es saglabÄti fails manÄ darbvietÄ. Un tas, ko es esmu teicis Apache tÄ«mekÄ¼a serveri ir meklÄt DÄvida darbvietÄ direktorijÄ. Un Ä¼aujiet Ikviens pasaule redzÄtu Å¡os failus. 

Un tieÅ¡Äm, ja es tagad noklikÅ¡Ä·iniet uz hello.html, Es redzu Å¡ajÄ cilnÄ tieÅ¡i Å¡o failu. Tagad paziÅojums, mÄkonis 9 dara kaut nedaudz palÄ«dzÄt mums. Ietvaros CS50 IDE, paziÅojums tur pÄkÅ¡Åi adreÅ¡u joslÄ. Tas ir tÄpÄc, ka, lai gan mÄs esam izmantojot Chrome apmeklÄt CS50IDE, iekÅ¡pusÄ CS50IDE ir tÄs paÅ¡as versija interneta pÄrlÅ«ku tieÅ¡i tagad. Un tÄ vietÄ, sareÅ¾Ä£Ä«t lietas, kÄ, piemÄram, Es ieÅ¡u uz priekÅ¡u un vienkÄrÅ¡i kopÄt Å¡o URL. Es ieÅ¡u uz priekÅ¡u un vienkÄrÅ¡i atvÄrt savu Chrome logu. TÄtad tur nav burvju Å¡eit, ne CS50IDE. Es esmu tikai gatavojas burtiski ielÄ«mÄt mans J Harvard URL un hit Enter. Un voila, tagad es, un teorÄtiski ikviens internetÄ, ja es esmu konfigurÄts atÄ¼aujas pareizi, var apmeklÄt Å¡o failu. Un tÄ nu, ja es teicu hello.html, voila, tur ir mana neticami underwhelming mÄjas lapÄ. TÄtad, pieÅemsim darÄ«t Ätri veselÄ«ba pÄrbaudÄ«tu. Jo visi, kas ir konceptuÄls set up. Un mÄs esam patiesÄ«bÄ nav Ä«sti mÄca, kÄ rakstÄ«t HTML per se. KÄdi jautÄjumi lÄ«dz Å¡im par to, kas tikko notika? JÄ. Vai CS50 pieder Å¡Ä«s interneta lapas? KÄdÄ ziÅÄ? Labs jautÄjums. TÄtad CS50 ir nodibinÄjis CS50.io. MÄs esam patieÅ¡Äm nopircis, ka domÄna vÄrdu. Un pÄc bÅ«tÄ«bas no jums, puiÅ¡i ieejot CS50IDE, jÅ«s visi iegÅ«t to, ko sauc par apakÅ¡domÄna. 

TÄtad IDE50-Malan, vai IDE50-Rob.CS50.io, tas ir jÅ«su unikÄla adrese laikÄ MÅ«su domÄna nosaukumu. TÄtad Kursa vajadzÄ«bÄm jums ir sava unikÄla adrese. Bet mÄs esam vienkÄrÅ¡otas lietas, ko pÄrkot augÅ¡ÄjÄ lÄ«meÅa domÄnu, CS50 dot I / O un tad visi pÄrÄjie ir iekÅ¡pusÄ, kas, tÄ sakot. Un mÄs bÅ«sim atpakaÄ¼, ka pÄc pÄris nedÄÄ¼Äm, iespÄjams, Ä«paÅ¡i galÄ«go projektu laiks, kad daÅ¾i no jums varÄtu vÄlÄties, lai saÅemtu savu domÄna vÄrdu. Tas ir tieÅ¡Äm salÄ«dzinoÅ¡i vienkÄrÅ¡i. Viss kÄrtÄ«bÄ. TÄtad pieÅemsim tagad darÄ«t. Es ieÅ¡u atpakaÄ¼ CS50IDE, kur manu failu tieÅ¡i tagad, hello.html, nav tik interesanti. Es gribÄtu kaut ko darÄ«t nedaudz nicer nekÄ. TÄpÄc es esmu gatavojas darÄ«t kaut kas lÄ«dzÄ«gs Å¡im. Ä»aujiet man atvÄrts paragraphs.html. TÄtad tas ir fails es rakstÄ«ju iepriekÅ¡. TajÄ augÅ¡u tÄ, piemÄram, vienmÄr, mums ir komentÄri. Bet HTML, komentÄri izskatÄs mazliet atÅ¡Ä·irÄ«gs. On line treÅ¡ajÄ un lÄ«niju 14, jÅ«s skatÄ«t sintakse sÄkt komentÄru un galu komentÄru. 

Bet neviens no sÄ«kumi starp jautÄjumos funkcionÄli. Tas ir tikai piezÄ«mi cilvÄks, kas notiek Å¡eit. Un tikpat Ätri veselÄ«ba pÄrbaudiet, ja es ritiniet uz leju, kÄda ir skaidrs jauns tag, ka mÄs esam ieviesuÅ¡i? Par lÄ«dz Å¡im mÄs esam redzÄjuÅ¡i tags ir atvÄrti kronÅ¡teins HTML, galvas, virsraksts, un Ä·ermenis. Bet kas ir acÄ«mredzami jauns tagad? 

JÄ, tÄ p. P tag vai punkts tag. Un tad es vienkÄrÅ¡i aizÅÄmusies kÄdu noklusÄjuma LatÄ«Åu teksta, lai veidotu savus punktus. Jo tas, ko es gribÄju pierÄdÄ«t ir, kÄ jÅ«s varÄtu pÄrstÄvÄt teksta punktus HTML. Un tÄ, kÄdi ir sÄk notikt Å¡eit ir tas, ka tur ir jau modelis attÄ«stÄs. Un Ä¼aujiet man iet uz priekÅ¡u un darÄ«t to. Ä»aujiet man vispirms izslÄdziet Apache. Un es esmu gatavojas pateikt to, lai sÄktu sevi atkal iekÅ¡Ä Å¡odienas avota septiÅiem m katalogs. TÄpÄc, ka man ir pieejams viss. 

Un tagad, ja es dodos atpakaÄ¼ Å¡Ä« direktorija sarakstÄ, paziÅojums es redzu katru failu no Å¡odienas. Un jÅ«s redzat NÄkamÄ problÄma, kas, mÄs paskaidros lai dara tieÅ¡i to. Ja es atveru paragraphs.html, tas varÄtu kÄ arÄ« izskatÄs programmÄÅ¡anas valoda jums, ja jums nav runÄt vai lasÄ«t Latin. Bet tas ir tikai trÄ«s punkti teksta, kas iezÄ«mÄ HTML. 

Un paziÅojums punktu pauzes starp tiem. Jo izrÄdÄs, un pat tad, ja jums varÄtu rasties vÄlme to darÄ«t, tÄ kÄ reÄlajÄ pasaulÄ, ja jÅ«s vÄlaties, lai lÄ«nija pÄrtraukumi starp lietÄm, jÅ«s varÄtu vienkÄrÅ¡i darÄ«t, un hit SaglabÄt. Un tagad, ja es pÄrlÄdÄt Å¡eit, paziÅojums ka viss vienkÄrÅ¡i nojauc kopÄ tikai viens lÄse teksta. Jo HTML ir sava veida mÄms valodÄ. 

Tas ir paredzÄts, lai tiktu izmantoti tÄdi tÄ, ka pÄrlÅ«ks bÅ«s tikai darÄ«t tieÅ¡i to, ko jÅ«s pateikt to darÄ«t. TÄtad, ja jums nav pateikt to dod man jaunu punktu, JÅ«s neesat gatavojas redzÄt jaunu punktu. Un patiesÄ«bÄ, ko pÄrlÅ«kprogramma gatavojas darÄ«t ir pat tad, ja jÅ«s hit Enter, teiksim atkal un atkal un atkal, pÄrvietojot Å¡o teksta veidÄ uz leju uz ekrÄna un pÄc tam saglabÄjiet un pÄc tam pÄrlÄdÄt, pÄrlÅ«kÄ notiek sabrukt visu Å¡o atstarpÄm vÄrÄ tikai vienu, redzamÄ atstarpes. Viss kÄrtÄ«bÄ. TÄtad tas ir tag punkts. Un tÄ, kÄda ir modelis kas ir jaunattÄ«stÄ«bas Å¡eit? Nu, tas, Å¡Ä·iet, ir gadÄ«jums, ka HTML ir visu par sÄkuma tagu un beidzas tag. Un kas ir tag? Nu, tas ir tikai rieciens sintaksi. AtvÄrt kronÅ¡teins, atslÄgvÄrds, slÄgta kronÅ¡teins, ir tag. Vai sÄkt tag. Un tad, kad tu esi darÄ«ts izteikt sevi, kÄ jÅ«s esat pabeidzis ar punktu, jÅ«s darÄ«t runÄt pretÄjo. Bet pretÄ« nav gluÅ¾i atpakaÄ¼. 

JÅ«s vienkÄrÅ¡i prefiksu pats tag s nosaukt ar slÄ«psvÄ«tra, kÄ Å¡is. Viss kÄrtÄ«bÄ. TÄtad ne viss, kas aizraujoÅ¡s. Un patiesÄ«bÄ, mÄs esam ne padarot web viss, kas vÄl interesantÄku. Ko darÄ«t, ja es gribu, lai lietas lielÄki un treknrakstÄ? TÄtad izrÄdÄs, ka Å¡eit ir piemÄrs in headings.html, kur manÄ Ä·ermenÄ«, Man ir H1 tagu, H2, H3, Äetriem, pieciem, seÅ¡iem vai, kas visi likties diezgan arcane. Bet, ja es eju atvÄrt Å¡o PiemÄram, pieÅemsim to apskatÄ«t. Headings.html. 

TÄtad pÄrlÅ«ki pÄc noklusÄjuma var dot jums teksta tas ir liels un drosmÄ«gs ar atÅ¡Ä·irÄ«gu izmÄru. H1 ir liels. H6 ir mazÄks un pÄc tam viss pÄrÄjais pa vidu. TÄtad tas ir interesanti, bet joprojÄm nav Ä«sti web es zinu. Ko darÄ«t, ja mÄs gribam, lai man ir kaut kas lÄ«dzÄ«gs sarakstÄ. . TÄtad, Å¡eit ir aizzÄ«mÄm saraksts TrÄ«s no Harvardas namu. 

KÄ jÅ«s iet par to izdarÄ«t? Nu, ieskatieties list.html. Un Å¡eit mÄs redzam Mazliet funkiness bet pieÅemsim apsvÄrt to, kas notiek. TÄtad, pamatojoties uz to, ko jÅ«s esat tikko redzÄjÄm, UL stendi NekÄrtots saraksts. NekÄrtots saraksts tikai nozÄ«mÄ aizzÄ«mÄm. Nav numuri. Tur ir arÄ« kaut kas sauc pasÅ«tÄ«ts sarakstu, kas ir OL pie tag. Tad LI, saraksts prece ir viss tas nozÄ«mÄ. 

Un tÄ tas automÄtiski numuri viss jums. Bet atkal, visas manas iespiedumiem un baltÄ telpa ir tikai manis dÄÄ¼. PÄrlÅ«ks nav faktiski gatavojas rÅ«pÄties. TÄtad, pat ja jÅ«s nevar to izdarÄ«tu, vienkÄrÅ¡i, lai bÅ«tu skaidrs, Jums nevajadzÄtu pat ja PÄrlÅ«kprogramma vÄl jÄspÄj saprast to tikai naudas sodu. Es esmu hitting reload manÄ pÄrlÅ«ku, es esmu noklikÅ¡Ä·inot reload un nekÄdas izmaiÅas notiek jo pÄrlÅ«kÄ vÄl darot tieÅ¡i to, ko es saku to darÄ«t. 

Viss kÄrtÄ«bÄ. TÄtad tas ir viss ir tikai teksts. Tagad pieÅemsim kaut ko interesantu darÄ«t. Es ieÅ¡u uz priekÅ¡u un aizÅemties kÄdu no Å¡o HTML. Es ieÅ¡u uz priekÅ¡u un izveidot jaunu failu Å¡eit. Un mÄs to saucam par rick.html. Mums ir nesamÄrÄ«gi Lietotas kaut sauc rick roll Å¡ajÄ klase Å¡ogad, es nezinu, tas vienkÄrÅ¡i notika organiski. 

Un tagad tas ir got no kontroles. TÄpÄc es esmu tikai gatavojas iet ar to. Un, ja es eju uz Google AttÄli un Rick Astley. Ja jÅ«s nezinÄt, kÄpÄc mÄs to darÄm Tas, tikai lasÄ«t lÄ«dzi Wikipedia. Katru reizi, kad esat noklikÅ¡Ä·inÄjis uz saites, kÄds ir bijis kaut kur smejas. Un Ä¼aujiet man iet uz turieni ahead-- mÄs ejam, pieÅemsim apskatÄ«t Å¡o attÄlu. 

TÄtad Å¡eit mums ir attÄls Google attÄli. Un pieÅemsim, ka tas ir saprÄtÄ«gi visur internetÄ. TÄpÄc es esmu gatavojas pieÅemt, tas ir OK, lai mani faktiski Ä«stenot Å¡o manÄ mÄjas lapÄ. Es ieÅ¡u uz priekÅ¡u un kopÄt attÄla URL. Un tagad, ja es dodos atpakaÄ¼ uz Cloud 9, pieÅemsim redzÄt, ko es varu darÄ«t Å¡eit. TÄtad, Å¡eit ir tikai mÄjas lapa. Tas ir Rick Astley, haha, Es esmu gatavojas tagad iet atpakaÄ¼ manu pÄrlÅ«ku, papildinÄÅ¡anas, un interesants. 

Kur ir Rick? TÄpÄc Ä¼aujiet man redzÄt to, kas ir noticis. PatiesÄ«bÄ, es esmu gatavojas izlikties, piemÄram, es to nedarÄ«ju. [Dzirdams] nodot viÅam Å¡eit. MÄs bÅ«sim atpakaÄ¼, ka pÄc brÄ«Å¾a. TÄtad, Å¡eit ir rick.html. TÄtad tas nav Rick Astley. TÄtad izrÄdÄs, mÄs varam faktiski pievienot viÅu Å¡eit. Tas ir Rick Astley. Es esmu gatavojas teikt sniegt man tÄlu, kura avots ir URL es tikko kopÄts, kas acÄ«mredzot ir laimÄ«gs dzimÅ¡anas kaut vai otru. 

Un tagad es esmu gatavojas aizveriet kÄ Å¡is tag. TÄtad Å¡is ir iesaiÅoÅ¡ana super garÅ¡. Bet paziÅo, ka viss, ko es esmu darÄ«ts, ir atvÄrts bracket attÄls, avots ar atribÅ«ts Å¡o. Un tas ir Ä¼oti garÅ¡ URL. Un paÅ¡Äs beigÄs, Å¡is paziÅojums. KÄpÄc es esmu darÄ«jis slash leÅÄ·veida kronÅ¡teins tÄ vietÄ, lai, tÄpat kÄ visi citi tag, kam atklÄtu kronÅ¡teinu, IMG, slÄgta kronÅ¡teinu? Just veikt uzminÄt pat ja jÅ«s nav familiaritÄte whatsoever ar HTML pirms tam. 

TÄtad, tas ir, kÄ tas aizveras komanda, bet kÄpÄc tas nav Ä«sti darÄ«t intuitÄ«vi jÄga kaut ko darÄ«t nedaudz vairÄk runÄ«gs tÄpat aizvÄrt attÄlu? JÄ. JÄ. Just semantiski, nav sajÅ«tu sÄkot attÄlu un beidzot attÄlu, Tas ir vai nu tur, vai tÄ nav. TÄtad tas nav jÄgas atstÄt plaisu kaut kas cits iekÅ¡pusÄ attÄlu. JÅ«s vienkÄrÅ¡i nevar darÄ«t. Un tÄ sintakse kopumÄ bÅ«tu tikai darÄ«t slÄ«psvÄ«tra iekÅ¡Ä atvÄrtÄs tag vai starta tag un pÄc tam nospiediet SaglabÄt. 

TÄtad, ja es tagad pÄrlÄdÄt Å¡o failu, tagad Man labu interneta lapu vÄrÄ«Å¡anas Å¡eit. Un mÄs noteikti varÄtu tieÅ¡Äm kaitina cilvÄki , iestrÄdÄjot vietÄ piemÄram, YouTube saiti. Un patiesÄ«bÄ, jebkurÄ laikÄ esat kÄdreiz devies uz YouTube, un Ä¼aujiet man patieÅ¡Äm nejauÅ¡i rick roll sevi Å¡eit. TÄtad Rick roll. TÄtad rick roll-- es ieÅ¡u Å¡eit. 

[MÅ«zikas atskaÅoÅ¡anai] 

OK, viens cilvÄks patika. TÄtad paziÅojums visu Å¡o laiku, ja jums noklikÅ¡Ä·iniet uz Koplietot saiti, jÅ«s, protams, iegÅ«t URL, ka jÅ«s faktiski var iegultu e-pastu vai tiesu medicÄ«nas attÄlu vai ar problÄmu, kas vai ar a slide. Un tagad, ja es tÄ vietÄ noklikÅ¡Ä·iniet uz embed, ievÄrosiet, ka visu Å¡o laiku, Å¡Ä« stuff ir tur. Es ieÅ¡u uz priekÅ¡u un kopÄt to. 

Un tikai, lai mÄs varÄtu redzÄt labÄk, es esmu gatavojas ielÄ«mÄt to manÄ teksta redaktoru. IevÄrojiet, ka tas, ko YouTube ir stÄsta jums. Katru reizi, kad apmeklÄjat YouTube video, ja jums vÄlaties, lai iegultu video par jÅ«su mÄjas lapa, vienkÄrÅ¡i paÄ·ert to. TÄtad Å¡is ir vÄl viens HTML tagu sauc iframe. Vai in lÄ«nijas rÄmi. TÄtad, tas ir pÄrÄk izskatÄs mazliet vairÄk sareÅ¾Ä£Ä«tÄka nekÄ visiem pÄrÄjiem. TÄtad izrÄdÄs, ka attÄlu tag un acÄ«mredzot iframe tag Åemt to, ko sauc atribÅ«ti. 

Un tas ir vÄl viens gabals sintakses HTML. Papildus tag s nosaukums, open kronÅ¡teins tag nosaukums, jÅ«s varat kontrolÄt uzvedÄ«bu tagu , Åemot visu Ä·ekars atribÅ«ta ir vienÄds ar vÄrtÄ«bu. AtribÅ«ts vienÄds vÄrtÄ«bu. Un tÄ piemÄram, YouTube ir stÄsta mums ja jÅ«s vÄlaties, platumu Å¡o video bÅ«t 420 pikseÄ¼i un augstums lai bÅ«tu 315 pikseÄ¼i, kas ir kÄ jÅ«s izteikt to HTML. 

Par video avots notiek lai bÅ«t, ka ilgi YouTube URL un pÄc tam daÅ¾i citi sÄ«kumi tÄpat rÄmis robeÅ¾a ir nulle, tÄ ka, iespÄjams, nozÄ«mÄ, ka ir nav robeÅ¾u ap lieta. AtÄ¼aut visu ekrÄnu, iespÄjams, nozÄ«mÄ, ka lietotÄjs var noklikÅ¡Ä·inÄt uz pogas un faktiski pilna ekrÄna video. TÄtad, ja es tieÅ¡Äm gribu bÅ«t iespaidÄ«gs Å¡eit Rick dot HTML, nevis izmantot attÄla tagu, Ä¼aujiet man dzÄst, ka tÄ vietÄ, lai ielÄ«mÄtu to. Un tagad pÄrlÄdÄt. Un tagad Å¡eit mÄs aiziet vÄlreiz. Labi, tas ir pietiekami. Visas tiesÄ«bas tÄpÄc es centÄ«Å¡os grÅ«ti nav to darÄ«t atkal. TÄtad, kÄdi ir daÅ¾i no takeaways Å¡eit? TÄtad HTML, kÄ neglÄ«ts kÄ Å¡ajÄs mÄjas lapÄs ir, ir faktiski diezgan vienkÄrÅ¡s. Tas nav programmÄÅ¡anas valoda. Tas nav funkcijas. Tas nav cilpas. Tas nav nosacÄ«jumiem. Viss, kas ir, ir desmitiem daÅ¾Ädi tags, katrs no kuriem ir nulle vai vairÄk atribÅ«tus. Un patiesÄ«bÄ, kas ir jautri par HTML, kÄ jÅ«s sÄkat nodoties ir tas, ka tas ir Ä¼oti sevi teachable. 

Viss, kas nepiecieÅ¡ams, ir izpratne vispÄrÄjÄ sistÄmÄ HTML. Kas ir tag, kas ir atribÅ«ts, KÄ jÅ«s faktiski konfigurÄt tÄ«mekÄ¼a lapu sekojoÅ¡i. Un viss pÄrÄjais ir patieÅ¡Äm rezultÄts meklÄ up tieÅ¡saistes atsauce vai googling kÄ to izdarÄ«t daÅ¾us paÅÄmiens vai kÄ mÄs esam redzÄjuÅ¡i, apskatot Facebook avota kods, aplÅ«kojot mÄjas lapÄ ka jums patÄ«k pie tÄ ir pirmkodu un saprast, kÄ izstrÄdÄtÄji tur faktiski noteiktas lietas. 

TÄtad, mÄs varam darÄ«t, attÄlus, kÄ arÄ«. Un patiesÄ«bÄ, mÄs to darÄ«ja pirms brÄ«Å¾a. Ä»aujiet man iet uz priekÅ¡u un tikai parÄdÄ«t jums. LÅ«k, daÅ¾i parauga kodu. Ja jÅ«s kÄdreiz vÄlaties redzÄt kaÅ¡Ä·Ä«gs kaÄ·is. TÄpÄc ievÄrosiet, ka es varu ir attÄla tagu Å¡eit. Un man komentÄru virs tÄ. Man alternatÄ«va teksta pieejamÄ«bas. TÄtad, kÄds, kurÅ¡, izmantojot ekrÄnu lasÄ«tÄjs dÄÄ¼ redzes var faktiski tad ir viÅu ekrÄna lasÄ«tÄjs saka kaÅ¡Ä·Ä«gs kaÄ·is. Jo, ja viÅi nevar redzÄt attÄlu, viÅi var vismaz bÅ«t savu datoru pateikt viÅiem mutiski, kas tas ir. Un avots Å¡ajÄ failÄ ir cat.jpeg. TÄtad faktiski, ja es patieÅ¡Äm gribÄju get gudrs, ko es varÄtu bÅ«t done-- Es apsolu neiet uz Rick Astley, tÄpÄc Es esmu gatavojas google kaÄ·is vietÄ. Un, ja es eju uz Google Images Å¡eit, un mÄs pieÅemam ka tas ir priekÅ¡statu par manu kaÄ·i. 

PieÅemsim, ka man ir kontrole noklikÅ¡Ä·inÄjuÅ¡i vai pa labi noklikÅ¡Ä·inÄjis uz to, nejauÅ¡i rÄpojoÅ¡s. Un cat.jpeg es eju ietaupÄ«t uz mana galda. Ä»aujiet man tagad iet atpakaÄ¼ uz mÄkoni 9. IevÄrojiet, ka Å¡eit, es varu iet augÅ¡upielÄdÄt lokÄlos failus. Un, ja es greifers Å¡o fails, cat.jpeg, paziÅojums ka es varu vilkt to un nometiet to mÄkonis 9 un tas notiek, lai kliegt uz mani Å¡eit. 

TÄpÄc, ka mÄs esam jau devis jums cat.jpeg failu, bet tas ir super viegli paÄ·ert fotoattÄlu, ka jÅ«s esat Åemts no Facebook vai Flickr vai tamlÄ«dzÄ«gi un faktiski vilkt un nomest to uz mÄkonis 9, un tad dara to daÄ¼a no jÅ«su personÄ«gajai mÄjas lapÄ vai problÄma noteikti septiÅi vai astoÅi, kÄ mÄs drÄ«z redzÄt. Un tad, kad jÅ«s beidzot apmeklÄt Å¡o kaÄ·i, pieÅemot, ka es lejupielÄdÄt Å¡o paÅ¡u kaÄ·is, paziÅojums that-- tas bija burvÄ«ga. 

Ko jÅ«s redzat ir kaut kas lÄ«dzÄ«gs Å¡im seju Å¡eit. TÄtad failiem, LÅ«gums ietvaros mÄjas lapÄ var bÅ«t vai nu vietÄjÄ savÄ konts vai vadÄ«ba uz kÄdu citu serveri kÄ gadÄ«jumÄ ar Rick Astley foto mazliet atpakaÄ¼. TÄtad, ja else-- ko vÄl mÄs varam darÄ«t Å¡eit? TÄtad, pieÅemsim to apskatÄ«t turpmÄk. JÅ«s zinÄt, kas ir sava veida atdzist? 

LÄ«dz Å¡im mÄs esam pieÅemÅ¡anas Ä¼oti statiskÄs tÄ«mekÄ¼a lapas. Es gribu, lai spice lietas uz augÅ¡u Å¡Ädi. Es vÄlos, lai mana meklÄtÄjprogrammu. TÄpÄc, lai padarÄ«tu meklÄtÄjprogrammu, pieÅemsim iet uz priekÅ¡u un sÄkt darÄ«t to. Es ieÅ¡u uz priekÅ¡u un radÄ«t jaunu failu sauc search.html. Un mÄs esam prefabed versijas tieÅ¡saistÄ. Whoops. Nelietojiet ielÄ«mÄt jÅ«su terminÄla logÄ. PaneÄ¼u versijas tieÅ¡saistÄ. Un es esmu gatavojas sÄkt Å¡Ädi. TÄtad, Å¡eit ir sÄkums failu sauc search.html. Es esmu gatavojas, lai saglabÄtu to Å¡odienas avots direktorijÄ. Es esmu gatavojas, lai izsauktu Å¡o meklÄÅ¡ana. PatiesÄ«bÄ, mÄs padarÄ«t to labÄku. CS50 Search un faktiski zÄ«molu tÄ. Un tagad, es esmu gatavojas teikt kaut kÄ H1 CS50 MeklÄt. Un tad uz leju Å¡eit, H2 DrÄ«zumÄ. Un tikai vÄlreiz apkopot, H1 un H2 nozÄ«mÄ ko attiecÄ«gi? 

JÄ, tik liels un drosmÄ«gs, un nav tik liels, bet tomÄr treknrakstÄ. TÄtad, ja es glÄbt Å¡o un iet vairÄk nekÄ Å¡eit, pieÅemsim redzÄt faila search.html. Visi pa labi, un Å¡is viens ir right-- [nedzirdama]. StÄvÄt. Deivids ir sajaukt. Ak, tas ir labi tur. Deivids ir idiots. LABI. TÄtad tas ir. TÄtad CS50 meklÄÅ¡ana DrÄ«zumÄ. TÄpÄc tagad, pieÅemsim sintezÄt ko mÄs darÄ«jÄm pagÄjuÅ¡ajÄ nedÄÄ¼Ä. 

Kur mÄs runÄjÄm par zemÄka lÄ«meÅa mehÄnika HTTP. Un Å¡ie jaunas idejas HTML, kas ir tikai Tas iezÄ«mÄÅ¡anas valoda, kurÄ jÅ«s pastÄstÄ«t pÄrlÅ«kprogrammu tieÅ¡i to, ko darÄ«t un Ä«stenot savu meklÄtÄjprogrammu. TÄ vietÄ, lai vienkÄrÅ¡i sakot DrÄ«zumÄ, es esmu gatavojas ieviest kaut kas ko sauc par veidlapu tag. Un Å¡ÄdÄ veidÄ, es esmu gatavojas ir kaut kas lÄ«dzÄ«gs ievades laukÄ. 

Un sauc Å¡o ieguldÄ«jumu lauka, es esmu gatavojas, lai izsauktu to Q. Un Å¡Ä« ievades lauka tips Es esmu gatavojas teikt, ir tikai "tekstu". Un teksta lauks, kÄ mÄs redzÄt, ir tikai teksta lodziÅÄ. Un tÄ tas nav sajÅ«tu Å¡eit ir kaut iekÅ¡pusÄ tÄ Å¡ajÄ brÄ«dÄ«. Un tÄpÄc es esmu vienkÄrÅ¡i dodas slÄgt tagu ar ka slÄ«psvÄ«tra tiesÄ«bas tag pati. Un tad es esmu gatavojas ir viena otru ieeju. Ieejas tips vienÄds iesniegt. Un tad es esmu gatavojas aizvÄrt Å¡o vienu too. 

Un tagad es esmu gatavojas doties atpakaÄ¼ Å¡eit. Un jau mÄs redzam, kaut arÄ« diezgan neglÄ«ts, es esmu ieguva sÄkumu mana meklÄÅ¡anas lapa Å¡eit. PatiesÄ«bÄ, Ä¼aujiet man mÄÄ£inÄt sakopt Å¡o augÅ¡u mazliet. IzrÄdÄs, ka uz ievade Å¡eit, es varu bÅ«t cits atribÅ«ts sauc vietturis. Un es varÄtu redzÄt kaut ko lÄ«dzÄ«gu atslÄgvÄrdu, vai precÄ«zÄk, vaicÄjumu par q. 

Un paziÅojums, tagad, man ir Å¡Äda veida pelÄkÄ krÄsÄ ka pazÅ«d kÄ TiklÄ«dz es sÄku rakstÄ«t, bet tas ir iespÄjams, kaut jÅ«s esat redzÄjis citÄs mÄjas lapÄs. Man nav Ä«sti nepatÄ«k pogas Iesniegt. TÄpÄc es esmu patieÅ¡Äm gatavojas dot Pogas Iesniegt vÄrtÄ«bu meklÄjumos. Un tagad, ja es pÄrlÄdÄt, ievÄroju, ka mana poga kÄ¼Å«st nosaukts meklÄÅ¡anu. Ziniet, man nav Ä«sti tÄpat logotipu Å¡eit. TÄtad Google Fonts Ä£enerators. 

Es gribu, lai spice up Å¡o tÄlÄk. TÄtad CS50 meklÄÅ¡anu. Ä»aujiet man izveidot savu logo. Tas izskatÄs jauki. TÄpÄc tagad Ä¼aujiet man glÄbt Å¡o as-- come on. Ja tas notiek? Tur. LABI. NeatbildÄtos to. SaglabÄt kÄ. Stulba pÄrlÅ«kprogrammÄm. Stand by, mÄs ejam, lai noteikt Å¡o vienreiz un par visÄm reizÄm. Tur mÄs ejam. Viss kÄrtÄ«bÄ. Piedodiet. Off diena. Tagad tas ir bailÄ«gs. Iziet no pilnekrÄna reÅ¾Ä«ma. Viss kÄrtÄ«bÄ. 

Tagad, tÄpat kÄ normÄls persona, saglabÄt attÄlu kÄ. Logo.gif. Tagad es ieÅ¡u uz CS50IDE un Es esmu gatavojas vienkÄrÅ¡i paÄ·ert logo, Es esmu gatavojas velciet to mans avots septiÅi katalogs, fails jau pastÄv, es esmu OK ar to. TÄpÄc es esmu gatavojas ignorÄt to jo man jau bija tÄ. Un tagad, kÄ es varu atbrÄ«voties no Å¡Ä«? 

Iesim uz priekÅ¡u Å¡eit un darÄ«t Image Source vienÄds logo.gif. AizvÄrt Å¡o. SaglabÄt. Un tagad, ja es dodos atpakaÄ¼ uz manu meklÄÅ¡anu lapas, Å¡obrÄ«d tas meklÄ diezgan laba. Visas tiesÄ«bas, tÄpÄc tas ir ne diezgan izdarÄ«jis kaut ko noderÄ«gu. PatiesÄ«bÄ, Ä¼aujiet man mÄÄ£inÄt meklÄt par kaÄ·i un redzÄt, kas notiek. KaÄ·i. SasodÄ«ts. Tas nav tikai darbs, acÄ«mredzot. TÄtad, kas ir galvenais gabals ka trÅ«kst Å¡eit? 

TiesÄ«bas, pat ja jÅ«s nezinÄt nevienu HTML, Esmu sÄcis marÄ·Äjums up tÄlruÅa formu un es esmu teicis to, kÄ iegÅ«t izejvielas, man tekstlodziÅu un iesniegt poga, ko gabals ir acÄ«mredzami trÅ«kst? PieÅemsim, ka mÄs vÄlamies, lai faktiski nokÄ¼Å«t Å¡Ä« lieta darbojas pareizi. Kas mums jÄdara? Mums ir nepiecieÅ¡ams, lai Ä«stenotu atpakaÄ¼ beigÄm datubÄzes vai meklÄtÄjprogrammu pati, un kas notiek, lai paiet visai daudz laika, atklÄti sakot. 

TÄtad, atcerÄties to, ko mÄs darÄ«jÄm pÄdÄjo reizi. TÄtad, ja jÅ«s meklÄt kaut ko Google un jÅ«s esat jau iepriekÅ¡ izslÄgts, Atsaukt, instant meklÄÅ¡anu. TÄpÄc Ä¼aujiet man vÄrsties, kas off tÄ, ka tas faktiski uzvedas kÄ vecÄku skolas pÄrlÅ«ku, ja es tagad meklÄtu kaut ko lÄ«dzÄ«gu kaÄ·iem, atgÄdinÄt to, ko URL izskatÄs. Tas ir diezgan noslÄpumains. Bet iestrÄdÄts tur, Atsaukt, ir slÄ«psvÄ«tra meklÄÅ¡anu. JautÄjuma zÄ«me Q ir vienÄds kaÄ·iem. 

Un tas, Å¡Ä·iet, dod man viss Ä·ekars meklÄÅ¡anas rezultÄtiem. TÄtad, jÅ«s zinÄt, ko es esmu gatavojas darÄ«t? Es esmu gatavojas aizÅemties Google tikai minÅ«ti. Es ieÅ¡u pa Å¡eit, un es esmu gatavojas teikt ka tas veido rÄ«cÄ«bu vai galamÄrÄ·is, tÄ sakot, vajadzÄtu burtiski bÅ«t Google. Un metode es gribÄju to izmantoÅ¡ana bÅ«s minimÄli. 

TÄtad, kas ir rÄ«cÄ«ba? RÄ«cÄ«ba ir weirdly nosaukts, bet tas tikai nozÄ«mÄ, kurÅ¡ gatavojas rÄ«koties Å Ä«s veidlapas rÄ«cÄ«ba? Kad es noklikÅ¡Ä·iniet uz MeklÄt, kur bÅ«tu rezultÄts iet? Un, ja es tagad iet atpakaÄ¼ uz manu formu Å¡eit un pÄrlÄdÄt savu mÄjas lapu un tagad meklÄt kaut ko piemÄram, suni, paziÅojums tagad Esmu atkal Ä«stenoti Google. TiesÄ«bas? 

Ja es gribu, lai meklÄtu kaut ko cits, tas darbojas ne tikai suÅiem, tas darbojas arÄ« kaÄ·iem. TÄ arÄ« strÄdÄ CS50. Un OK, tas ir tikai zem whelming, vai ne? Viss labi, bet tÄ faktiski darbojas. TÄtad, kas ir faktiski notiek? TÄpÄc es esmu mÄcÄ«jis manu pÄrlÅ«ku, izmantojot HTML, lai Åemtu informÄciju no lietotÄja un faktiski nosÅ«tÄ«t Å¡o ievade ar attÄlo serveri, izmantojot HTTP. 

Un tÄpÄc, ka manÄ pÄrlÅ«kprogrammÄ saprot HTTP, tÄ faktiski bÅ«vÄt lai tas, ko URL Es galu galÄ pÄr manu pÄrlÅ«ku, paziÅojums, kas notiek kad es meklÄja suns. Ja es noklikÅ¡Ä·iniet uz MeklÄt, ievÄrosiet, ka URL izmaiÅas, kÄ es paredzÄts lai google.com/search~~V vaicÄjumu vienÄds suns. Un tas ir tÄpÄc, ka veidÄ zina, jo metode ir iegÅ«t, vienkÄrÅ¡i pievienot to Å¡o URL tur. 

Tagad, lai Å¡Ä«s mÄjas lapas vÄl ir neglÄ«ts. TÄtad pieÅemsim iepazÄ«stinÄt viens otru gabals sintakses ja mÄs varam Å¡odien. Un tas ir kaut kas zinÄms kÄ kaskÄdes stila lapas. TÄpÄc Ä¼aujiet man to apskatÄ«t Å is piemÄrs Å¡eit un redzÄt ja mÄs varam secinÄt, kas notiek. Tas ir CSS0.html. Un tas ir, ja lietas saÅemt nedaudz neglÄ«ts. Jo diemÅ¾Äl, pasaulÄ tÄ«meklÄ«, HTML vien nevar darÄ«t visu. Un tÄ, ja jÅ«s vÄlaties, lai stylize jÅ«su mÄjas lapÄ, jums tieÅ¡Äm ir nepiecieÅ¡ams koncentrÄties uz estÄtika savÄdÄk. TÄtad Å¡eit, man ir Ä·ermeÅa manu web lapa iekÅ¡pusÄ, kas ir liels div. Un div tikai nozÄ«mÄ sadalÄ«jumu. TÄtad tas ir kÄ punkts, bet tas nav tÄdas paÅ¡as semantiku no daÄ¼as tekstu. 

Tas tikai nozÄ«mÄ, uz pÄrlÅ«ku, Å¡eit nÄk liels taisnstÅ«ra reÄ£ions manas mÄjas lapa, es gribu rÄ«koties ar to speciÄli. Tagad, lÄ«nija 21 ir, ja tas div sÄkas. Un tikai veikt minÄjums. KÄda ir ietekme lÄ«nijas 21 par pÄrÄjie lapas saturu? CentrÄÅ¡anas to. Tas ir viss. TÄtad mÄs neesam redzÄjuÅ¡i ceÄ¼u faktiski centrÄÅ¡anas tekstu. 

Faktiski, mans meklÄtÄjprogrammu, atÅ¡Ä·irÄ«bÄ no faktiskÄ Google, viss bija pamatots pÄri pa kreisi. Un tÄpÄc tagad rindÄ 21, es saku, hey pÄrlÅ«ku, izveidot sadalÄ«jumu lapÄ. DÄvini man liels, neredzams taisnstÅ«ri. Tas ir, kÄ es gribu domÄt par mÄjas lapÄ. Un tad stylize to Å¡Ädi. Inside Å¡o citÄtus, Tagad, ir otrÄ valoda ka mÄs iepazÄ«stinÄja Å¡odien sauktie kaskÄdes stila lapas. Par laimi, tas arÄ« nav programmÄÅ¡anas valoda, tÄpÄc tas ir Ä¼oti ierobeÅ¾oti savÄ sintaksi, bet arÄ« Ä¼oti ierobeÅ¾ota tÄs funkcionalitÄti tÄ kÄ HTML ir visu par marÄ·ÄÅ¡ana up datus mÄjas lapÄ un struktÅ«ra Web lapu. CSS ir parasti apmÄram tÄds pÄdÄjÄ jÅ«dze, estÄtika, iegÅ«t izmÄru un krÄsu un izvietoÅ¡ana tieÅ¡i labi, kas mÄjas lapÄ. Un patieÅ¡Äm, tÄ ir izveidota ar galveno vÄrtÄ«bu pÄrus. 

ÄªpaÅ¡ums kÄ Å¡is, tekstÄ saskaÅot, kam seko kols, kam seko vÄrtÄ«bas, kas iestÄdÄ, kas Å¡ajÄ gadÄ«jumÄ ir centrs. Un tagad pamanÄ«s var ligzdot Å¡Ä«s lietas. Ja es gribÄju visu, kas Es esmu uzsvÄrusi, kas centrÄts, tÄpÄc man ir lÄ«nija 21 un atbilstoÅ¡ajÄ rindÄ 31. Bet pieÅemsim, ka tagad gribu pateikt JÄni Harvard, welcome uz manu mÄjas lapÄ. 

Copyright simbols John Harvard. Un domÄju, ka es vÄlos, lai vispirms Å¡o lÄ«niju bÅ«t diezgan liels. 36 pikseÄ¼i. TÄtad tas ir pienÄcÄ«gas lieluma. Un es gribÄju savu svaru bÅ«t drosmÄ«gs. Bet tad zemÄk, ka Es gribu mazÄku tekstu. Un tÄlÄk, ka es gribu vÄl mazÄka tekstu. Piedodiet. Å odien jÅ«tas kÄ BrÄ«vdiena. 

TÄpÄc tagad, ko es daru, lai paustu Å¡o? Å eit on line 22 ir iegultÄs div vai ligzdotu div, ja Jums gribas. TÄ arÄ« ir savs stils tag. Es norÄdÄ«t fonta izmÄru 36. Es norÄdÄ«t fontu svaru treknrakstÄ. Down Å¡eit, es tikai norÄdÄ«t 24 pikseÄ¼i. Un visbeidzot, atbilstoÅ¡i 28., varu norÄdÄ«t 12. Tik vienkÄrÅ¡i kÄ Ätri veselÄ«ba pÄrbaudÄ«tu un kÄ cilvÄks lasot Å¡o, kurus vÄrdus uz ekrÄna ir faktiski bÅ«s drosmÄ«gs? Kuras lÄ«nijas ir patieÅ¡Äm drosmÄ«gs? 

VienkÄrÅ¡i John Harvard. TiesÄ«bas? Jo tÄpat kÄ lÄ«nija 22 saka hey pÄrlÅ«ku, Å¡eit ir sadalÄ«jums lapas. Padariet to burtu lielums 36 punktu. PadarÄ«t fonta svars treknrakstÄ. TiklÄ«dz jÅ«s sasniegsiet atbilstoÅ¡ais end tag vai slÄgta tag on line 24, tas nozÄ«mÄ, hey pÄrlÅ«ku, pÄrtraukt darÄ«t kÄds tas ir jÅ«s darÄt. Un paziÅojums, lai bÅ«tu skaidrs, kaut arÄ« line 22 ir visi no Å¡iem atribÅ«tiem lÄ«dzÄ«ga stila, kad jÅ«s aizvÄrt tagu rindÄ 24, Jums tikai minÄt tag vÄrdu. 

Jums nav atkÄrtot vÄrdu stilu vai kaut kas ir iekÅ¡Ä Å¡os citÄtus. Un tÄpÄc, ja es paskatos Å¡o tagad manÄ pÄrlÅ«kprogrammÄ, pieÅemsim apskatÄ«t gala rezultÄtu. Laid mani priekÅ¡u, lai Å¡o failu, kas ir CSS 0. Un tas joprojÄm ir diezgan vienkÄrÅ¡s, bet kÄ¼Å«st diezgan interesants. Bet izrÄdÄs, tur ir citas lietas, ko es varu darÄ«t Å¡eit, un pie pastÄv risks, ka Tas pilnÄ«gi pretÄ«gs, ievÄrosiet Å¡eit, ka manÄ Ä·ermenis manÄ mÄjas lapÄ, Es varu darÄ«t kaut ko funny piemÄram, BG vai fona krÄsu. 

Un Ätri, kÄda ir jÅ«su mÄ«Ä¼ÄkÄ krÄsa? Green es dzirdÄju. Viss kÄrtÄ«bÄ. TÄpÄc tagad, ja es hit reload tagad, mums ir zaÄ¼Ä mÄjas lapÄ. Labi, tÄ ka tas nav slikti. Un tagad, ja es gribu, lai tas patieÅ¡Äm cool, es varu darÄ«t krÄsu mana teksta pat sarkanÄ krÄsÄ. TÄtad, pieÅemsim redzÄt, kÄ tas izskatÄs. Tagad tas meklÄ diezgan laba. Un Å¡eit lejÄ, ja jÅ«s patieÅ¡Äm gribu sajaukt ar kÄdu vai, ja jÅ«s vÄlaties bÅ«t viens no tiem cilvÄkiem, kas mÄÄ£ina triks jÅ«s vÄrÄ apmeklÄjot web lapa jo viÅi apspÄlÄja Google domÄt, tur ir viss Ä·ekars no atslÄgas vÄrdi like-- pieÅemsim redzÄt, pÄrlÄdÄt. Ja tas iet? Un tur tas mÅ«s. Viss kÄrtÄ«bÄ. TÄpÄc es saku kÄ malÄ, mÄs runÄt par Å¡o stuff pÄc daÅ¾Äm nedÄÄ¼Äm kad mÄs runÄjam par droÅ¡Ä«ba, ja jums tieÅ¡Äm iegult veselas Ä·ekarus AtslÄgas vÄrdi, kas mÄjas lapÄ, pat tad, ja viÅi nav pamanÄma cilvÄks, kÄds, piemÄram, Google, protams, joprojÄm var reÄli atrast Å¡o. Labi, tÄ ka ir diezgan pretÄ«gs diezgan Ätri. 

Un patiesÄ«bÄ, tas vÄl nav viss ka daudz atÅ¡Ä·irÄ«bÄ no manas mÄjas lapa kÄ undergraduate, kas Es sÄku googling apkÄrt, lai atrastu pagÄtnes versijas manas vecÄs mÄjas lapÄm. Tas bija diezgan slikti. PatiesÄ«bÄ, es tomÄr atrast viens tieÅ¡i pirms klasÄ. Bet tur ir sliktÄks, kas tur. Tas acÄ«mredzot bija mans mÄjas lapa atpakaÄ¼ 1996. gadÄ. AcÄ«mredzot es domÄju, tas bija lietderÄ«gi lÅ«gt cilvÄkus savu vÄrdu pirms tie varÄtu faktiski redzÄt manu mÄjas lapÄ. 

Un tad es viÅiem parÄdÄ«ja kaut ko stulbu, droÅ¡i vien. Es izrakt vairÄk nÄkamajai reizei. Bet tagad, pieÅemsim apsvÄrt mazliet dizainu. MÄs esam runÄjuÅ¡i par stilu. Un Å¡Ä«s lapas lÄ«dz Å¡im un visvairÄk viss, ko es esmu uzrakstÄ«jis ir diezgan tÄ«rs stilistiski. Bet ko par dizainu? Nu, tur ir daudz atlaiÅ¡anas ko es esmu dara Å¡eit. 

Es esmu minÄts vÄrds krÄsa pÄris vietÄs. Es esmu minÄts burtu lielumu pÄris vietas un drosmÄ«gs pÄris vietÄs. Un bÅ«tÄ«bÄ, es esmu co sajaukÅ¡anos divas valodas. Man HTML ar saviem tagiem un mans atribÅ«ti un tad visi pÄkÅ¡Åi, starp pÄdiÅÄm, man ir otrÄ valoda Å¡odien sauc CSS, kas atkal ir tikai tie galvenÄ vÄrtÄ«ba pÄri vai Å¡Ä«s Ä«paÅ¡Ä«bas atdalÄ«tas ar kolu. 

IzrÄdÄs, ka daudz tÄpat kÄ C, kur mÄs var sÄkt faktors out daÅ¾i kodu header failus, lai mÄs varam darÄ«t to paÅ¡u HTML. Un solis pretÄ«, ka ir Å¡Äds. IevÄrojiet, ka Å¡Ä« versija, CSS1.html ir strukturÄli tieÅ¡i tÄdu paÅ¡u mÄjas lapÄ. TÄpÄc es esam ieguvuÅ¡i visu Ä·ekars no divs, bet Å¡oreiz, es esmu gotten atbrÄ«voties no iesaiÅojuma div kÄ jÅ«s redzÄsiet. 

Un es esmu devis Å¡os trÄ«s divs augÅ¡ÄjÄ, vidÄjÄ un apakÅ¡ÄjÄ, unikÄls ID. Tas ir jauki, jo lÄ«dz dodot tiem Å¡Ä·elÅ¡anos lapas unikÄlo identifikatoru, Es var atsaukties tos citur. Kur? Nu, Ä¼aujiet man ritiniet uz augÅ¡u. Un lÄ«dz Å¡im, jebkurÄ laikÄ mÄs esam paskatÄ«jÄs pie galvas tÄ«mekÄ¼a lapas, kas ir vienÄ«gais tagu mÄs esam bija vadÄ«tÄjs mÄjas lapÄ? Mazliet skaÄ¼Äk. Tikai nosaukums lÄ«dz Å¡im. Bet izrÄdÄs, tur ir daÅ¾as citas lietas JÅ«s varat likt tur, vienu no kas tÄ sauc stils tag. TÄtad pirms brÄ«Å¾a, mÄs skatÄ«jÄmies pie stila atribÅ«tu. IzrÄdÄs tur ir stils tag. TÄ pieder iekÅ¡pusÄ vadÄ«tÄjs mÄjas lapÄ. Un tagad paziÅojums, ko es daru. Man ir iekÅ¡Ä Å¡is style tag Å¡Ädi. Es esmu burtiski minÄts on line 20 Nosaukums birku, ka es gribu stylize. 

Tad man ir atvÄrta cirtaini lencÄm un slÄgta cirtaini lencÄm. Tik lÄ«dzÄ«gs garÄ uz C, bet atkal, tas nav funkcija, tas ir tikai sintaktisko detaÄ¼a Å¡eit. Un tad, protams, es esmu stÄsta pÄrlÅ«ku, hey pÄrlÅ«ku, padarÄ«t visu Ä·ermeni lapas ir teksta izlÄ«dzinÄÅ¡anu centra. Un tad tas ir pateikt sekojoÅ¡o. Hey pÄrlÅ«ku, ja jÅ«s redzat HTML elements vai tag lapÄ ka ir unikÄls identifikators, kas top, tÄpÄc hash simbols Å¡eit nozÄ«mÄ tikai unikÄla ideja augÅ¡u, iet uz priekÅ¡u un padarÄ«t tÄs fonta izmÄrs 36 un tÄ fonta svars treknrakstÄ. 

Hey pÄrlÅ«ks, elements, kura ID ir vidÄja, panÄkot 24 pikseÄ¼i. Un hey pÄrlÅ«ku, ja jÅ«s redzÄtu Ideja apakÅ¡as, panÄkot 12 pikseÄ¼i. In beigÄs efekts ir tieÅ¡i sam. Ja es iedziÄ¼inÄties CSS 1, tad lapa izskatÄs vienÄdi. Bet mÄs esam solis nedaudz labÄks dizains. Ä»aujiet man tagad iet atpakaÄ¼ Å¡eit, lai CSS2 un redzÄt, ko vÄl es esmu darÄ«jusi. 

Tagad lapa ir Ä¼oti, Ä¼oti tÄ«rs. PatiesÄ«bÄ, es varÄtu fit visu saturs par lapÄ Å¡eit. Bet ko jaunu tagu ir I ieviests, protams? Link. Un tas nav labÄkais nosaukumu birku, jo tas nav posms nozÄ«mÄ ka mÄs to zinÄm, bet tas nozÄ«mÄ, saikne kÄdÄ citÄ failÄ. Tas ir veids kÄ asas iekÄ¼aut C. 

Tas ir veids, kÄ HTML teikt hey pÄrlÅ«ku, iet saÅemt saturu faila nosaukumu css2.css. AttiecÄ«bas, man, ir tas, ka tas ir stila lapas. Un tieÅ¡Äm, tas, ko viens no S grÄds CSS lÄ«dzekÄ¼iem. Tas ir stila lapas. Tas ir tikai teksta fails, kas satur visu Ä·ekars Ä«paÅ¡umu. Tas ir viss Ä·ekars stilu ka jÅ«s vÄlaties pieteikties uz lapu. 

Un tÄ tas acÄ«mredzot ir atsaucoties uz otro failu. Un, ja es atvÄrtu, ka CSS2.css, ievÄrosiet, ka viss, ko es esmu darÄ«jusi ir kopÄt un ielÄ«mÄt visu Tas Å¡ajÄ failÄ. Un tagad, pat ja jÅ«s nekad neesmu kodÄ Å¡o stuff pirms, tikai apsvÄrt ar proverbial inÅ¾enierija cepure on, kÄpÄc tas ir labÄks dizains, iespÄjams? Faktorings Å¡os CSS Ä«paÅ¡Ä«bas, liekot tos savÄ failÄ. Pat ja mÄs atrisinÄt Å¡o problÄmas, piemÄram, piecas minÅ«tes pirms paÅ¡Ä pirmajÄ versijÄ. 

MÄs esam nav uzlabojusies lapa stilistiski, tas ir tikai labÄk dizains savÄ ziÅÄ. KÄpÄc tu domÄ? JÄ. ElastÄ«gÄku kÄ? JÄ. TÄtad, ja jÅ«s vÄlaties, lai iet atpakaÄ¼ un mainÄ«t lietas, Tagad jums ir viena vieta kur jÅ«s varat mainÄ«t lietas. Un patiesÄ«bÄ, kaut tÄpat problÄma noteikti septiÅi, kur mÄs Ä«stenot pÄtniecÄ«bas akciju tirdzniecÄ«bas mÄjas lapÄ, kas notiek, lai bÅ«tu viss Ä·ekars lapÄm. Un tas bÅ«tu patieÅ¡Äm kaitinoÅ¡as, ja jÅ«s nolemjat, hm, Man nav Ä«sti patÄ«k 24 pikseÄ¼i, es gribu ka tas ir 28 pikseÄ¼i vai nedaudz lielÄks. Un tad ir jÄdara globÄla atrast un aizstÄt vai atvÄrt visiem jÅ«su mÄjas lapas failus vienkÄrÅ¡i reÄli mainÄ«t vienu vÄrtÄ«bu. Ar faktoringa Å¡os stilus vienÄ centrÄlÄ vietÄ, JÅ«s tagad var atvÄrt vienu teksta failu in CS50IDE jebkurÄ programmÄ, mainÄ«t to, saglabÄjiet to, un darÄ«ts. JÅ«s esat tie, pavairots izmaiÅas visur. Un ka bÅ«tu tÄds pats kÄdÄ dot h failÄ, kÄ arÄ«. TÄtad kÄdi jautÄjumi, tÄdÄjÄdi tÄlu uz Å¡o sintaksi? Labi, tÄpÄc mÄs esam darÄ«juÅ¡i visu, Å¡Ä·iet, izÅemot faktiski Ä«steno hipersaites. Un tÄ iesim uz priekÅ¡u un darÄ«t to. Ä»aujiet man iet uz priekÅ¡u un izveidot jaunu failu Å¡eit. Es esmu gatavojas to nosaukt link.html, ielieciet Å¡odienas kodu. 

Un es esmu gatavojas darÄ«t atvÄrt kronÅ¡teins doc tips html. KÄ malÄ, Å¡Ä« lieta tajÄ top, Å¡is doc tipa deklarÄcija, tas ir vienÄ«gais, kas ir dÄ«vaini ar izsaukuma zÄ«mi. Jums vienkÄrÅ¡i ir to darÄ«t tur, un tas nozÄ«mÄ, ka mÄs izmantojam HTML versiju 5. VecÄkas versijas valoda bija daudz ilgÄk virknes, kas jums nepiecieÅ¡ams, lai tur. TÄtad, Å¡eit ir piemÄrs sauc saite. 

Man vajag Ä·ermeÅa manÄ mÄjas lapÄ Å¡eit. Un Å¡eit, a href VienÄds teiksim HTTP://www.disney.com un mans mÄ«Ä¼Äkais mÄjas lapÄ, mÄs sakÄm. Labi, tÄ ir Ä¼oti nekaitÄ«gs, lietotÄjam draudzÄ«ga lapa. Ja es tagad iet manÄ direktorijÄ uzskaitot Å¡eit un atvÄrt link.html, mums ir hiper tekstu. 

Un tieÅ¡Äm, tas ir, ja H HTTP nÄk no. Hiperteksta pÄrsÅ«tÄ«Å¡anas protokols ir par tekstu pÄrceÄ¼ot ka ir hipersaites uz citiem resursiem. Un tieÅ¡Äm, Å¡eit ir pazÄ«stams, ja retro, zils saite, ka, ja noklikÅ¡Ä·inÄt, faktiski man liek Disney.com. Tagad, ak, kas iznÄks drÄ«z. Labi, tÄpÄc tagad, kÄdi ir daÅ¾i par sekÄm Å¡o? 

Un godÄ«gi sakot, pasaule sÄk lai iegÅ«tu nedaudz vairÄk pazÄ«stams un arÄ« mazliet scarier bet arÄ« nedaudz vairÄk sevis attaisnojams, kad jÅ«s sÄkat izprast Å¡Ä«s lietas. Jo izredzes ir, daÅ¾i no jums, ja jÅ«s iet izmantojot savu Gmail mÄstuÄ¼u mapÄ vai pat iesÅ«tnÄ, jÅ«s, iespÄjams, dabÅ«t kÄdu e-pastu kas ir jautÄ jums mainÄ«t savu parole varbÅ«t vai varbÅ«t pÄrbaudÄ«t JÅ«su PayPal akreditÄcijas dati vai plauktiÅÅ¡. 

Un patiesÄ«bÄ, iespÄjams, esat saÅÄmis kaut kas saka, piemÄram, klikÅ¡Ä·i Å¡eit lai atjaunotu savu PayPal paroli. Un tagad, paziÅojums, ja tas nav Disney.com bet, piemÄram, badplace.com un pÄrlÄdÄt, Åemiet vÄrÄ, ka teksts Å¡eit VarÄtu teikt neko whatsoever. Un patiesÄ«bÄ, tas ir tikai vÄrdi. KÄpÄc es tieÅ¡Äm bÅ«tu super Ä¼aunprÄtÄ«gs un teikt http://www.paypal.com. 

KlikÅ¡Ä·iniet Å¡eit nomainÄ«t savu PayPal parole un tagad pÄrlÄdÄt. Tas izskatÄs diezgan likumÄ«gi, vai ne? Es domÄju, es nevarÄtu klikÅ¡Ä·iniet uz UzrakstÄ«t ka ââtikai saka, ka tas. Bet paziÅojums dihotomiju Å¡eit. TajÄ teikts www.paypal.com, un patiesÄ«bÄ, pagaidiet minÅ«ti, MÄs zinÄm, ka jÅ«s vÄlaties S droÅ¡Ä«bai. TÄpÄc tagad, dodieties uz www.paypal.com HTTPS, bet, ja jÅ«s nekad neesmu izdarÄ«jusi pirms, do nokÄ¼Å«t ieradumos Paceltais pÄr maz saites Å¡eit. Un tas ir grÅ«ti, lai redzÄtu uz ekrÄna tur, un tas nav viss, kas vieglÄk Å¡eit. Bet ceÄ¼u uz leju Å¡eit tiny maz stÅ«rÄ« tas pÄrlÅ«kprogramma faktiski pateiks, ka mÄs ejam lÄ«dz badplace.com nevis paypal.com. Tagad, ja mÄs ejam ar Å¡o? Visi piemÄri mÄs esam darÄ«juÅ¡i Å¡odien, mÄs esam cÄ«tÄ«gi kodÄ un drukÄti ar rokÄm. TÄ«mekÄ¼a ir neticami neinteresanti kad jums grÅ«ti kodu jÅ«su mÄjas lapas, lai saturu ir statisks un nekad mainÄs. Protams, visas mÅ«su iecienÄ«tÄkÄs tÄ«mekÄ¼a vietnes Å¡odien, vai tas ir Gmail vai Twitter vai Facebook vai kÄdu citu skaits ir dinamisks. ViÅi mainÄs atbilde uz lietotÄja ievadi tÄpat kÄ Google meklÄÅ¡anas rezultÄtos. 

Un tÄ treÅ¡dien, ko mÄs darÄm, ir mÄs atstÄjam HTML un CSS ievieÅ¡anu aiz mums, un mÄs par paÅ¡saprotamu, ka mums tagad zinÄt, un mÄs ieviest jauna programmÄÅ¡anas valoda sauc PHP, kas patÄ«k C, gatavojas sniegt mums pilnvaras faktiski izveidot programmas ka paÅ¡i radÄ«t produkciju. Å ajÄ gadÄ«jumÄ, mÄs, izmantojot PHP, lai radÄ«tu dinamiski tÄ«meklÄ« lapas, izmantojot Å¡o jauno valodu. Tik daudz par Å¡o treÅ¡dien. Tiksimies vÄlÄk. 

[MÅ«zikas atskaÅoÅ¡anai]