David J. MALAN: Lahat ng karapatan. Kami ay bumalik. Kaya, ang layunin ng mga ito huling sesyon ay upang ipakilala ang ilang higit pang mga konsepto kundi pati na rin mabigyan ang lahat ng pagkakataon sa uri ng mag-inat ang iyong mga daliri at talagang gawin ang isang bagay isang maliit na hands-on. Ang layunin ay hindi upang i-on sa amin ang lahat sa mga web developer sa anumang paraan ngunit talagang lamang upang bigyan ka ng isang lasa ng ilang sa mga pangunahing constructs ng kung ano ang napupunta sa web programming at ngayon web pag-unlad, kaya ang static na bahagi ng bagay- walang logic, walang programming wika, lamang static na nilalaman. At ito ay magbibigay sa amin ng pagkakataon sa aktwal na makita kung ano ang isang web server ay, makita kung ano ang isang HTML file ay, masdan mo, ito ay HTTP ay aktwal na paghahatid ng up. Ngunit bago namin sumisid sa, anumang nagdaan mga katanungan tungkol sa ulap computing o seguridad o anumang bagay sa pagitan? Hindi? O sige, well, sabihin gawin ito, kung sakali ang proseso ng pag-sign up para sa isang bagay ay tumatagal ng ilang minuto. Susubukan naming ipaalam sa gawin ito sa background. Sige, kung maaari mong, sa ito URL here-- c9.io. Ito ay isang third-party service-- platform bilang isang serbisyo, kung will-- mo na ay pagpunta sa mag-imbita sa iyo mag-sign up para sa isang account, at ito ay pagpunta sa magbibigay sa bawat isa sa inyo isang account sa ang tinatawag na ulap sa ibang tao imprastraktura, isang kumpanya na tinatawag Cloud9. Ngunit kung ano ang nice tungkol ito ay na sila magbigay sa iyo isang pagtatantya ng isang aktwal na pag-unlad sa totoong buhay kapaligiran, albeit sa cloud at sa isang web browser, at gagamitin namin ito sa aktwal na eksperimento ng kaunti ngayon. At pagkatapos ay sige at mag-navigate lamang ang iyong paraan sa pag-sign-up process kung maaari mong. Kaya namin mangyari na gamitin ito sa klase Turuan ko para sa lahat ng ating mga estudyante, pareho sa campus at off ngayon, at ito ay pinalitan ano kasaysayan ay kung hindi man downloadable software. Kaya kung ano ang iyong pagkakaroon ng access sa ay isa sa mga virtual machine, mahalagang, na aking inilarawan mas maaga. Kaya ito kumpanya Cloud9 marahil rents mula sa isang third party-- katunayan sa kasong ito, Google-- isang buong grupo ng mga virtual machine na sila kahit papaano tagain up sa ang ilusyon ng mga indibidwal na mga server bawat isa sa atin ay may ganap na kontrol sa. Ito ay hindi masyadong tumpak na sabihin na ang mga ito virtual machine, bagaman, dahil kung ano ang Cloud9 aktwal na gumagamit ay isang medyo mas bagong teknolohiya tinatawag containerization. At hayaan mo akong sunggaban this picture dito upang ipinta ang larawang ito. 

Ang isang lalagyan ay, kung isipin mo ang mga larawan mula sa mas maaga, isang maliit na mas magaan timbang kaysa sa isang virtual machine. Sa katunayan, samantalang huling oras usapan natin ang tungkol doon pagiging isang operating system at isang hypervisor at pagkatapos ay guest operating system, guest operating system, guest operating system, sa tuktok ng iyong pisikal na hardware, ang pagkakaiba sa mga ito mas bagong teknolohiya, containerization, ay na sila lahat sa paanuman ibahagi ang parehong operating system. Ngunit sila pa rin lumikha ang ilusyon ng lahat ng tao pagkakaroon ng kanyang sariling eksklusibong karapatang pang-administratibo at mga file sa server. Ngunit mayroong mas mababa software sa sa pagitan mo at ang mga hardware. Ang resulta ng kung saan ay, sa teorya, ang isang mas mataas na pagganap, dahil gumagamit ka ng o pag-aaksaya ng mas kaunting mga resources sa na tinatawag na virtualization layer. Kaya ito ay tinatawag na containerization sa pamamagitan ng kalikasan sa pamamagitan ng paraan ng isang teknolohiya na tinatawag na manggagawa sa pantalan, na kung saan ay very much na nanggagaling sa sarili nitong. At ito ay isang bagay na inhinyero sa iyong kumpanya maaaring uri ng uri ng magsimulang makipag-usap tungkol sa lalong madaling panahon kung sila ay may pa nagagawa, kahit na may tiyak na walang dahilan upang tumalon sa anumang bandwagons. 

Kaya sa na sinabi, kung ano ikaw ay malamang na makita ngayon ay isang screen na hitsura ng isang bit tulad nito. OK. At lamang tumawag sa akin sa paglipas kung hindi. At kung so-- kukunin ko na dumating sa paglipas kung hindi. Sige at i-click na malaki plus upang lumikha ng isang workspace, at makikita mo ang isang screen na tulad nito. Maaari mong tawagan ang workspace pangalanan ang anumang nais mo para sa ngayon. At lamang ang tunay na para sa simple, pumunta at- well, ang ilan sa inyo ay mayroon ng workspaces. Tumawag ito kahit anong want-- mong negosyo, Harvard, Huwebes, kahit anong gusto mo. Hindi mo kailangan ng isang paglalarawan. Maaari mong iwan itong pribado, maliban kung ikaw ay mayroon ng isang paglangkay-langkayin ng workspaces. Kung ikaw ay sapilitang upang gawin itong pampubliko, na fine para sa mga layuning ngayon. Dito, masyadong, ay isa sa mga upsells. Makakakuha ka ng isang pribadong workspace sa pamamagitan default. Ngunit kung nais mong higit pa, mayroon kang magbayad para sa karagdagang. Kung hindi man, lakas ka upang gawin ang iyong trabaho publiko. Ngunit iyon lamang ang fine, dahil sila din target na ito sa open-source komunidad upang hikayatin ang mga tao upang aktwal na makipagtulungan. 

At ang huling bagay na mahalaga, bagaman, ay, pagkatapos pumili ka ng isang pangalan at pagkatapos pinili mo pribado o publiko, i-click ang HTML5, ang malaking icon orange pangalawa mula sa kaliwa, at pagkatapos ay i-click ang Lumikha ng Workspace. At ito ay marahil kumuha nang isang minuto o kaya, ngunit makikita mo pagkatapos magkaroon ng isang kapaligiran, sa sandaling ikaw gawin iyon, na mukhang nakapagpapaalaala ng mayroon ako sa screen dito ngayon. Ngunit, muli, maaari itong tumagal ng isang minuto o higit pa upang makakuha ng sa screen na ito kapag nakalikha ka na nag-click Lumikha Workspace. Ngunit lamang bandila sa akin sa paglipas kung nais mong sa akin na kumuha ng isang pagtingin sa anumang bagay o payuhan. Lahat tama. Kaya ako ng pagpunta sa background na ito para sa ngayon. Tumawag sa akin sa paglipas ng kung inaakala mong pang teknikal na paghihirap. Ngunit, muli, maaaring tumagal ng isang Medyo para sa na upang buksan. At sabihin sige at makipag-usap tungkol sa kung ano ito ang tunay na ibig sabihin nito na gumawa ng isang web page, kung ano ang HTML ay, at kung paano ang lahat ng ito ngayon interconnects bilang kami ay nagsisimula sa aktwal na gamitin ang ilan sa mga teknolohiya. Kaya ito lumiliko out na ko pumunta sa aking maliit na Mac dito, buksan ang isang simpleng programa na tinatawag na TextEdit, o sa Windows kaya kong bukas isang bagay na tinatawag Notepad.exe. At ako ay hindi lamang lamang gawin ang isang bagay tulad this-- "hello, world." At pagkatapos ay maaari kong i-save ito bilang hello.txt Kaya walang magic doon. Na ito ay walang kinalaman sa web programming, walang kinalaman sa HTML. Just paglikha ng isang simpleng text file. Ngunit ito ay lumiliko out na ang isang web page ay literal lamang na. Ito ay isang simpleng text file na naglalaman ng teksto na maaari mong i-type sa iyong keyboard, ngunit ito ay karaniwang ngunit hindi palaging nagtatapos sa hindi .txt ngunit .html o Htm. At hindi mo lang type ang mga salita sa file. Ikaw ang tunay na kailangang gumamit ng mga bagay na tinatawag mga tag o, mas pangkalahatang paraan, isang bagay tinatawag markup language. 

Kaya ako pagpunta sa masyadong mabilis-type at pagkatapos ay ipaliwanag ang mga sumusunod. Pupunta ako sa unang type ito, na nagsasabing, hey, browser, dito lumapit ang isang web page na nakasulat sa HTML. At ang dalawang bagay na magkasama sabihin, hey, browser, ang mga sumusunod ay sa katunayan HTML. Hey, browser, dito ay ang ulo o sa tuktok ng aking pahina. Hey, browser, sa loob ng tuktok ng aking pahina, ilagay ang isang pamagat na ay, "hello, mundo. " Hey, browser, pagkatapos ng ulo ng aking page, dito ay ang katawan ng aking pahina. At, hey, browser, ang katawan ng aking pahina ay dapat ring sabihin, "kumusta mundo." Kaya ano ang mga kapansin-pansin na mga detalye dito? Ito ay kung ano ay karaniwang tinatawag na isang doc-uri deklarasyon, at, lantaran, ito ay isang maliit mahirap kabisaduhin ito sa unang. Ikaw lamang ang uri ng i-copy-paste ito. Ito ang pormal na paraan na sabihing, hey, browser, Gumagamit ako ng HTML bersyon 5 na ay dumating out medyo kamakailan. Ito ay isang mahiwagang bulong na ang ilang mga mga kawani na tao na may isang mahinang kamalayan ng disenyo nagpasya na ilagay sa pinakatuktok ng file. Kahit na ito ay isang maliit arcane, na ang lahat ito means-- hey, browser, dito lumapit kumuha bersyon 5 ng HTML. 

Ang magpahinga ng ito ay sa amin para sa ilang oras na ngayon, kasaysayan, ngunit ito ay naging umuusbong, at ito ay marahil ay nakakakuha ng kaunti mas simple. Pansinin ang ilang mga katangian ng kung ano ang na-highlight ko. Mayroong mga bagay na ito na may angled brackets-- kaliwa bracket at ang karapatan bracket. At mapansin ang mahusay na proporsyon dito. At sa pamamagitan ng mahusay na proporsyon, Ibig kong sabihin, kung ano ang aking magkaroon ito start tag dito o isang bukas na tag kung ikaw ay, down na dito Mayroon akong isang malapit na tag o isang dulo tag na iba't ibang lamang insofar bilang ito ay may ito slash sa simula ng salita HTML. At maaari mong isipin ito na gaya nang casually pagpapanukala bago, hey, browser, dito ay ilang mga HTML. At, pasalungat, hey, browser, na ang dahilan ito para sa HTML-- pagsisimula at pagtatapos. 

Samantala hey, browser, dito pagdating sa ulo ng aking pahina. Hey, browser, na ito para sa ulo. Hey, browser, dito ay ang katawan ng aking pahina. Hey, browser, na ito para sa katawan. At sa loob ng na ang ilang mga arbitrary text para sa ngayon. At sa loob ng ulo, samantala, ilang arbitrary ngunit-tag, kaya na magsalita, text na nagsasabing, ang pamagat ng aking pahina ay magiging "hello, world." Ngayon, para sa ngayon, maaari kang ipalagay na browser Mayroon only-- o, sa halip, mga pahina ng web ay may lamang ng dalawang parts-- ang ulo at ang katawan. At ang pangulo ay karaniwang lamang tulad ng mga bar menu, mga bagay-bagay talagang lamang sa pinakatuktok. At ang katawan ay ang lakas ng loob ng mga pahina, lahat ng bagay sa na malaki rectangle na pumupuno sa screen. Kaya ako pagpunta sa sige at gawin ito. Ako pagpunta sa sige at i-click ang I-save, File I-save. At ako pagpunta upang i-save ito bilang hello.html, at ako lamang ang pagpunta sa ilagay ito sa aking desktop. At ako pagpunta sa pumunta magpatuloy at i-click ang I-save. At notice-- aking Mac sa hindi bababa sa ay yelling sa akin. Sigurado ka bang gusto mong gawin ito? At ako pagpunta sa sabihin, oo, gamitin ang mga HTML. alam ko mas mahusay na sa kasong ito. At ngayon ako pagpunta sa pumunta sa aking desktop kung saan mayroon akong ang file na ito bigla. At ako pagpunta upang i-double-click ito. At mapapansin mo na, sa pamamagitan ng default, Chrome binuksan up. Iyan ay dahil na aking default browser. At ito lamang ang nagsasabing, "hello, world." Ngunit ito says "hello, world "sa dalawang lugar. Pansinin kaliwang tuktok. Pretty mahirap na makaligtaan na. Ito ay malaki at naka-bold. At kung saan pa ang mukhang ito na kailangang sabihin, "hello, world"? 

Madla: tab Ang. 

David J. MALAN: Oo, ang tab mismo. Kaya kapag sinabi ko ang ulo ng pahina ay lahat ng bagay up top-- at sa katunayan ito ay ang pamagat. Ito ay lamang sa tab dito. At maaari kong hilahin ang tab na ito out sa gayon ay hindi upang lituhin. Ito ay lamang ng isang solong tab ngayon, at sa katunayan nakita namin "hello, world" up dito at "hello, world" down dito. Kaya medyo tapat. Ngunit ito ay din medyo simple. At, talaga, naka-zoom ko in. Maaari ko bang baguhin ang laki ng font lang upang palakihin para sa accessibility. Ngunit sabihin ngayon gawin ang isang bagay isang maliit na mas kawili-wiling. 

Pupunta ako sa go-- Whoops, sabihin ako makabalik sa aking text file. Pupunta ako pabalik sa aking text file, at ako pagpunta upang baguhin ito at sabihin "Hello, Disney World." I-save ang. At bumalik sa aking browser at i-click I-reload. At ngayon, siyempre, ito nagsasabing "Disney World." At ako pagpunta upang artipisyal na mag-zoom sa loob lamang kaya mas madaling makita. Kaya ngayon, sa kasamaang-palad, ako uri ng gusto to-- talaga, na ay isang tampok Mac. Gusto kong mag-click sa Disney World at pumunta sa isang lugar tulad ng disney.com, ngunit na ay hindi gumagana. Kaya isang pangunahing doktrina ng web ay hyperlinks, mga link na pumunta sa ibang dako. Kaya kung paano ang gagawin ko na? Well, hindi ko na lang sabihin, "Hello, http://www.disney.com." I-save ito. Reload. Ngunit ito masyadong, hindi naki-click. At kung ano ang magaling dito, kahit na ito ay hindi functional pa, ay na ito tila na ang mga browser ay literal lamang kung ano ako sabihin ito sa gagawin. Kaya kung ako i-type lamang ng isang URL na tulad nito, lamang ito ay pagpunta upang ipakita sa akin ang URL. Kailangan ko bang gamitin ang mga tag o markup wika upang talagang sabihin ang browser para gumawa nang mas. Kaya ako pagpunta sa sige at tanggalin ito para sa isang sandali. At ako pagpunta sa sabihin, hey, browser, simulan ang isang anchor dito, isang link kaya na magsalita. At ang hyper-reference, ang patutunguhan ng anchor na, ay dapat na URL na ito. At mapansin ang aking quotes. maaari ko bang gamitin single quote, masyadong, ngunit mayroon kang upang maging pare-pareho, at ako ay pangkaraniwang lamang gamitin double quotes upang panatilihin ito simple. Pansinin Ako pagpunta upang isara ang tag. At pagkatapos dito ako pagpunta na kailangang sabihin, "Disney World." At ngayon kailangan ko ng ilang symmetry-- bukas bracket, / a, sarado bracket. 

So anong aking ipinakilala? Kami ay nagkaroon ng ilang mga tag na. HTML, Head, Pamagat, katawan, ay ang lahat ng mga tag, kaya na magsalita, may bukas at closed counterparts. Ngunit paunawa, ito ay isang uri ng sa panimula naiiba. Ito ay kung ano ang makikita namin tumawag sa HTML isang katangian. At isang katangian ay lamang ng isang key-value pares. Ito ay isang pangkaraniwang bagay sa key-value pares ng computer science--. Ito ay uri ng tool ng kalakalan. Ang isang pangunahing at isang halaga. Ang isang salita at pagkatapos ng ilang iba pang mga salita o mga salita. At sa kasong ito, ang susi ay href, at ang halaga ay na buong URL. At kung ano ang isang katangian nito ay ito impluwensya ang pag-uugali ng isang tag. At sa kasong ito, kailangan namin upang maka-impluwensya ang pag-uugali ng anchor tag, dahil kailangan namin upang anchor ang link na ito sa isang lugar. At kung paano mo gawin iyon ay sa pamamagitan ng paraan ng attribute. 

Kaya ako pagpunta sa sige at i-save ang file na ngayon. Bumalik sa aking browser at reload. At, voila, mayroon kaming ngayon ang Beginnings ng isang lehitimong web page. Super-simple, ngunit kung mag-hover ko sa paglipas ng this-- notice sa ilalim-kaliwang sulok, ito ay super-maliit. Ngunit mo nakikita www.disney.com. At kung nag-click ko, sa katunayan na ito whisks ninyo ako sa disney.com. Ngayon, ang hindi pangkaraniwang bagay dito ay na ito ay hindi ang best-- ang pinaka mabenta URL, ngunit na fine dahil ang file na ito ay hindi umiiral sa World Wide Web. Ito ay umiiral bilang isang lokal na file sa malas aking Users directory-- / jharvard-- para sa John Harvard-- / desktop. Ngunit ito ay may isang URL. Ito lamang ang mangyayari sa maging lokal. Sa kasamaang palad, ang sinoman sa inyo ay maaaring bisitahin ito, dahil kung type mo ang URL na ito, gusto mo ay nagsasabi sa iyong browser, hitsura para sa isang file na tinatawag na hello.html sa iyong hard drive. At, siyempre, maliban na sa iyo ay sumusunod na kasama ng manwal, hindi ito ay pagpunta sa pag-umiiral doon. 

Kaya na fine. kailangan pa rin namin ng isang paraan, sa huli, upang makakuha ng ang file na ito sa web, ngunit sabihin manunudyo bukod sa isang pares ng implikasyon sa seguridad ng kung ano lang namin Nakita at itali ito pabalik sa mas maaga discussion na ito mula sa umaga. Ito ay lumiliko out na, kung ang isang browser ay literal lamang kung ano ako sabihin dito na gawin, at ito ay tila upang maging ang kaso na ang isang anchor tag ay naiimpluwensyahan ng ang halaga ng ang katangiang ito na tinatawag href ngunit ito ay nagpapakita na ito teksto, ito ay tila upang magpahiwatig na maaari ko bang ilagay ang URL sa parehong mga lugar at pagkatapos ay i-reload at ngayon makita ang URL at pumunta sa URL. Pansinin n'yo, kung mag-hover ko sa ibabaw ng ilalim-kaliwa, sa katunayan ako pagpunta pa rin upang disney.com. 

Kaya kung sakaling kayo ay phished-- P-H-I-S-H-E-D-- sa isa sa mga bogus emails mula sa tulad ng PayPal iyong bangko, marahil mo na tapat na paraan mga link sa loob ng email na iyong binabasa na nagsasabi mong i-click dito upang pumunta kumpirmahin ang iyong password o kumpirmahin ang iyong petsa ng kapanganakan o panlipunan o isang bagay socially engineering mong ibunyag impormasyon. Well, maaari ko bang uri ng kumuha samantalahin ng mga ito, maaari hindi ko? kaya kong sabihin ng isang bagay tulad ng, www.paypal.com. At sa halip na disney.com, ako maaaring pumunta sa, tulad ng, badguy.com. Reload. At kung paano madaling ito ay upang lokohin, lalo na ang isang di-teknikal na reader o isang cursorily pagbabasa reader kaysa upang i-click ang isang link na tulad nito, na kung nag-click ako it-- Ako tunay hindi nais na pumunta badguy.com. Hindi ko alam kung ano ang aktwal na doon. Kaya paypal.com, paunawa, ay kung ano ito says ito ay pagpunta sa, pero siyempre, kung titingnan ko pababa super-mababa, ito ay isang maliit na malabo, ngunit ito says badguy.com. Iyan ay ang tanging magsasabi ngayon na ako ng pagpunta sa maling lugar. At kapag sinabi ko mas maaga na ang mga bangko talagang hindi dapat hinihikayat o tren mga gumagamit sa pag-click ng mga link, ito ay isa lamang manipestasyon nito. At ito ay na simple. Ikaw ay isang kaaway kung gawin mo ng isang bagay tulad nito at subukan upang linlangin ang isang gumagamit sa pagbisita sa iyong website. Ngunit sa ngayon, itinatago namin sa mga bagay na maganda at malinis. Kami ay pagpunta sa sige at rewind mga pagbabagong ito. I-reload ang pahina. At pumunta ako pabalik sa disney.com. 

Sabihin makita kung hindi namin maaaring manunudyo ito bukod ng kaunti pa. Kaya "hello, Disney World." Pupunta ako sa sabihin pababa dito. Siguro ako pagpunta sa gumawa ng ilang mga kuwarto. "Umaasa kami na masiyahan kayo sa inyong pamamalagi!" I-save ang. Reload. Hindi ito rea-- iyan ay hindi kung ano ako inilaan, right? Ibig kong sabihin, kung ako pagpapagamot ng aking text maghain tulad ng isang word processor, ano ang pag-asa mo ang mangyayari dito? Yeah, sa tingin ko doon ay dapat na isang line break dito, kaya nararamdaman maraming surot sa ilang mga paraan. Ngunit iyon lamang ang talagang sinadya, dahil tulad ng dati, ang browser ay lamang ang pagpunta sa gawin kung ano ang sabihin mo ito gawin. Hindi ko pa sinabi ito sa break na linya. hindi ko na sinabi ito upang ilipat pababa, kahit bagaman, intuitively, Pakiramdam ko ay tulad ng ginawa ko. Kaya ito lumiliko out na kailangan namin ng kaunti pa markup, at ako pagpunta upang ayusin ito tulad ng sumusunod. Ako pagpunta sa lagyan ng paunang salita na ito unang kumusta sa kung ano ang tinatawag na isang talata tag. At pagkatapos ay ako pagpunta sa sige at balutin ito ng iba pang pangungusap sa ibang talata tag, kahit na ang mga ito ay super-maikling talata. Ngayon ako pagpunta sa i-save. Reload. At ngayon kami ay may na space, at hindi na namin uri ng kung ang semantika ng dalawang magkahiwalay na mga talata. 

Iyon lang ang multa at mabuti, ngunit gagawin ito maging mabait sa magdagdag ng isang imahe sa pahinang ito, kaya ako pagpunta sa pumunta hitsura para sa Mickey Mouse sa Google Images. At katuwaan lang, ako pagpunta sa grab ang larawang ito. Ako pagpunta sa sige ngayon at grab ang URL ng ang larawan na ito, kahit na may iba't ibang mga paraan upang gawin ito. Para sa ngayon, tingin lang ako pagpunta sa kopyahin ang URL. Pupunta ako sa bumalik sa aking text file, at ako pagpunta sa sabihin dito, img src = quote magpanipi na URL, super-haba. At pagkatapos ay ang paniwala ng isang imahe ay isang maliit na naiiba. Mayroon talagang walang paniwala ng panimulang isang imahe at nagtatapos ng isang imahe, tulad ng isang start-tag ang isang dulo tag. Kaya ito nararamdaman ng isang maliit na kakaiba sa ako semantically upang gawin ito, na magkaroon ng isang close-image tag. Ito ay hindi tama. Ito ay ganap na tama, at ito ay hinihikayat, ngunit mayroong shorthand notation. Maaari kong uri ng sabay-sabay buksan at isara ang parehong tag, at na ito at gumawa ng browser masaya. Kaya ito ay lamang ng isang maliit mas maikli at malinaw para sa mga bagay na conceptually talagang hindi magkaroon ng kahulugan sa simula at wakas. Sila lang ang naroon, o ang mga ito ay hindi. 

Kaya ako pagpunta sa i-save ito at bumalik sa aking "hello, world" na pahina at i-reload. At ito ay isang maliit na sa labas ng kontrol, dahil na imahe ay talagang isang maliit na malaki, ngunit iyan ay OK. kaya kong baguhin ang laki nito sa isang programa. O alam mo kung ano. Lamang upang ipakita, ako pagpunta sa talagang sabihin na ang lapad ng ang bagay na ito ay dapat lamang maging 200 pixels, 200 na tuldok. Hayaan akong sige at i-save at i-reload, at ngayon ang page hitsura ng isang maliit na mas makatwirang. Ngunit mapansin ang pattern. Well, ako ay uri ng itinuro sa iyo ang lahat ng HTML sa ilang mga kahulugan, hindi bababa sa conceptually, dahil ang lahat ay HTML ay mga tags-- open tags, sarado mga tag, at mga katangian na baguhin ang kanilang pag-uugali. At, tila, ang bawat tag ay maaaring magkaroon ng zero o isa o dalawa o higit pang mga katangian, ang bawat isa na kung saan ay isang bagay ng kaunti naiiba. Ngayon, paano ko malalaman mo kung ano ang umiiral? Mo lamang makinig sa isang tao tulad ng sa akin sabihin sa iyo kung ano ang umiiral, o mo lamang Google paligid para sa isang tutorial sa HTML, at ito ay tunay na ito simple. 

Truly, kapag ako ay isang undergrad taon na ang nakakaraan at natutunan HTML, isa sa aking mga math pagtuturo assistants lamang na ginugol isang maliit na piraso ng oras pagtuturo sa akin para sa tulad ng kalahating oras, isang oras, at pagkatapos ay ako ay sa aking paraan. Ako ay sa aking paraan patungo sa paggawa ng ang pinaka-kahindik-hindik na mga website kailanman, na kung saan, tila, mayroon akong hindi talagang progressed lampas. Ngunit ang punto ay na, sa sandaling ikaw maunawaan ang mga simpleng ideas-- kung arcane text-- ngunit ang mga simpleng ideya ng simula ng isang pag-iisip at pagsasara ng isang pag-iisip, nang pinapanatili ang lahat ng bagay mabuti balanced, naghahanap ng isang bagay up, ang pagbabago ng pag-uugali ng tag na, na talagang lahat doon ay upang ito. At sa katunayan, kung namin ngayon pumunta sa isang bagay tulad ng google.com-- talaga, hana isang lugar ng kaunti pa reasonable-- stanford.edu. At ako pagpunta sa pumunta sa View, Developer, View Source. Ito ay pangit, ngunit notice-- at kukunin ko na mag-zoom in notice ilang bagay-bagay na pamilyar na. Mayroong ito up dito, kung saan ay isang browser. Dito lumapit HTML5. Mayroong HTML. Sa malas, mayroong isang attribute na ako ay hindi gamitin na tumutukoy sa wika ng mga pahina, at ito ay maaaring makatulong na may awtomatikong pagsasalin at bagay-bagay tulad na. Narito ang ulo ng pahina. Narito ang pamagat ng pahina Stanford. May isang tag ako ay hindi makipag-usap tungkol yet-- Meta tag. Ito ay lamang ng isang uri ng background na impormasyon. Ito ay tumutulong sa SEO, o Search Engine Optimization, o Google-search mga resulta o mga katulad. Ngunit kung tinutupad natin kayong mapagmasid, manatiling naghahanap, narito ang Body tag. At mayroong bunches ng iba pang mga tags hindi kami nagsasalita pa tungkol sa. Ngunit Div ay isa para sa isang division ng pahina. Ito ay tulad ng isang invisible na parihaba kung ikaw uri ng nais na pag-iisip hatiin ang iyong pahina sa iba't ibang mga unit online. At pagkatapos ng maraming mga divs ko makita, isang bagay na tinatawag Class, ngunit kami ay bumalik sa na. 

Ito ang interesting-- Forms. Forms ay ang lahat ng dako ng web. Anumang box para sa paghahanap na ikaw ay kailanman ginamit ay isang form. At, kaya, sabihin aktwal na makita. Form. Action. Ang aksyon ng form na ito, para sa anumang makasaysayang dahilan, ay na URL. Paraan ay "post." Lumiliko out na HTTP kahilingan ay maaaring gumamit ng ang verb "makakuha ng," tulad ng nakita natin dati, o "post." At makita ang isang pagkakaiba ng mga ito sa ilang sandali. Natin ang aktwal na makita kung ano ito ay. Hayaan akong bumalik sa pahina ng Stanford. Ano ang anyo ang mga ito ay pakikipag-usap tungkol sa, sa tingin ninyo? Ano jumps out sa iyo? 

Madla: Search box. 

David J. MALAN: Oo. Kaya up sa kanang tuktok dito ay ito Hanapin box. At na kung paano sila ay ipinatupad it-- isang tag na literal open-bracket form. At pagkatapos ay sabihin sa paghahanap para sa isang bagay. ni maghanap para sa isang buddy Hayaan ng mine-- "Nick Parlante." Enter. At syempre, ito napunta sa isang bahagyang kakaibang URL. Hayaan akong bumalik dito. ni maghanap para sa Hayaan ang "kurso." Mapapahamak ang mga ito. Nagpunta sa isang iba't ibang mga URL. Kaya, Stanford ni pagdagdag ng ilang mga magic na hindi sila ay pagkuha sa akin sa URL na nakita natin sa pagkilos attribute doon. Ngunit ang form na ito dito ay ipinatupad pulos sa pamamagitan ng paraan ng markup na ito dito, ang mga tag. Sa katunayan, narito ang input para sa ang uri ng paghahanap na gusto mo. Narito ang input para sa isa pang uri ng paghahanap. Narito ang input para sa string mismo. At kaya ang layunin ay hindi upang balutin ang aming mga isip sa paligid ng lahat ng mga tag ngunit lamang upang makita. Lamang Ito ay pagbubukas at pagsasara tag at naghahanap ng mga bagay up. Yeah? Victoria? 

Madla: [hindi marinig] David J. MALAN: Iyan ay isang mahusay na tanong. Iyan ay isang maliit na trickier upang makita. Hayaan akong bumalik sa na tanong sa loob lamang ng ilang minuto kapag tinitingnan namin ang isang bagay na tinatawag CSS, o cascading style sheet, at maaari naming subukan upang magpakilala ng mas maraming mula sa pahina. Kaya kung namin ngayon bistahan google.com, sabihin makita kung ano ang kanilang mga pahina ay ganito ang hitsura. Gusto mong they're-- na maganda ngayon. OK. Tapos na. O sige, kaya View Source. Gusto mong isipin ang Google ay may talagang maganda source code. Kaya, tila, kung ano ang nangyayari dito? At sa katunayan, ito ay hindi kahit na HTML. Ito ay isang bagay na tinatawag na JavaScript. At sabihin panatilihin ang pagpunta at pagpunta. Hindi ko kahit na alam kung saan ang pahina ay nagsisimula. Ako pagpunta sa gamitin Command F, bukas bracket HTML. O sige, may ito ay. Natagpuan ko ang simula ng pahina, at diyan ay pagayon marami mga bagay-bagay in dito. 

Ano ang tunay na nangyayari? Well, alam mo kung ano, maaari naming linisin ito up. Kung sa halip pumunta ako sa ito Siyasatin toolbar, ang mga espesyal na diagnostic tool, at huwag kang lumakad sa Network, kung saan panatilihin namin ang pagpunta sa ngayon, ngunit kung pumunta ako sa Sangkap, kung ano ang tunay na ganda ay na ang isang browser ay may isang pulutong magkano ang mas mahusay mata kaysa sa akin. At ang browser ay maaaring basahin na gulo ng isang web page, na HTML mail kami lang ay tumingin sa, at kaya nito parse ito o basahin at aralan ito at reformat ito sa isang masarap na tao-friendly na paraan. Kaya kung ano ang ko na nakikita ngayon sa ganitong screen dito ilalim Elements, ang eksaktong parehong nilalaman, ngunit sila na naka-indent lahat ng bagay, sila na colorized, pero ito ay ang eksaktong parehong teksto na-download ko mula sa server. 

At kung ano ang magaling ngayong Maaari ko bang makita sa katawan, para instance-- paunawa, ang pahina ay pa rin binubuo na lamang ng isang ulo at isang katawan, at maaari ba akong hierarchically sumisid in dito. Pansinin na ang Google tila sa may upang divs-- ang isang ito at ang isang ito. maaari kong palawakin iyon. Mayroong isang buong bungkos ng iba pang divs. Kaya ito ay isang maliit na mahirap unawain. Ngunit sandali. Ito ay tila kaya marami pang iba nababasa, medyo, kaysa ito. Bakit Google nakakahiya mismo sa pamamagitan lamang ng pagpapadala ito malaking gulo ng code ng ilang mga uri lamang upang ipatupad ang isang bagay na mukhang sobrang simple sa unang tingin? Like, bakit hindi sila magdagdag ng higit pang mga puwang? Bakit hindi nila pindutin ang Enter tulad ng ginawa ko? Hanapin kung paano mabuting ako ay sa pagsulat ng isang web page. I pindutin ang Enter upang diligently. yupi ko kaya lahat ng bagay ay kaya medyo at nababasa. Bakit ang Google ay hindi pagsasanay sa parehong? 

Madla: [hindi marinig] David J. MALAN: Good. Napakaganda. Hindi nila magkaroon ng ilang mga tao sa Google nang manu-mano pag-update ng home page anymore. Ito ay hindi 1999 anymore. Kaya mayroon silang software. Ang mga ito ay iba pang mga tool na bumuo dynamic na ang mga ito HTML. Of course, na ang code mismo ay isinulat ng mga tao, ngunit ang katotohanan ay, ito ay lubos na makatarungan sa sabihin, ang browser ay tiyak ay hindi aalaga kung paano makalat ang code ay. Subalit mayroong isang mas nakakahimok teknikal na dahilan na ang Google namamahagi kanilang HTML code sa tulad ng isang nanggigitata, tila baga napakalaki paraan ang lahat nakaimpake magkasama na may tunay maliit way-- napakakaunting sa paraan ng pag-format tulad ng ginawa ko. 

Madla: [hindi marinig] 

David J. MALAN: Mas mabilis? Bakit? At ano ang sinabi mo, Lydia? Mas mabilis? Bakit mas mabilis? Madla: [hindi marinig] David J. MALAN: May walang puwang na basahin. Yeah. Kaya sa tingin tungkol sa kung ano ang isang puwang ay. Kaya ang bawat character sa keyboard ay tumatagal ilang mga halaga ng space upang kumatawan, alinman sa pisikal, tulad nito tumatagal ng up na marami space, o sa anumang paraan sa ilalim ng hood, na nangangailangan ng memory. At bilang isang aside-- at kami makipag-usap nang higit pa tungkol tomorrow-- ito bawat karakter sa keyboard karaniwang nangangailangan ng 8 bits, o isang byte. Kaya ang isang pattern ng 8 mga zero o bago, o lamang ng 1 byte, bilang namin mga kawani na tao ay karaniwang sabihin. Kaya na ang maliit, ngunit ito ay pa rin non-zero. Ito ay pa rin ang ilang mga halaga ng space. Kaya kung ang isang engineer o Google hits ang space bar nang isang beses lamang, at ipagpalagay Google-- ito ay super-popular-- Ipagpalagay na ang isang bilyong katao bisitahin ang kanilang home page sa isang araw, o ilang bilang ng mga tao bisitahin ang home page ng isang bilyong beses sa isang araw, kung gaano karaming mga karagdagang bytes ay may na software engineer lamang gastos Google sa pamamagitan ng paghagupit ang kanyang space bar isang beses? 

Madla: [hindi marinig] David J. MALAN: Hindi masyadong na masama. Lamang ng isang byte beses sa isang bilyon. kaya a-- Madla: 8 bilyon gigabytes. David J. MALAN: Hindi 8 bilyon. 8 bilyon bytes. Ngunit 1 gigabyte. 1 gigabyte ay ang yunit ng pagsukat. Kung siya ay dalawang puwang, 2 gigabytes. Tatlong gigabytes. Right? Ito kaliskis expensively. At kaya sa mga kaso tulad ng Google, na kung saan, sa ipinagkaloob, ay matinding kaso, may mga iba pang mga isyu na lumabas dahil lamang sa pamamagitan ng paggawa napaka-makatwirang desisyon o pagkuha ng napaka-simpleng tao pagkilos, dahil ito ay may ito Pinalaking epekto. Kaya isa sa mga dahilan ito hitsura kaya compressed ay eksakto tulad ng Victoria said-- ito ay lamang na nabuo sa pamamagitan ng mga computer pa rin. Kaya hindi sang-ayon. Hayaan ang mga browser tayahin ito lumitaw. Ngunit ito rin ay sadyang Wala magkano ang space, dahil ang puwang ay hindi kinakailangan. At ang mga araw talagang gastos ng pera. 

Ito ay alinman gastos pagkakataon, dahil lamang na itulak na mas data sa labas ng headquarters ni google.com lamang ay nakuha na kumuha ng ilang mga halaga ng oras, kahit na ito ay milliseconds o microseconds, ngunit na nagdaragdag ng hanggang paglipas ng sa gayon maraming mga gumagamit, o mas malamang, ito marahil gastos ng pera. Google marahil nag-uugnay sa ibang tao sa mundo, isa sa mga peering puntos, at kung mayroon silang ng ilang mga uri ng mga pinansiyal na relasyon kung saan ang kanilang data gastos ng pera, maaaring sila pati na rin mabawasan kung magkano ang data sila ay pagsigam out sa ang kanilang mga koneksyon sa internet. 

Kaya ang nakakatawa bagay, bagaman, sa huli, o marahil ang reassuring bagay, ay na kahit na ito mukhang masyado napakalaki, sa dulo ng araw, ito ay pa rin ang parehong prinsipyo bilang ang napaka-simpleng pahina dito ng isang HTML page. Kaya lang sa maikling pangungusap at sa gayon ay ikaw magkaroon ng isang canonical na bersyon kung ikaw ay hindi pagsunod sa kahabaan sa pamamagitan ng pagpili dito, dito ay maaaring ang pinaka-simple ng mga web page, kaya ng isang bagay upang i-play na may marahil mamaya. 

Well, sabihin ipakilala ang isang pares ng mga iba pang mga ideya ngayon. Kami ay tungkol sa upang ipakilala isang bagay na tinatawag ng isang estilo tag. Maaari naming stylize ang pahinang ito sa mas maraming mga kagiliw-giliw na paraan. Kaya samantalang HTML email ay ang lahat ng tungkol sa pagmamarka ng up ang data, uri ng pagtukoy sa isang browser kung paano sa istraktura ng data, kung saan upang ilagay ito, CSS, o cascading style sheet, ay isang pangalawang wika na sa pangkalahatan ay makakakuha commingled sa HTML dahil kakailanganin namin see-- ngunit maaari naming linisin na hanggang sa isang moment-- na tumatagal ito ang huling milya, at ito stylizes ito. Ito ay makakakuha ng mga kulay lamang karapatan, ang laki ng font lamang karapatan, ang pagpoposisyon lamang kanan. Lahat ng ito ay tungkol sa aesthetics o pag-format, hindi tungkol sa sa pangunahing mga data mismo. At ang pinakamadaling paraan upang ipakita ang ito ay marahil sa pamamagitan ng halimbawa. Kaya ako ng pagpunta sa pumunta sa ibabaw sa aking simpleng text file. At sa loob lamang ng isang sandali, kukunin ko maglakad sa amin sa pamamagitan ng proseso ng paggawa nito sa ating sarili. 

Pupunta ako sa bumalik sa aking file dito at i-reload ang pahina lamang upang kumpirmahin kung ano ang mukhang. Iyon ang dahilan kung nasaan na tayo ngayon. Pakiramdam ko ay tulad ng mga bata ay mga bisita pagkakaroon ng ilang mga kulay sa web page na ito. Kaya ako pagpunta sa pumunta up dito sa ulo ng pahina. At ako pagpunta sa gawin style, / style. At pagkatapos ay sa loob ng mga ito, ako pagpunta upang sabihin ang katawan ng aking page-- at ito formatting ay, sa unang tingin, marahil ng kaunti kakaiba ngunit maginoo. Pupunta ako sa sabihin na ang background kulay ng pahinang ito ay dapat na green. At ito ay sa kasamaang-palad uri ng hindi ang pinakamahusay na disenyo. Pansinin na dati sa mundo ng HTML, sinabi ko na katangian ay ang mga ito ng key-value pares. Something ay katumbas quote magpanipi "ng isang bagay." Sa mundo ng CSS, na kung saan ay dinisenyo sa pamamagitan ng ilang iba't-ibang mga tao, sila ay nagpasya na, sa kanilang mundo, key-value pairs ay magiging salita colon isang bagay. Kaya ito ay ang parehong ideya, bagaman. Ito ay pag-uugnay ang halaga ng isang na may ilang mga susi na sa paanuman impluwensya ang pag-uugali ng pahinang ito. 

At maaari mong marahil hulaan. Ano ito marahil pagpunta na gawin kahit na kung ikaw ay hindi kailanman tumingin sa HTML o CSS bago? Madla: Baguhin ang kulay ng background. David J. MALAN: Oo, baguhin ang kulay ng background. At partikular ang kulay ng background ng katawan. Ngunit insofar bilang ang katawan para sa ngayon ay ang web page-- ito ay ang tanging bagay sa ibaba ng pamagat bar really-- marahil ito ay pagpunta sa iimpluwensya ng parehong bagay. Kaya sabihin makita. I-save ito Hayaan. Pumunta dito at i-reload. Ito ay medyo kahindik-hindik. At kung ano ang nangyayari dito ay isang side effect. Ko na lang pinili ang larawang ito nang sapalaran. Bakit ang green hindi permeating likod Mickey? Madla: [hindi marinig] David J. MALAN: Mismong. Ito ay lumiliko out na ang mga imahe, pretty magkano lahat ng mga imahe upang tayo'y gamitin, ay ang lahat ng rectangles-- ng parihaba. Kahit na Mickey ay may ilang mga curves sa kanyang sarili at may isang background, na background ay upang maging isang bagay. Ito ay upang maging puti. Ito ay upang maging itim o iba pang dahilan. Maaari itong maging transparent. At sa katunayan, kaya kong buksan Mickey Mouse dito sa isang programa na tinatawag na Photoshop o isang bagay na katulad at baguhin ang lahat ng mga puting na background na transparent, kaya ang green ay lumiwanag sa pamamagitan ng. Ngunit iyon lamang ang isang bagay na gusto ko kailangan na humingi sa aking sarili o ng isang graphic artist o isang taga-disenyo sa aking kumpanya, halimbawa, na gawin, lalo na dahil ako lamang hiniram ang isang ito mula sa internet. Ngunit iyon ang dahilan kung bakit ito ay nangyayari. 

Kaya ano pa ang maaaring gusto naming gawin? Well, baka gusto naming sinasabi namin talagang umaasa masiyahan kayo sa inyong pamamalagi. At para sa diin, gusto kong upang gawin ang malakas, at iba pa Sasabihin kong bukas malakas at isara malakas at pagkatapos ay i-reload. At ito ay isang maliit na mahirap upang makita sa projector ngunit marahil talagang ngayon jumps out sa iyo ng kaunti pa. Kaya maaari kang magdagdag italics sa ito paraan, bold nakaharap sa ganitong paraan. Maaari naming baguhin ang mga kulay. Sa katunayan, lamang sa mga kicks, ako pagpunta sa sige at gawin ito. Hindi ko talaga gusto kung paano ang aking talata ay ito malapit magkasama, ano pa't siya'y aking gawin ang isang bagay tulad nito. Pupunta ako sa sabihin sa browser, baguhin ang bawat talata tag na magkaroon, sabihin say-- talaga, alam mo kung ano, sabihin align ito text-align, center. At muli, alam ko na ito lamang dahil may itinuro ito sa akin o ako ay tumingin ito sa loob ng isang online na reference. Kaya hayaan mo akong i-save ito. At, ah, ngayon na ako nakasentro ang imahe doon. At talagang, alam mo kung ano, kung ilipat ko ang aking larawan sa isang talata tag-- kaya isang ikatlong talata, kahit na ito ay hindi mag-text. ni-save na at i-reload Hayaan. Ngayon ang pahina ay nagsisimula upang tumingin uri of-- Ibig kong sabihin, ito ay pa rin medyo mainit ang ulo, ngunit hindi bababa sa ito ay ganito ang hitsura ko na ginugol dalawang minuto sa halip ng isang minuto ginagawa itong. 

At sa gayon, incrementally, maaari naming gumawa ng mga aesthetic pagbabago ngayon sa page? Hindi ko na talagang nagbago ang data sa mga mga pahina maliban sa pagdaragdag ng salita really. Nagdagdag ako ng metadata, kung ikaw ay. Hey, browser, gumawa ng salitang "tunay" bold. Ngunit ang data ay hindi malakas. Iyan ay metadata. Ang data ay "talaga." Kaya pa rin namin ang ilan sa mga ang parehong konsepto tulad ng dati. Ngayon, siyempre, ito ay hindi sa web, kaya ako pagpunta sa gawin ang isa huling hakbang dito. 

Pupunta ako sa pumunta sa hello.html at lamang i-highlight at kopyahin ito. At ngayon ako pagpunta sa pumunta sa Cloud9, na kung saan makikita ba akong maglakad sa iyo sa pamamagitan sa loob lamang ng ilang sandali. At logro ay makikita mo sa lalong madaling panahon, kung hindi pa, sa isang screen na tulad nito. At hayaan mo akong lamang magbibigay sa iyo ng isang mabilis na tour ng kung ano Cloud9 talaga. Kaya muli ulap 9 ay ang serbisyong ito sa cloud-based na nagbibigay sa iyo at sa akin ang ilusyon ng pagkakaroon ng aming sariling mga virtual machine sa ulap, technically isang lalagyan sa ulap, na kami ay may ganap na administrative pribilehiyo sa. Kaya sa teorya, walang sinuman sino pa ang paririto sa mundo ay may access sa screen ako pagtingin sa ngayon, maliban siguro ang mga tao na patakbuhin ang site, dahil technically mayroon silang pisikal na access at iba pa. 

Kaya kung ano ang nakikita natin sa environment na ito? Pupunta ako upang mag-zoom out, dahil ito ay isang maliit na maliit. At hayaan mo akong ituro sa ibabaw dito para sa sandali lamang. Sa kaliwang gilid ng aking at ang iyong screen, may isang file browser sa kaliwa. Kaya katulad sa espiritu sa Mac OS at Windows. Ito ang lahat ng mga file sa aking account. At sa pamamagitan ng default, kung ang iyong account ay tulad ng minahan, makikita mo makita o madaling makita helloworld.html at readme.md. Sa paglipas dito sa kanan, ito ay kung saan ang aking text file ay pagpunta sa pumunta. Kung kailanman na iyong ginamit Microsoft Word o Notepad o TextEdit, ito ay salitang aking pag-edit ng mga file ay pagpunta sa pumunta. At pagkatapos ay ang pinaka-arcane tampok ng environment na ito na hindi talaga namin ay kailangan na gumamit ay pababa dito na tinatawag na isang Terminal Window. Kung nakagamit ka na DOS mula nakalipas na panahon, ito ay ang Linux o ang Linux katumbas ng DOS. Ito ay isang text-based interface-- walang mouse mga pag-click, walang pag-drag. Ang lahat ng maaari mong gawin ay i-type utos, ngunit ang mga utos maaaring lumikha ng mga file, ilipat ang mga file, buksan ang directories, malapit directories, gawin ang anumang bilang ng mga bagay. Ngunit sa ngayon, kami ay makikita lamang gastusin ang aming oras dito. 

At kaya sabihin gawin ito. Kung ikaw ay sa ito kapaligiran, na dapat mong maging kung lumikha ka ng workspace na, sige at pumunta lamang up sa File, New sa sangdali lamang. At na ay magbibigay sa iyo ng isang bagong tab dito mismo sa gitna. At just-- ko at sabihin sige, at gawin ito. Sabihin sige at ngayon ay File, I-save at sige at tawagan ito hello.html, hindi dapat malito sa helloworld.html, na kung saan kasama ng iyong bagong libreng account, na kung saan ay lamang ng isang sample file. Makikita mo ito biglang lumitaw, pinaka-malamang sa kaliwang gilid, at ang tab na ay pa rin bukas. At hayaan mo akong hinihikayat ka ngayon upang muling likhain ang file na ito o ang ilang mga variants nito. At kung hindi mo pa masyadong maaaring makita ito sa screen, ito ay kapareho ng mga slide na ikaw ay malamang na magkaroon sa ibang tab. 

Kaya sa maikling salita, gumawa ng iyong unang web page, i-save ito, at pagkatapos ay sa loob lamang ng isang sandali, Kukunin ko maipakita sa iyo kung paano mo maaaring aktwal na tingnan ito. Ngunit baguhin hindi bababa sa isang bagay. Baguhin helloworld sa isang bagay ng iyong sariling mga pagpipilian, nang sa gayon ay ikaw ay kumbinsido na ito ay ang iyong maghain at hindi ang isa ko lang ginawa. Lahat tama. At kapag kayo ay ready-- walang rush-- kapag ikaw ay handa na, sige, at i-save ang file isang beses na ginawa ang mga pagbabagong ito. At kung nag-click ang Patakbuhin button up tuktok, ito dapat magbukas ng bagong tab na magsasabi iyo kung ano ang URL na maaari mong bisitahin ang iyong file sa, ngunit ito ay maaaring tumagal ng ilang sandali upang quote magpanipi "simulan Apache," na ay ang pangalan ng web server. Kaya mag-ingat upang gawin eksakto kung ano ang sa file sa huli. Kaya ngayon, kukunin ko na mag-zoom in. Kung sisimulan ko ang pag-type open-bracket HTML, notice ito ay pagdikta sa akin upang tapusin ang aking pag-iisip. At kung natapos ko ang aking pag-iisip, ito awtomatikong nagbibigay sa akin ng closing na tag. Nguni't ang pagasa ay pagkatapos ay kukunin ko hit Ipasok, at pagkatapos ay ilipat sa loob doon at huwag magtungo sa loob at pagkatapos ay gawin ko katawan sa loob. At ito ay isang maliit na kakaiba sa una, dahil sa ito ay paggawa ng trabaho para sa iyo, ngunit mapagtanto na ganap ito makakatipid sa iyo keystroke. At sa katunayan, isang napaka-pangkaraniwang katangian ng programming kapaligiran mga araw na ito parehong para sa web development tulad na ito at aktwal na mga programa, na kung saan namin makipag-usap tungkol sa bukas, ay ang mga auto-complete tampok, bagay na lamang payagan ang isang programmer o isang taga-disenyo mag-type ng mas kaunting mga keystroke upang tuparin ang mga parehong bagay. Minsan ito ay mabuti, bagaman. Minsan ito ay lamang nakakainis. At, muli, sa oras na iyong na-transcribe ang slide o ilang variant nito, maaari mong i-click ang pindutan ng Run up tuktok. At pagkatapos ay sa ibaba window, ipapaalam sa iyo sa kung ano ang URL na maaari mong bisitahin ang iyong web page. Mine, halimbawa, ay business-daharvard.c9users.io at iba pa. O sige, kaya, hayaan me-- anumang mga katanungan? Anumang iba pang mga katanungan tungkol sa lamang sa pagkuha ng ito gumagana bago namin magdagdag ng mga tampok? At hayaan mo akong imungkahi, lamang upang makakuha ng folks comfortable-- dahil sa ito ay isang bagay na lamang kopya-dikit nang walang taros kung ano ang nagawa ko. Ngunit lamang upang ang folks makipagbuno na may hindi bababa sa isang to-do, Pupunta ako sa i-on ang ilang musika. Pupunta ako sa ipanukala ang isang listahan ng mga mga bagay na maaari kang potensyal na idagdag. At maaari mong tiyak na gamitin ang Google. At bakit hindi namin lamang imungkahi na subukan mo upang malutas hindi bababa sa isang partikular na problema dito. Kaya sa mga tuntunin ng mga tag, hayaan mo akong muling gamitin ito dito. 

Sa totoo lang, hayaan mo akong ilagay ito sa isang tekstuwal form. Sabihin natin na kabilang sa mga tags baka namin gamitin narito ang ilang mga tag sa paglipas dito. Nakita namin ang talata tag. Ngayon ito ay pagpunta sa auto-complete. Talata tag, anchor tag. Ipagpalagay natin na nais mong gumawa ng isang bagay na mas malaki, kaya maaaring ikaw like-- ang span tag ay maaaring makatulong. Well, maaaring kailangan mo ng ilang tulong para sa na sa loob lamang ng ilang sandali. Nakita namin ang div. Makikita mo ang mayroong table. May isang bagay na tinatawag tr, td. Th, td. Ay bumalik sa na sa isang sandali. Ano pa ang maaaring maging madaling-magamit? May strong. May diin, o sa halip em. There's-- ano pa maaaring Fancy mo dito? Well, kami ay kumuha ng isang tumingin sa na sama-sama. Form, na nasaksihan namin. May form. May input at ng ilang mga iba. O sige, kaya sabihin gawin ito. Upang sumagot ng Victoria tanong, hayaan mo akong unang siguraduhin na ang lahat ay lamang magagawang upang makuha ang kanilang kumusta pagtatrabaho. Pagkatapos hayaan mo akong ipakilala ng ilang iba pang mga ideya. Pagkatapos kami ay ipaalam sa folks malutas ilang mga problema sa kanilang sarili. Pagkatapos kami ay talagang bumalik sa na paniwala ng isang form, at hindi na namin makikita ang tunay na muling ipatupad magkasama ang front-end interface, kaya na magsalita, para sa Google mismo. Gagamitin namin ang Google bilang ang back end at ipaalam ang mga ito gawin ang mahirap na trabaho, ang searching, ngunit kami ay muling likhain ang front end ng Google at ang search form na mayroon sila sa kanilang sariling home page. At kaya kami ay bumalik sa mga tag sa loob lamang ng ilang sandali. 

Kaya ito ay kung ano ako iminungkahi ng isang sandali lamang ang nakalipas. Maaari naming idagdag ang estilisasyon sa isang pahina sa loob ng mga ito estilo tag, at maaari naming stylize background kulay, ang pagkakahanay ng teksto, maging ito man ay center o pakaliwa o pakanan. Ngunit masyadong mabilis ng ginagawa mo mahanap o isang web designer ay makita na ito ay nagiging isang maliit na mahirap gamitin, dahil ikaw ay gumagawa kung ano ang tinatawag paghahalo nilalaman sa pagtatanghal hinggil doon. Ikaw ay paghahalo ng iyong data at ang aesthetics niyaon. At sa katunayan, kung isaalang-alang mo ano ang pagpunta sa mangyayari sa paglipas ng time-- ito ay isang napakaliit na web page, siyempre. Ngunit kung ako magdadagdag ng nilalaman sa pahinang ito at idagdag ko style sa pahinang ito, pahina nang masyadong mabilis ay makakakuha mas mahaba at mas mahaba at mas mahaba. At ipagpalagay na gusto kong magkaroon ng isang pangalawang pahina ng web na nagbabahagi ang ilan sa mga katangian. Ipagpalagay aking ikalawang pahina ng web para sa aking site-- din, gusto ko lahat ng bagay center, at ako din gusto lahat ng bagay may isang kulay berdeng background. Ako medyo marami pagpunta sa may sa kopyahin at i-paste ang ilan sa mga linyang ito sa na pangalawang file, na kung saan nararamdaman fine. Ito ay malutas ang problema. 

Ngunit paano kung gusto ko ang isang ikatlong pahina o isang ika-30 pahina o isang ika-40 na pahina? Ngayon ako pagpunta sa ay pagkopya at pag-paste ng isang pulutong ng mga dobleng code sa iba't-ibang mga file. At kaya ipagpalagay na nagpasya akong o ako sinabi, hey, hindi namin gumagamit ka ng isang green background anymore. Kami ay pagpunta upang simulan ang paggamit orange. Ano ang kailangan mong baguhin? Well, ikaw ay may upang baguhin na style mula sa berdeng sa orange sa kung gaano karaming mga lugar? Tulad ng 30 o 40 mga lugar. Ito ay nakakapagod. Ito ay madaling kapitan ng sakit sa error. Mayroong isang bilang ng mga kadahilanan kung saan hindi mo nais na nais upang mang-upat na uri ng sakit para sa iyong sarili. At kaya hindi magiging maganda kung maaari naming kumuha ng kung ano ko na lang ilagay sa pagitan ng dalawang dilaw mga tag, mga estilo ng mga tag, kadahilanan ito, at ilagay ang lahat ng aking estilisasyon sa isa central file na ang lahat ng 30 o 40 ng aking iba pang mga file humiram mula sa o sa anumang paraan isangguni, hindi hindi katulad ng networking diagram aming ginagawa bago? 

Kaya kung pumunta ako sa dito, ako pagpunta sa aktwal na imungkahi na palitan namin ang style tag na may isang bagay na tinatawag na ang link na tag, na kung saan ay horribly, horribly pinangalanan, dahil hindi mo na gamitin ang link tag upang lumikha ng kung ano ang namin ang mga tao malaman bilang isang link sa isang pahina ng web. Para sa na, gamitin mo na tag? Paano mo lumikha ng isang link sa isang pahina ng web? Madla: a Ang. David J. MALAN: a-dagat, o anchor tag, na napunta sa Disney bago. Ang link tag dito ay sinasabi this-- link sa isang file na tinatawag na styles.css, ang relasyon na kung saan ang ay pagpunta sa maging na ito ay ang aking stylesheet. Kaya ito ay isa sa mga S sa CSS-- cascading style sheet. Style sheet-- dalawa sa S sa CSS. Cascading style sheet. Ito lamang ay nangangahulugan, hey, browser, pumunta mahanap styles.css sa mga lokal na server at gamitin ito bilang iyong stylesheet, na nangangahulugan sa loob ng file na ay pagpunta sa maging ang lahat ng mga stylizations na lang nagawa namin. At kaya kung ano ang file na iyon maaaring magmukhang ay na ito. At kukunin ko na lang gawin ito ay isang mabilis na Halimbawa, dahil hindi namin kailangan upang makakuha ng masyadong maraming sa mga damo dito. Ngunit kung kopyahin ko ito, kung ano ako pagpapanukala ay na ang isang programmer lumikha ng isang bagong file, i-paste sa mga lines-- whoops-- i-paste sa mga linya, save ito bilang styles.css, at pagkatapos, sa ang iba pang mga file, tanggalin ang lahat ng na at palitan ito sa halip sa link na ito tag. Kaya na kung i-link ko href = "styles.css", ang relasyon ay magiging "stylesheet" malapit na tag. I-save ito. Bumalik sa aking helloworld. Reload. 

Literal wala ay nangyari. Iyon ay isang magandang bagay, dahil ito nangangahulugan na ito ay tunay na ang lahat ng trabaho. Upang patunayan ng mas maraming, ipagpalagay gumawa ako ng isang typo, at tawagan ko ito "styles.css" na may malaking titik S, na kung saan ay hindi tama, at pagkatapos ay i-reload. Ngayon ay maaari mong makita ang mga ito lamang ay hindi gumagana. Ngayon, bakit? Well, sabihin gumamit ng isang diskarteng mula sa mas maaga. Hayaan akong sige at, sa aking browser, sa Chrome, ako pagpunta upang buksan up sa espesyal na tab network tulad ng dati, at hayaan mo akong i-reload ang pahina. Ano ang hindi ikaw mabigla upang makita ngayon? O siguro ikaw ay mabigla upang makita ito. Alinman sa dalawa, ano ang nakikita mo ngayon? Madla: [hindi marinig] David J. MALAN: Ito ay hindi natagpuan. Bakit hindi ito matatagpuan? Well, Styles.css-- capital S-- ay hindi umiiral. I misnamed ito. Simple typo. Ngunit ko natatanggap understandably ngayon ng isang 404, dahil ang server ay sinasabi, hey, ito ay hindi natagpuan. Literal, hindi ko alam kung kung saan ang file na iyon ay. Kaya bilang isang resulta, ang browser Ipinapakita sa iyo kung ano ito ay maaaring, ang raw nilalaman ng pahina, kung saan ay isang 200, ang HTML, ngunit ang estilisasyon hindi maaari idadagdag pagkatapos noon. At ito ay kung ano ay sinadya sa pamamagitan ng cascading. Maaari mong uri ng idagdag ito pagkatapos, at ito uri ng refines ang aesthetics ng web page. At maaari ka ring i-override ang mga estilo na may isa iba pang mga file stylesheet kung gusto mo. Ito ay hindi natagpuan, bagaman, sa kasong ito, dahil siyempre, misnamed ko ito. Kaya Gusto ko ay may upang ayusin na muna. 

Kaya sabihin sige at imungkahi ang mga sumusunod. Sabihin sige at gawin ito. Na nagsisimula sa marahil iyong helloworld file, ipaalam sa akin lamang mag-imbita ng ilang ng tampok na mga mungkahi. Kaya, Victoria, mo nais na gumawa ng ilang mga teksto ng mas malaki, right? O sige, upang maaari naming huwag gumawa ng teksto ng mas malaki. At makikita natin ang bawat umaagaw sa mga dukha lamang ng isang problema upang malutas. Gumawa text mas malaki. Hindi ako pagpunta sa pag-abala pagsulat na ito kapag kami may bullet teknolohiya karapatan sa paglipas dito. Kaya ang ilang mga problema. Kaya kami ay pagpunta sa subukan upang gumawa ng text na mas malaki. Lahat tama. Ano pa ang gusto ng isang tao imungkahi? Ano pa ang maaaring nais naming na maaaring gawin sa isang web page? ni magkaroon ng isang Hayaan maikling listahan ng mga bagay at pagkatapos delegado sa grupo upang tayahin ito lumitaw. 

Madla: [hindi marinig] 

David J. MALAN: OK, posisyon text sa iba't ibang panig ng pahina? Lahat tama. Iba pa. 

Madla: [hindi marinig] David J. MALAN: Ito ay. Kaya ang isang gif ay lamang ng isang iba't ibang mga format ng file. Lang namin na ginamit, kung ano, isang png o isang jpg marahil? Ginamit namin ang isang jpg. Kung ikaw ay kakaiba, ang isang labis na sagot sa iyong katanungan ay isang jpg ay karaniwang ginagamit para litrato, dahil ito ay sumusuporta sa milyon-milyong mga kulay o 24-bit na kulay. A gif ay karaniwang ginagamit para sa, tulad ng, internet memes mga days-- animation, tulad ng animated gifs. Ngunit ito ang mangyayari na gumamit ng isang mas maliit na kulay palette, lamang 256 posibleng mga kulay, ngunit ito ay sumusuporta transparency at animation. At pagkatapos ay mayroong png, na sumusuporta sa transparency at higit pang mga kulay ngunit hindi animation. Kaya ito ay isang kalakalan-off. Kaya pagdaragdag ng isang gif, bagaman, ay magiging functionally katumbas ng pagdagdag ng isang png o isang jpg. Yeah. Image pinagmulan katumbas. Kaya ang isang bagay sino pa ang paririto. ni magkaroon ng isang bagay hayaan na na ipinadala namin sa Victoria na gawin dito. 

Madla: Magdagdag ng mga pindutan para sa isang form. David J. MALAN: OK. Kaya magdagdag ng mga pindutan para sa isang form. At gagawin namin ang isa na magkasama. Sa gayon ay makikita maging isang perpektong segue karapatan pagkatapos hamong ito. Ano pa? Ano ang maaaring gusto mong gawin? Ang web na nararamdaman tunay underwhelming kung ito ay ang lahat ng maaari naming gawin. Madla: Baguhin ang kulay ng teksto. David J. MALAN: Baguhin ang ano? Madla: Kulay ng teksto. David J. MALAN: Baguhin ang kulay ng teksto. Lahat tama. Kaya, sabihin gawin ito. Just muli kaya na ikaw ay hindi, lamang sa pamamagitan ng ulit, paggawa ng eksakto kung ano ako ng paggawa, Pupunta ako sa i-on ang musika para siguro limang minuto dito. Ikaw ay malugod na gamitin Google. tuloy po kayo upang hilingin sa akin, at Kukunin ko ibulong isang pahiwatig sa iyong tainga. tuloy po kayo upang tumingin higit sa ibang mga balikat. Ngunit malutas lamang ang isa sa mga problemang ito. Ngunit kami ay gawin ang huling isa, ang bumubuo ng isa, kung magagawa namin, sama-sama. Kaya limang minuto upang malutas anumang isa sa mga problema gamit ang Google, intuwisyon, o anumang iba pang paraan na magagamit mo. 

[MUSIC nagpe-play] Lahat tama. Huwag mag-alala kung nais mong upang panatilihin tinkering, ngunit Kukunin ko palayawin isang pares ng mga sagot. Kaya ang unang mungkahi mula Victoria ay upang gumawa ng text na mas malaki. Kaya mayroong ilang mga paraan upang gawin ito. kasalukuyan ko na naibalik aking screen sa ito laki, bagaman ko na naka-zoom in artificially lamang upang makita ang mga bagay. At sabihin gawin ito. Hayaan akong sige at grab ang ilang mga pangkaraniwang text Latin lamang kaya mayroon kaming isang bagay na magtrabaho sa. Kaya bigyan ako ng isa lang sandali. Magtatagal ako gumawa ng tatlong talata. OK. Ito ay magiging isang mas mahusay na halimbawa. Kaya para sa curious, sa aking hello.html, ako lang ilagay tatlong walang saysay Latin talata lamang kaya kami ay may ilang mga teksto upang gumana sa. At ni Victoria layunin ay upang gumawa ng ilang ng ang teksto ng mas malaki. Kaya ko maaaring, tulad ng dati, pumunta sa dito. At hayaan mo akong gawin ito sa tamang paraan. Ako pagpunta sa magkaroon ng isang link tag na ang mga puntos sa isang file tinatawag na "styles.css," ang relasyon ng kung saan ay muli "stylesheet." At pagkatapos ay ako pagpunta sa i-save na at buksan up na ito "styles.css." 

Kaya, tulad ng dati, ako ang kakayahan sa ito CSS file upang aktwal na i-override ang default aesthetics ng isang web page, at ang default na aesthetics, siyempre, ay medyo mapurol. Ito ay uri ng normal na laki ng font, itim text, puting background, at iba pa. Kaya ipagpalagay Gusto kong gumawa ng lahat ng tekstong ito na mas malaki. kaya kong gawin ang ilang mga bagay. Sa aking styles.css file, ako baka iyong sabihin, alam mo kung ano, mag-aplay ang mga sumusunod sa ang katawan ng aking pahina. Sige at gumawa ng mga laki ng font 24 points, na kung saan ay isang bilang baka ako gamitin sa Microsoft Word. Hayaan akong bumalik sa aking web pahina dito at i-reload, at maaari mong makita na ito ay mayroon magkano ang mas malaking. At maaari naming makakuha ng isang maliit na mabaliw, tulad ng aming makakaya sa isang desktop-- gawin itong 96 puntos. Reload. At ito ay nakakakuha ng kaunti mahirap gamitin sa puntong ito. 

Ngunit maaari kong maging isang maliit na mas tiyak. Sa halip na nag-aaplay na ito stylesheet sa katawan ng aking pahina, ano pa ang maaaring kong ilapat ito sa halip, ano ang iba pang tag na maaaring pa rin function sa parehong paraan? 

Madla: Ang p tag? David J. MALAN: P tag. Kaya ang ulo ay hindi magiging tama, dahil ang ulo, hindi mo magagawa talaga kontrolin ang aesthetics ng. May mag-text doon o hindi. Ngunit ang p tag-- maaari kong sumisid sa isang maliit na mas malalim, kaya na magsalita, sa talata mga tag. At kahit na may tatlong, na ay ganap na ganap pagmultahin, dahil sa CSS, kapag ko lang sabihin "p," ito nangangahulugan ilapat ang sumusunod na sa anumang tag na tumutugma ito selector, ang selector lamang pagiging ang pangalan ng tag. Kaya kahit saan nakikita mo ang isang "P," mag-aplay ang laki ng font, at sabihin gawin itong mas makatwirang again-- 24 point. At alam mo kung ano, lamang para sa mabuting pamamaraan, sabihin gawin ang mga kulay red lamang para sa sandaling ito. At ngayon, kung i-reload ko, ngayon kami makita ang tatlong pangit talata. 

Ngunit ngayon ipagpalagay na ako uri of-- gusto ko ang unang talata upang tumalon out sa user. Hindi ko nais upang madagdagan lamang ang laki ng font ng lahat. At kaya ko talagang nais na makilala o makilala sa mga ito talata. Kaya sabihin makakuha ng alisan ng pula, dahil iyon lang ang uri ng kaakit-akit, at sabihin sige at gawin ang mga laki ng font 12-point sa pamamagitan ng default, nang sa gayon ay hindi namin pabalik sa isang bagay isang maliit na mas makatwirang. At ngayon ako lamang ang nais na dagdagan ang laki ng font ng unang talata. maaari kong gawin ito sa loob ng ilang paraan, ngunit isang paraan na marahil pinaka-edukasyonal sa sandaling ito ay upang gawin ang mga sumusunod. Hayaan akong sige at sabihin, ito talata ay may isang natatanging ID ng "unang." kaya kong itawag sa kahit ano ang gusto ko. kaya kong itawag sa "foo" o anumang iba pang mga salita, ngunit ako pagpunta sa bigyan ito ng ilang semantically makabuluhang pangalan tulad ng "unang." Ito ang natatanging identifier, ang ID, para sa aking unang talata. 

Ano ang maaari kong gawin ngayon sa aking stylesheet ay maging isang maliit na mas tiyak. Sa halip na sabihing, ilapat ang mga sumusunod sa p tag, maaari kong sabihin ang following-- mag-aplay ang mga sumusunod, o piliin, ang HTML element na may isang natatanging ID ng "unang." Ano ang gusto kong mag-apply sa mga ito? A laki ng font ng 24-point. Kaya Mayroon akong dalawang tagapili ngayon. Ang isa ay gumagawa ng lahat ng mga talata 12-point. Ngunit ang isang ito, lalo na dahil ito ay dumating second-- pagdating huling sa file-- ito ay may isang cascading epekto. Lamang ko na ginawa ang lahat ng aking tag talata 12-point, ngunit ito ngayon cascades at Ino-override na para sa anumang mga elemento sa pahina, ang anumang mga tag na ito sa pahina na kung saan ang natatanging ID ay quote magpanipi "unang." At ang hashtag sa kontekstong lamang ay nangangahulugan "natatanging identifier." Hindi ko ilagay ito sa HTML file. Ko, sa paglipas dito, sabihin lang quote magpanipi "unang." 

Kaya hayaan mo akong i-reload. At ngayon nakikita ko, ah, OK. Ibig kong sabihin, ito ay hindi na pretty, ngunit ito ay uri ng tulad ng paunang salita sa isang libro o isang bagay tulad na, kung saan ang unang talata ay mas malaki. Puwede maging kahit na mas tumpak na may lamang ang unang titik, ngunit hindi bababa sa I exercised na karagdagang kontrol. Ngayon maybe-- baka gusto kong gawin ito paminsan-minsan para sa anumang dahilan, at kaya hindi ko nais ito sa mag-apply sa isa lamang HTML tag. Sa halip, sabihin say-- sabihin ring gawin ang mga sumusunod. Class = "import." Sapagkat ang isang ID ay ginagamit upang katangi-tangi makilala ang isang bagay, isang tag, sa iyong web page, isang klase ay sinadya upang maging magamit sa anumang bilang ng mga elemento o mga tag sa iyong web page. Kaya ito ay magagamit muli. Isang ID ay hindi magagamit muli. Ang isang klase ay magagamit muli. 

At alam mo kung ano, para sa anumang philosophical reasons-- Hindi ko tapusin ang aking Akala ko na pagpunta sa sabihin na ang unang talata at ang pangalawang talata ay mahalaga. Kaya ako ng pagpunta upang ilapat ang klase na tinatawag na "Mahalaga," na, kung-save ang aking file at i-reload, ay walang functional epekto pa. Ngunit ako ay nagdagdag ng ilang mga metadata sa file, uri ng isang bagay na hiwalay mula sa mga core data ng file, kaya na ngayon sa aking stylesheet, kung ako sa halip sabihin ".important" - alam mo, anumang bagay na mahalaga, ako pagpunta sa gumawa ng font-kulay, red-- o sa halip hindi font-kulay, lamang ang kulay. Mayroong inconsistencies sa CSS kasamaang-palad. At i-reload. Ngayon pansinin ang unang dalawang talata ay pula ngunit hindi ang third, dahil ako lamang inilapat ang klase ng "mahalaga" sa unang dalawang ng mga bagay na ito. 

Kaya sa mga ID, ikaw ay may kakayahan upang tukuyin very tumpak. Sa mga klase, mayroon kang reusability. Ngunit sa parehong mga kaso, pansinin ang uri ng magandang-disenyo prinsipyo kung saan ako isinasali ang lahat ng mga aesthetics sa aking styles.css file. Kaya walang messiness dito. Walang pagbanggit ng pula o bold nakaharap o laki ng font sa file na ito. Sa halip mayroon akong semantically, may nailalarawan aking data bilang, dito ay ang ilang mahalagang data. Narito ang ilang higit pang mga mahalagang data. Bukod dito, dito ay ang "First" ng aking mga mahalagang data. Kaya HTML ay tungkol sa uri ng pag-tag, literal, mga salita at mga talata at constructs sa iyong pahina na may mga maliit na mga pahiwatig, kung ikaw ay, na maaari mong paanuman pagkilos gamit iba pang mga pamamaraan tulad ng CSS sa ganitong paraan. 

Kaya sa sagot sa tanong na ni Victoria, maaari naming gumawa ng text na mas malaki sa na paraan. May mga kaya maraming iba pang mga paraan, ngunit ang font tag-- bukas bracket "font" - ay talagang ilang taong gulang. At ito ay ang problema, masyadong, na may pag-asa lamang sa online resources-- malamang sila na maging lipas na sa panahon. At sa katunayan, na na hindi na ginagamit, dahil ang mundo natanto, ano ibig sabihin ng "font-size = 7" ibig sabihin nito? Ito ay hindi. At kaya para sa maraming taon at upang ito day-- isa sa mga side tala dito ay na ito ay talagang incredibly masakit pa rin minsan upang bumuo ng mga site para sa web, dahil Microsoft at ng Google at Mozilla at iba ay kalimitang hindi nagkakasundo sa kung paano sa kahulugan ng isang pagtutukoy tulad ng HTML. 

May isang rulebook para sa HTML na pangkalahatan sinasabi kung ano ibig sabihin ng bawat tag. Ngunit minsan ito ay kaliwa upang ang pagpapasya ng pagpapatupad, Microsoft pagpapasya at Google. At kaya makikita mo napakadalas makita sa isang website ng isang bagay asta naiiba sa isang PC kaysa ginagawa nito sa isang Mac, at iyon talaga dahil, sa pagtatapos ng araw, hindi nila subukan ito mahusay sa parehong mga platform. Ngunit ito ay din dahil makatwirang, matalino na mga tao ay hindi sumasang-ayon at mga kumpanya ay hindi sumasang-ayon, at iba pa isa sa mga hamon ng programming para sa web o pagdidisenyo bagay para sa web ay sumusulat ng iyong website sa isang paraan na gumagana sa bawat web browser. Ngunit kahit na hindi makatwiran, right? May mga kaya maraming mga bersyon ng mga kaya maraming browser out doon na, sa isang punto, ikaw ay mayroon din na gumawa ng isang paghatol na tawag at ikaw ay may upang magpasya bilang isang kumpanya, lalo na para sa e-commerce-style site kung saan ikaw ay sinusubukan mong gamitin ang pinakabagong at pinakadakilang teknolohiya upang magbigay ng isang tunay na magandang user karanasan. Ngunit ang ilang mga porsyento ng iyong mga gumagamit maaaring pa rin gamit ang Internet Explorer 6 o 7 o 8, lalo na depende sa bansang iyon sila nagmumula. 

At kaya napaka-karaniwang konsulta ay isang bagay tulad ng "mga istatistika ng web browser." At kung pumunta kami to-- sabihin makita Wikipedia at makita kung paano up-to-date ang tsart na ito ay kung diyan ay isa. Kaya dito maaari mong makita kung saan browser talagang ay, ayon sa Disyembre 2015, ayon sa US Government. Chrome ay 42% market share, na sinusundan sa pamamagitan ng IE sa kalakhan sa corporate setting o mga setting ng PC, siyempre, sinundan sa pamamagitan ng Firefox, pagkatapos Safari, pagkatapos Opera ay hindi gawin ang mga mapa dito para sa ilang mga dahilan, at pagkatapos ay iba. Siguro ito ay sa ilalim ng Iba. Ngunit mas may problemang kaysa is-- sabihin makita kung Wikipedia din itong mga bersyon ng mga browser version-- 

Natin pumunta sa mga istatistika browser. IE. Kahit na hindi sapat. istatistika Browser. Aking bersyon. Iyan ay hindi pagpunta sa maging tama. makita ang mga bersyon Hayaan. Browser market share. Tingnan natin kung ito ay dumating up Hayaan. OK. Ngayon na ito ay nakakakuha ng isang maliit na mas kapaki-pakinabang. Kaya dito, mapapansin na mayroon kaming lahat iba't ibang mga bersyon ng mga browser. At, ang aking diyos, kung look-- mo ang Chrome 48, Chrome 47, Chrome 31, Chrome 45. Ibig kong sabihin, mga browser unting ina-update, at kung minsan ang ilan sa mga pagbabagong iyon ay makabuluhang sa mga tuntunin ng pag-andar. At kaya sa ilang mga punto, ang managers produkto o ang mga inhinyero kailangan upang makagawa ng isang decision-- mo alam kung ano, lamang ng 1% ng mundo ay pa rin gamit IE 7. Upang impiyerno na may ito. Lamang kami hindi pagpunta sa suporta na browser. At kung ano ang ibig sabihin na hindi sinusuportahan? Ito ay maaaring nangangahulugan na pindutan ay hindi gumagana sa iyong web page, o maaari itong ibig sabihin ng format ay ganap na off. O baka kailangan mong gumawa ng na parehong tawag paghatol sa mobile mga araw na ito, kung saan, hindi namin hindi pagpunta upang suportahan ang iOS 5 anymore. Kaya mga tao na lang ay upang i-upgrade ang. O kaya hindi kami ay pagpunta upang suportahan Cupcake sa Android OS para sa mga Android device, dahil bilang ang world-- bilang ang tech mundo ay nais na sumulong, ito uri ng ay nais na i-drag ang mundo na may ito upang hindi sila kung patuloy na maging backwards compatible kaya sila maaaring mag-alok ng bago at mahusay na mga tampok. Ito ay sa katunayan isa sa mga dahilan bakit kaya maraming mga kumpanya ay lumiligid out awtomatikong pag-update at pag-uuri ng pagpilit ang pinakabagong bersyon ng software sa amin. At kahit na mga kompanya ng tulad ng Apple ay ayusin ng pilitin mong halos o pilitin iyo sa mga tuntunin ng mga pwersa ng merkado upang bumili ng isang bagong telepono dahil sila lamang Hindi maa-update ang iyong lumang telepono anymore. Kaya miss ka out sa pinakabago at pinakamahusay na mga tampok, dahil ito ay magastos sa mga ito bilang isang kumpanya upang mapanatili ang mas matanda, arguably bulok na bersyon ng software. Ngunit ang net effect ay na amin namang binabata ito pati na rin. 

Kaya ipaalam sa tumagal ng isang pagtingin sa lamang isang pares ng mga huling mga bagay dito. ni magpatumba real mabilis ang ilan sa Hayaan mga iba pang mga bullets, kung curious. Kaya't kung ikaw ay sinusubukan upang, halimbawa, posisyon ang teksto sa iba't ibang panig ng page, ako pagpunta sa gawin ang isa mabilis na paraan, ngunit mayroong iba't ibang paraan ng paggawa nito. Hayaan akong sige at eliminate-- gawing simple ito tulad ng sumusunod. Hayaan akong pumunta lamang pabalik sa aking simple, simple talata. Hayaan akong bumalik sa aking styles.css. At ako lamang ang pagpunta sa gamitin ang simple-- na maaaring nakakita ka sa Google o isipin ang mula earlier-- text-align ng tama. At i-reload ang pahinang ito. Ngayon ang lahat ay tila na maging right-nakahanay, bilang maaari mong makita sa overhead dito. 

Maaari naming gawin itong tumingin ng kaunti pa libro-like, at maaari naming sabihin ang "pawalang-sala" at i-reload. Ngayon ay maganda at square sa magkabilang panig, na kung saan ay uri ng nice. Ang isa pang layunin na nagkaroon kami dito ay baguhin ang kulay ng teksto. Kaya nakita natin na sa aking red text. At ngayon magdagdag ng mga pindutan para sa isang form. Kaya bakit hindi namin subukan na gawin eksakto na ito? Ngunit unang hayaan mo akong pumunta sa isang site na karamihan sa atin gamitin ang bawat day-- Google. At ipaalam sa tumagal ng isang pagtingin sa kung paano ang Google ay talagang gumagana. Ngunit ako pagpunta sa gawin ito. Unang hayaan mo akong gawin ito in-- yep, hayaan mo akong pumunta sa Google sa unang. Ako pagpunta sa may sa pumunta sa Mga Setting ng Google, dahil gusto kong i-disable isang bagay na tinatawag Instant Resulta. 

Kaya maaari mong napansin sa Google mga days-- hayaan mo akong bumalik at i-on ito sa. Kaya kung sisimulan ko na naghahanap para sa "cats" tulad nito, mapansin na hindi lamang gawin nakukuha ko auto-makumpleto up top, ang lahat ng isang biglaang, ang pahina mismo tila upang baguhin medyo mabilis pati na rin, at iyon ang Google gamit ang isang wika tinatawag JavaScript sinusubukan na maging helpful. Ngunit sa kasamaang palad, ito uri ng messes up ang aming discussion ng kung ano ang tunay na nangyayari sa ilalim ng hood dito. Kaya ako lang ang uri ng mabilis i-off instant resulta. At ako pagpunta sa i-click ang I-save. At ngayon ako pagpunta upang buksan na diagnostic toolbar na ako panatilihin ang pagbubukas sa ilalim ng tab na Network. Kaya sabihin gawin ito. Hayaan me-- whoops-- mag-scroll ito pababa sa isang bit. At hayaan mo akong maghanap para sa "cats." 

At ngayon notice-- talaga, ito ay isang magandang pagkakataon upang talakayin sa sangdali lamang. Pansinin ang sandali type-- ko ihinto ito. Itigil mo yan. OK. Pansinin ang sandali-type ko ang sulat C, panoorin ang ibaba ng screen. A- T- S. Ano ang bottom ng screen na ito, ang aking tab Network, iminumungkahi ang nangyayari sa bawat oras na ako mag-type ng sulat? Sa kasamaang palad, ang palaka ay napaka distracting ngayon o ang halaman ng semrok o ano pa man siya ay. Ano ang nangyayari sa bawat oras na ako nag-type? At hayaan mo akong i-clear ang buffer at i-type ito muli. So-- Whoops. Sa bawat oras na nagta-type ako ng isang sulat, C- A- T-- kaya ng isang bagong hilera nang walang alinlangan ay nagpapanatili sa paglitaw. Ano ang sinasabi ng mga hilera ay kumakatawan, batay sa kung ano ko na nakita at napag-usapan namin ganiyang kalayo? Madla: Ang isang search? David J. MALAN: Ang isang paghahanap, o pa generically, isang HTTP request mula sa aking browser sa server. Well, kung bakit ay ang aking browser paggawa ng isang HTTP humiling sa bawat oras na i-type ako ng sulat? 

Madla: [hindi marinig] David J. MALAN: Oo, ito ay nagbibigay harap ko nitong auto-ang buong resulta. Like, kung saan gagawin ang mga mga resulta ng paghahanap mula sa darating? Well, sa tuwing ako mag-type ng sulat, Google ay nagpapadala ng higit at higit pa at higit pa sa ang salita ako type. Bakit? Dahil gusto nilang bigyan ako ng isang mas mahusay at mas mahusay, mas mahusay na mga mungkahi, isang listahan ng mga mungkahi, para sa kung ano salita Sinusubukan ko upang aktwal na kumpleto na. Kaya ito ay upang sabihin literal bawat karakter nagta-type ka sa Google ay ipinadadala, huli sa bulk, kundi pati na rin kung minsan ang isa sa isang pagkakataon upang ipatupad mga auto-complete tampok kapag ang data ay, siyempre, sa web. 

Ngayon, sabihin tumagal ng isang pagtingin sa kung ano ang tunay na ang mangyayari kapag nag-click ako Google Search. At pagkatapos ay gagamitin namin pagkilos na ito sa ating sarili. Kaya kung mag-scroll ko pababa ngayon sa pinakadulo unang kahilingan na lamang ang nangyari. Pansinin ang mga sumusunod. Ito ay ipinadala sa isang medyo matagal na URL-- https://www.google.com/search? at pagkatapos ng isang buong grupo ng mga bagay-bagay. Natin makita ito aktwal na ngayon sa tab ng browser mismo. Sabihin makakuha ng alisan ng toolbar dito. Narito ang pahina ng mga resulta ng paghahanap. At pansinin narito ang URL. Ngayon, maaari mong marahil hulaan kung ano ang nangyayari dito sa bahagi. Kaya una sa lahat, ang isang kahulugan. Ito tila ay ang patutunguhan kung saan ang form ay isinumite. Kaya kapag ako nag-type sa mga salitang "pusa" at pindutin ang Enter, tila ipinadala Google aking text input sa URL na ito na ko na naka-highlight doon, slash paghahanap. Lumiliko out, sa isang URL, ang anumang bagay na ang mangyayari pagkatapos ng isang tandang pananong ay, habang sinusunod natin na sinasabi, isang key-value pares na nai-type sa form o sa anumang paraan ipinadala mula sa browser sa server. 

Kaya anumang oras nagta-type ka input sa isang form sa web at ito ay ipinadala bilang na namin tinatalakay, sa pamamagitan ng isang makakuha ng, isa sa mga ito virtual envelopes, ang mga nilalaman ng na envelope-- yes, panatilihin pagkuha ng pinalamanan pisikal sa sobre sa klase ngayon, ngunit technologically tunay na ito ay ilagay sa URL. Kaya sa katunayan, hayaan mo akong suriing mabuti sa pamamagitan na ito. Saan mo nakikita ang user input? Saan mo nakikita ang isang bagay na ako mismo nag-type up dito? Oo, kaya "cats." Right? Kaya hayaan mo akong magdistila ito sa isang bagay na mas simple. Ako pagpunta sa tanggalin ang lahat ng bagay tungkol ang URL na ito na hindi ko maintindihan, at tingin lang ako sa pagpunta sa umalis ito bilang this-- / paghahanap? q = cats. Susubukan naming makita kung saan q ay mula sa isang sandali, ngunit na nararamdaman tulad ng minimum halaga ng impormasyon na ibinigay ko. At ngayon ako pagpunta sa pindutin ang Enter. At mapansin ito pa rin gumagana. Kami ay pa rin makakuha ng likod ng isang buong grupo ng mga pusa. Kaya Google ay may interes kaysa ito mga araw na ito. Ito ay 2016, hindi 1999. Kaya mayroong iba pang mga bagay-bagay na ang aking browser ay nagpapadala sa server. Ngunit ito ay minimally lahat na ay kinakailangan. 

Kaya kung ano kaya ang nangyari? Well, unang hayaan mo akong magpatuloy at pumunta pabalik sa Cloud9 at hayaan mo akong magpatuloy at isara ang aking mga tab nang mas maaga. At kukunin ko na gawin ito sa aking nagmamay-ari lamang para sa isang sandali. Ako pagpunta sa sige at lumikha ng bagong file. At ako pagpunta upang i-save ito bilang google.html. At ako pagpunta sa napaka quickly-- Ako pagpunta sa magnakaw, talaga, ang ilan sa mga tekstong ito lamang upang makatipid ng oras. Pupunta ako sa i-paste ito sa dito. Hindi ako pagpunta sa abala sa anumang estilisasyon oras na ito. Kami ay pagpunta sa tawag na ito "My Google." At ako pagpunta sa kumuha alisan ng lahat ng bagay sa katawan. At ako pagpunta sa gawin ang mga sumusunod. Hayaan akong mag-zoom in. Bumuo action-- at bilang ako sa madaling sabi nabanggit earlier-- whoops-- bilang ako sa madaling sabi nabanggit mas maaga, ang pagkilos ng isang form ay kung saan mo ipadala ang data sa. Kaya google.com/search. At ang paraan na gusto kong gamitin maaaring isa sa dalawang bagay. Puwede kang mag-Ito ay magiging "makakuha ng," kapag sinusunod natin tatalakayin, o maaari itong maging "post." Para sa ngayon, ang mga pundamental na pagkakaiba ay, kung gumamit ka ng "makakuha ng," ang lahat ng mga impormasyon na ang user ay nagbibigay makakakuha ng ipinadala sa URL. 

Iyon ay mahusay para sa mga bagay tulad ng paghahanap engine at ng ilang mga iba pang mga application, ngunit sa kung ano ang pangyayari gagawin hindi mo nais na punan ang isang form at ang impormasyon ay end up ang URL, tulad ng sa address bar ng iyong browser? Anong klaseng mga form gawin you-- Madla: [hindi marinig] David J. MALAN: Oo, tulad ng kung ano? Madla: Ang mga password. David J. MALAN: Oo, kaya mong mag-log in sa Facebook o ilang website. Iyon ang dahilan user input mula sa isang anyo, ang isang text box, ngunit ikaw marahil ay hindi nais na ito sa paglitaw sa URL ng browser. Bakit? Ibig kong sabihin, siguro mayroong ilang mga implikasyon sa seguridad sa network, ngunit more-- gusto, mas lamang, paano kung iyong kasama sa kuwarto, ang iyong mga makabuluhang iba pang, ang iyong mga anak, ang iyong asawa ay mukhang sa pamamagitan ng iyong kasaysayan ng browser? Hayan ang inyong password karapatan doon sa history ng iyong browser. Iyan ay hindi pakiramdam tulad ng magandang disenyo. O kahit na mas technically, Ipagpalagay na sinusubukan upang mag-upload ng isang larawan sa Flickr o Facebook o wherever-- iyon ay user input, kahit na ito ay isang maliit na mas interesting-- paano ako magsiksik mga terap at nasa bar URL? Ikaw uri ng uri ng ay hindi. Maaari mong uri ng. Ngunit, talaga, ako hard-pinindot na isipin paggawa na. Kaya kailangan ko ng isa pang paraan para sa upload ng mga larawan sa isang website, at na ang ibang paraan ay tinatawag na "post." Ngunit sa ngayon, kami na lang makipag-usap tungkol "Makakuha ng," kung saan ay ang mas simple ng dalawa. Ito lamang inilalagay ang lahat ng user input sa URL. 

Kaya narito ang anyo Lumilikha ako. Gusto ko ng isang input. At alam mo kung ano? Ako pagpunta sa kumuha ng isang hula dito. Pupunta ako sa pagpapabalik aking input "q" para sa "query." At sa tingin ko ito ay isa sa mga orihinal na disenyo, marahil, mula sa 1999. At pagkatapos ay ang uri ng input na ito ay lamang pagpunta sa maging "text." At pagkatapos ay ako pagpunta sa magkaroon ng isa pang input na hindi kailangan ng isang pangalan, bilang namin makikita sa lalong madaling panahon makita, ang uri ng kung saan ay ang "ipasok." At ito ay pagpunta sa bigyan ako ng isang espesyal na pindutan. At na ito. 

Kaya hayaan mo akong magpatuloy at i-save ang file na ito. Pupunta ako sa bumalik sa aking browser at pumunta sa google.html. Enter. At ito ay uri ng hiwa-hiwalay upang sabihin ang hindi bababa sa. Ngunit ipaalam sa akin sige at hanapin ang "cats." At mapansin Ako ay kasalukuyang sa URL na ito Cloud9. Ngunit sa sandaling nag-click ako ito, kung saan ang inaasahan mong makikita ko end up? 

Madla: Google. 

David J. MALAN: Google. Kaya sabihin i-click ang Isumite. At sa katunayan ko na muling ipinatupad Google. Right? Ito ay mas simple. Ito ay mas magaan. Ibig kong sabihin, ang aking code ay malinaw na mas mahusay kaysa sa kanila, mula sa gulo ng nakita natin mas maaga. At alam mo kung ano? Pupunta ako upang pagandahin ito up ng isang maliit na bit. hindi ko banggitin ito nang mas maaga. May mga tag tulad ng H1, para Heading 1, ang pinaka-mahalagang heading sa isang page. "Ang aking Google," Tatawag ako ito. Hayaan akong i-reload. Ito ay naghahanap ng kaunti mas mahusay na. At, talaga, alam mo kung ano? Na ako already-- ko lied. Sinabi ko hindi ako ay pagpunta sa estilo na ito, ngunit ako pagpunta sa estilo na ito tulad ng dati. At ang aking katawan ay pagpunta sa maging, sabihin nating, text-align center. Ito ay naghahanap ng mas maraming tulad ng Google na. 

Kailangan ko ng isang line break, bagaman, para sa na Isumite button. At ito ay lumiliko out, ikaw maaaring gumamit ng mga talata, o maaari mong mas literal lamang sabihin, bigyan ako ng isang line break here-- ang br tag. At kung i-reload ko ito, ngayon ito napupunta doon. Ito ay isang maliit na pangit, kaya ako maaaring gawin ang maramihang mga linya ng break, ngunit sabihin hindi makakuha ng masyadong matakaw dito. Kaya ngayon sabihin makita kung ito ay gumagana para sa "aso." Ito tila sa trabaho para sa "aso," pati na rin. Kaya kung ano ang nag-uudyok na takeaway dito? One-- ay hindi isang malaking tumalon sa ipakilala ng ilang higit pang mga tag, tulad ng mga form na tag sa input tag. Ngunit higit pa sa panimula ay, ang lahat kami ay gumagawa ng ay leveraging aming pagkakaunawa ng HTTP at ang katotohanan na anyo sa huli baguhin kung ano ang sa URL ng browser, at iba pa, samakatuwid, maaari naming wala sa loob magbigay ng input sa isang server sa pamamagitan ng paggawa ng isang HTML form at pag-alam na ang server nauunawaan HTTP, gusto lamang ang aming katawan nauunawaan, tulad ng, nanginginig ang aking kamay, na parehong protocol, at kaya kami ay bumalik ang mga tugon na namin sa huli inaasahan. 

Kaya sabihin subukan upang gawin ang isa huling bagay na ngayon na may mobile, at kukunin ko na make-- kukunin ko na magdagdag ang code na ito sa mga slide. Kaya kung nais mong i-manghihinang, ikaw maaari tiyak na dalhin ito mula doon. Ngunit ako pagpunta sa pumunta magpatuloy at gawin ang isang bagay. Ako pagpunta sa sige at buksan ang aking index page-- aking kumusta page tulad ng dati, na kung saan ay may maraming mga tekstong ito faux-Latin, o walang kahulugan Latin teksto, at has-- ito ganito ang hitsura nito sa laki ng font na ito. Ngunit ipaalam sa akin sige at gawin ito. Pupunta ako sa pumunta sa Cloud9. At hindi mo na kailangang gumawa ng hakbang na ito. kukunin ko na lang gawin ito sa aking sarili. Pupunta ako sa i-click ang Ibahagi. At ito ay isang tampok lamang sa Cloud9, kung saan ko mapapalitaw ang aking kapaligiran publiko. 

At lamang para sa kapakanan ng demonstration, hayaan mo akong gawin ito. Pupunta ako sa gumawa ng aking application publiko. Pansinin ito ay babala sa akin, ako Ako sigurado na gusto kong gawin ito, dahil ito ay pagpunta sa gumawa ng lahat sa mundo, kung ang mga ito dito ngayon o nanonood ng video sa ibang pagkakataon sa internet upang makita kung ano ang nakikita ko. Ngunit iyon lamang ang OK. Ako pagpunta sa sabihin ang "Tapos na." At hayaan mo akong hinihikayat ka, kung ako ay ito correctly-- hayaan mo akong subukan muna ito. Sige, kung hindi mo mind-- sa isang browser sa iyong computer, pumunta sa URL na ito, at sana makikita mo ang aking Latin text. At upang maging malinaw, ito ay tumatakbo hindi sa aking laptop. Ito ay sa cloud. Ito ay sa Cloud9, literal, ngunit Ginawa ko ang aking workspace pampublikong upang ang sinuman sa internet maaaring ma-access ang aking Latin home page. 

Pumunta sa parehong URL sa iyong telepono, kung maaari mong. Kung ito ay gastos sa iyo, bagaman, ikaw maaari lamang tumingin sa loob ng isang balikat. Madla: [hindi marinig] David J. MALAN: Sorry? Madla: [hindi marinig] David J. MALAN: Just Latin salita. Iyon lang. Ngunit iyon lamang ang kung ano ang dapat mong makita. 

Madla: Oo. David J. MALAN: Oo. Yeah. OK. Kaya ang maaari kong i-hold up ang iyong telepono para sa isang sandali lamang? Kaya, inaasahan namin na, kung ikaw ay sa pag-access ito, dapat itong magmukhang halos hindi mabasa. Walang still-- ibig sabihin ko, ito ay hindi mabasa dahil sa Latin. Ngunit ito ay hindi mabasa din para sa kung ano ang iba pang dahilan? Like, kung ano ang inaakala mong masama tungkol dito? Madla: Ito ay maliit. David J. MALAN: Ito ay sobrang, sobrang maliit. Kaya kung paano namin maaaring ayusin ito? Ito ay sobrang, sobrang maliit na sa Victoria phone at, kung ikaw ay nakuha ito up ang iyong sarili, marahil maliit na sa iyong telepono pati na rin, maliban kung ikaw may mga setting ng accessibility pinagana. Ano yan? Maaari mo lamang kurutin at zoom, na kung saan ay maisasagawa, ngunit pagkatapos ay mo lamang makita ng ilang mga salita sa isang pagkakataon. Kaya maghintay ng isang minuto. alam ko kung paano ayusin ito. Right? maaari ko bang gamitin CSS, at ako ay maaaring baguhin ang mga laki ng font mula sa 12-point sa 24-point. Ngunit ang pangalawang epekto ng na, siyempre, ay pagpunta sa maging ngayon, sa isang desktop o isang laptop, ngayon ang teksto ay dalawang beses na malaki. At kaya ito ay uri ng maging nice upang makilala sa pagitan ng mga aparato, at ito ay lumiliko out doon mga paraan ng paggawa na. Mayroong ilang mga iba't ibang paraan, sa katunayan, kung saan gamit ang CSS at may interes tampok na hindi namin ay pumunta sa sa mahusay na detalye, maaari kang mahalagang query ang browser at sabihin, kung ang iyong screen ay mas maliit kaysa sa na ito maraming pixels, gamitin ang laki ng font. Kung ang iyong screen ay mas malaki kaysa ito maraming pixels, gamitin ang iba pang mga laki ng font. 

Maaari kang maging kahit na may interes pa rin. Kung kailanman na iyong binisita ng isang web page na iyon, sa isang desktop, ay may isang malaking menu siguro off sa side, at pagkatapos ang lahat ng mga nilalaman ay sa bahagi ng na menu-- iyon ang uri ng isang pangkaraniwang paradaym. Menu sa kaliwa, nilalaman sa kanan, o vice versa. Hindi talaga gumagana sa mobile kapag ang iyong screen ay lamang na ito maraming pixels wide. Kaya mas karaniwan sa mga mobile ay, iyong menu ay biglang makakakuha gumuho, at mayroon kang upang i-click ang isang pindutan upang makita ito, o ang website ay ilagay ang menu itaas ito at ilagay ang nilalaman sa ibaba nito. At maaari mong ipatupad ang mga bagay sa maraming paraan, masyadong. Maaari mong tanungin ang iyong mga programmers, hey, team, anumang oras makikita mo ang isang HTTP request mula sa isang Android aparato, ang isang Microsoft aparato, ang isang Google device, isang aparatong Apple, gamitin ang laki ng font at gamitin ang menu layout, o kung hindi gamitin ang default mas malaking layout. 

Ngayon, gamit ang kung ano pangunahing pamamaraan ngayon maaaring ang mga inhinyero gamitin upang malaman kung ito ay isang iPhone, ang isang Android phone, isang laptop, isang desktop pagbisita server ng kumpanya? Sa ano sila makakuha ng impormasyon? 

Madla: Header? 

David J. MALAN: Oo, ang HTTP header. Kaya ang bawat HTTP kahilingan na nagmumula sa ang kanilang mga customer sa kanilang mga server kabilang ang, sa loob na virtual sobre, ang maramihang ng HTTP header, isa rito ay ang browser at ang mga operating system kahit na, kung mahalaga sa iyo upang na antas ng detalye. Ngayon, ito ay isang misteriyoso-mukhang string, ngunit may umiiral na software na ay lamang gawing simple na iyon, at maaari mo lamang hilingin sa programming code-- PHP, Java, C ++, whatever-- ano ang telepono ay this-- kung ano ang aparato ay ang user na ito ginagamit? At pagkatapos ay maaari mong sabihin, ipakita ang mga ito na ito na bersyon ng website kung ito ay isang phone. Ipakita ang mga ito ang bersyong ito ng website kung ito ay isang laptop o desktop. Ngunit hindi mo kahit na kailangan server-side kumplikado. Maaari mong gawin kahit na ang pinakasimpleng ng mga bagay. 

Pupunta ako upang gawin ito. Ako pagpunta sa sige sa aking Cloud9 kapaligiran, at pupuntahan ko upang magdagdag ng isang tag na nakita mo sa Google bago. Ito ay tinatawag na metatag. At hindi ko matandaan ang isang ito, kaya Ako pagpunta sa isalin sa ibang papel ito dito. Meta pangalan = "viewport" at pagkatapos ay content = "width = lapad device, intital scale = 1 "at na ang lahat. 

Kaya ito ay maaaring pati na rin maging tulad ng isang mahiwagang bulong. Ito ay hindi lahat na malinaw, ngunit ito ay may bagay na gawin sa ang viewport, at ang viewport ay lamang ang katawan ng isang web page, ang hugis-parihaba rehiyon na iyon tumutukoy ang karamihan sa mga pahina. At ito ay lamang na nagsasabi sa ang browser, alam mo kung ano? Gawin ang lapad ng pahinang ito epektibo katumbas ng lapad aparato. Sa ibang salita, huwag ipagpalagay na mayroon kang uri ng walang limitasyong space. Ipagpalagay na mayroon ka lamang ng mas maraming espasyo bilang ang aparato mismo ay malaki. At kaya ngayon, kung i-reload ko ito sa aking browser, nakikita ko walang pagbabago. Ngunit kung ako did ito correctly-- at hayaan mo akong i-cross ang aking fingers-- kung mo ang lahat reload ang iyong mga telepono, gawin mo makita ang isang nag-uudyok na pagbabago? Yeah, ay na- 

Madla: [hindi marinig] David J. MALAN: Oo. OK. Kaya arguably mas nababasa ngayon? Still maliit, upang maging makatarungan, ngunit hindi kaya maliit na maliit na bilang na maging makunat. At maaari ko tiyak override ito karagdagang sa CSS o sa gilid ng server, ngunit increasingly ano ang ikaw ay nakakakita ay higit pa at mas maraming mga tampok bilang idinagdag sa client-side environments-- JavaScript, bilang namin talakayin bukas, CSS, at HTML-- kaya na ang lahat ng mga query ay maaaring gawin sa client sa gayon ay upang mag-abala ang server ng maraming mas mababa at hindi sa may sa panatilihin up sa, para sa Halimbawa, ang hindi nagbabagong mabangis na pagsalakay ng mga bagong operating-system bersyon, ang mga bagong bersyon ng browser. Maaari mo lamang hayaan ang browser tanungin ang aparato, kung paano malaki ikaw ay, at pagkatapos ay gawin medyo lohikal desisyon batay sa na. Ngunit kami ay makita ang karagdagang mga pagkakataon para sa lohikal na desisyon bukas sa konteksto ng isang programming language. 

Kaya, ang anumang mga katanungan, at pagkatapos, sa web development? Ngayon ay hindi web programming, per se, dahil ang karamihan ng lahat ng bagay ginawa namin ay napaka-aesthetic, kung ikaw ay. Walang paggawa ng desisyon sa ang code na namin ang nakasulat, at sa gayon ay ang dahilan kung bakit HTML ay isang markup wika, hindi isang programming language. Ngunit bukas isasaalang-alang namin isang mabilis na pagtingin, sa huli, sa JavaScript, na kung saan ay isang aktwal na programming wika na nagbibigay-daan sa amin gawin ang isang bit more. 

May tanong? Well, hayaan mo akong magpanukala dalawang pagkakataon opsyonal para sa araling-bahay. One is-- mga Cloud9 mga account na hindi mawawalan ng bisa. Ikaw ay malugod na gamitin ang mga ito upang latero sa. Ito ay ang libreng antas ng serbisyo. Napag-alaman na, kung kapag lumilikha iyong workspace, na ginawa mo ito sa publiko, na ang ibig sabihin na ang sinuman sa internet ay maaaring makita kung ano ang iyong tina-type. Kaya siguro lamang isaalang-alang Hindi nakakahiya ang iyong sarili kung ikaw ay paglalagay ng iyong unang web page out doon sa publiko sinasadyang, ngunit walang isa ay pagpunta sa malaman upang tumingin doon pa rin. 

At two-- hayaan mo akong siklutin up ang URL na ito pati na rin, lalo na kung ikaw ay dumating sa araw na ito ang maliit na mas mababa kumportable kaysa sa iba, hindi sigurado kung ano nangangahulugan na ang lahat mga bagay-bagay na ito. Napag-alaman na mas higit pa sa video na ito, kung saan ay parehong isang mahusay na paraan upang makatulog at din upang tumawa habang paggawa nito, mayroon ding isang pulutong ng mga kagiliw-giliw na societally at seguridad-kaugnay na mga talakayan doon mula sa John Oliver, kahit na isang komedyante. 

Ngunit kung walang mga karagdagang katanungan, na nagdudulot sa amin sa reception. Kaya bakit hindi ko i-on ang musika. May ay dapat na inumin at meryenda sa labas. Ikinagagalak kong makisalamuha sapagka't kung paanong ako'y hangga't folks nais, sagutin ang mga katanungan ng mas maraming one-on-one. Ngunit, sa kabilang banda, tuloy po kayo upang mag-alis sa anumang punto, at kami makita kang muli bukas ng umaga para sa isang bit higit pa. O sige, thanks.