DAVID J. Malan: Labi. Mēs esam atpakaļ. Tātad, mērķis šajā gala sesijas ir ieviest vēl dažus jēdzienus bet arī dod ikvienam iespēju līdz veida stiept pirkstus un faktiski darīt kaut ko maz praktisku. Mērķis nav vērsties mums visiem par web izstrādātājiem ar jebkādiem līdzekļiem, bet tiešām tikai lai dotu jums garšu daži no pamata konstrukcijas no tā, ko tērēta web programmēšana un šodien tīmeklī attīstība, tāpēc statiskā pusē things-- nav loģikas, bez programmēšanas valoda, tikai statisks saturs. Un tas dos mums iespēju faktiski redzēt to, ko tīmekļa serveris ir, Redzēt, kas HTML fails, redzēt, ko tas ir HTTP ir faktiski apkalpo up. Taču, pirms mēs nirt, retrospektīvo jautājumi par mākoņdatošanas vai drošības vai kaut kur starp? Nē? Labi, labi, pieņemsim izdarītu, tikai gadījumā, ja process pierakstīšanos kaut kas ilgst dažas minūtes. Mēs ļaujiet to darīt fonā. Iet uz priekšu, ja jūs varētu, uz šo URL here-- c9.io. Šī ir trešā persona service-- platforma kā pakalpojums, ja jūs will-- kas notiek, lai jūs uzaicina pierakstīties uz kontu, un tas notiek, lai dotu katram no jums ir konts, tā saukto mākoni uz kāda cita infrastruktūra, uzņēmums, ko sauc Cloud9. Bet kas ir jauka par Tas ir tas, ka viņi jums tuvināšanu Faktiskais reālās pasaules attīstība vide, kaut arī mākonis un tīmekļa pārlūku, un mēs izmantosim šo faktiski eksperimentēt mazliet šodien. Un tad iet uz priekšu un vienkārši orientēties savu ceļu uz pierakstīšanās process ja Tu varētu. Tāpēc mēs notikt izmantot šo klasē Es mācīt visiem mūsu studentiem, gan uz Campus un izslēgt tagad, un tas ir aizstāts kādi vēsturiski bija citādi lejupielādējamu programmatūru. Tātad, ko jūs iegūt piekļuvi ir viens no šiem virtuālo mašīnu, būtībā, ka es aprakstīju iepriekš. Tātad šis uzņēmums Cloud9 iespējams nomas maksas no trešās party-- patiešām Šajā gadījumā, Google-- vienu veselumu ķekars virtuālās mašīnas ka viņi kaut kā karbonāde augšu ilūzija atsevišķu serveri ka katram no mums ir pilnīga kontrole pār. Tas nav gluži pareizi teikt ka viņi virtuālās mašīnas, lai gan, jo tas, ko Cloud9 faktiski izmanto ir nedaudz jaunākas tehnoloģijas sauc Konteineru. Un ļaujiet man paķert šo attēlu šeit, lai krāsu šo attēlu. 

Konteiners ir, ja jūs atceraties attēlu no agrāk, nedaudz vieglāks svars nekā virtuālo mašīnu. Faktiski, tā kā pagājušajā Šoreiz mēs runājām par tur ir operatīvā sistēma un hypervisor un tad viesu operētājsistēmas, viesu operētājsistēma, viesu darbības sistēma, virsū jūsu Fiziskajā aparatūras, atšķirība ar šo jaunāku tehnoloģija, Konteineru, ir tas, ka viņi visi kaut kā dalīties tā pati operētājsistēma. Bet viņi joprojām rada ilūzija ikvienam kam viņa vai viņas ekskluzīvs administratīvās tiesības un faili uz serveri. Bet tur ir mazāk programmatūru starp jums un aparatūru. To, kurš rezultāts ir, teorija, augstāku veiktspēju, jo jūs izmantojat vai izšķērdēt mazāk resursu uz minētā tā saukto virtualizācijas slāni. Tāpēc to sauc par Konteineru pēc būtības veidā tehnoloģiju, ko sauc dokers, kas ir ļoti daudz nonāk pati. Un tas ir kaut kas inženieri savu uzņēmumu varētu veida veida sākt runāt par drīz, ja tie nav jau, lai gan tur noteikti nav iemesls, lai pārietu uz jebkuru bandwagons. 

Tātad ar to teica, ko jūs droši redzēt tagad ir ekrāns, kas izskatās mazliet kā šis. LABI. Un tikai mani sauc vairāk, ja nav. Un, ja so-- es atnākšu vairāk, ja nav. Iet uz priekšu un noklikšķiniet, ka liels plus izveidot darbvietu, un jūs redzēt uz ekrāna, kā šis. Jūs varat zvanīt darbvietu nosaukt kaut ko vēlaties tagad. Un tikai faktiski vienkāršību, iet and-- labi, daži no jums jau ir darbvietas. Call to ko jūs want-- uzņēmējdarbību, Harvard, ceturtdiena, ko jūs vēlētos. Jums nav nepieciešams apraksts. Jūs varat atstāt to privāti, ja vien jums jau ir ķekars darbvietām. Ja jūs esat spiesti to darīt plaši pieejamu, tas ir sods par šodienas vajadzībām. Lūk, arī ir viens no Upsells. Jūs saņemsiet vienu privātu darbvietu, noklusējuma. Bet, ja jūs vēlaties vairāk, jums ir jāmaksā vairāk. Pretējā gadījumā viņi jūs piespiest lai padarītu savu darbu sabiedrībai. Bet tas ir labi, jo arī tie mērķis šo pie atvērtā pirmkoda kopienu lai mudinātu cilvēkus faktiski sadarboties. 

Un pēdējā lieta, ka ir svarīgi, lai gan, ir, pēc tam, kad jūs izvēlaties nosaukumu un pēc tam, kad jūs izvēlaties privāta vai valsts, noklikšķiniet HTML5, lielo oranžo ikonas Otrais no kreisās, un tam noklikšķiniet uz Izveidot darbvietas. Un tas, iespējams, ņem minūti, vai arī tā, bet jums tad ir vide, kad jums darīt, ka izskatās atgādina kas man ir uz ekrāna šeit tagad. Bet, atkal, tas var aizņemt minūti vai vairāk, lai iegūtu šo ekrānu pēc tam, kad esat noklikšķinājis Izveidot darbvietas. Bet tikai karogs mani vairāk, ja vēlaties mani lai apskatīt kaut vai padomu. Viss kārtībā. Tāpēc es esmu gatavojas fona tas tagad. Piezvani man vairāk, ja jums šķiet, ka ir kādas tehniskas problēmas. Bet, atkal, tā varētu veikt Mazliet par to atvērt. Un iesim uz priekšu un runāt par to, ko tas patiesībā nozīmē padarīt mājas lapu, kāda HTML ir, un kā tas viss tagad savieno kā mēs sākam faktiski izmantot kādu no tehnoloģiju. Tātad izrādās, ka es varu iet uz manu maz Mac šeit, atvērt vienkāršu programmu, ko sauc TextEdit, vai uz Windows es varētu atvērts kaut ko sauc notepad.exe. Un es varētu vienkārši darīt kaut ko tāpat this-- "Sveiki, pasaule." Un tad es varētu ietaupīt to kā hello.txt Tātad nav burvju tur. Tam nav nekāda sakara ar web programmēšana, neko darīt ar HTML. Tikai izveidojot vienkāršu teksta failu. Bet izrādās, ka web lapa ir burtiski tikai to. Tas ir vienkāršs teksta fails, kas satur tekstu ka jūs varētu rakstīt uz klaviatūras, bet tas parasti, bet ne vienmēr beidzas ne Txt bet html vai htm. Un jūs ne tikai ierakstiet vārdus failā. Jums tiešām ir izmantot lietas sauc tags vai, vispārīgāk, kaut sauc iezīmēšanas valoda. 

Tāpēc es esmu gatavojas ļoti ātri rakstīt un tad izskaidrot šādi. Es esmu gatavojas pirmais tipa tas, kas saka, hey, pārlūku, šeit nāk mājas lapa rakstīts HTML. Un šīs divas lietas kopā teikt, hey, pārlūku, šādi patiešām HTML. Hey, pārlūku, šeit nāk vadītājs vai top manu lapu. Hey, pārlūku, iekšpusē augšā Mana lapa, ielieciet nosaukumu, kas ir, "hello, pasaulē. " Hey, pārlūku, kad vadītājs mans lapa, šeit nāk ķermeņa manu lapu. Un, hey, pārlūku, ķermenis manas lapa būtu arī teikt, "Hello World". Tātad, kādi ir nozīmīgākie informācija šeit? Tas ir tas, kas ir vispār sauc doc tipa deklarācija, un, godīgi sakot, tas ir mazliet grūti šo iegaumēt sākumā. Jūs tikko veida kopēt-ielīmēt. Tas ir formāls veids kā pateikt, hey, pārlūku, Es esmu, izmantojot HTML versiju 5, kas iznāca nedaudz nesen. Tas ir burvju buršana, ka daži cilvēkiem ar sliktu sajūtu dizainu nolēma likt pie ļoti top no faila. Pat ja tas ir maz arcane, tas arī viss tas means-- Hei, pārlūku, šeit nāk ar HTML 5 versijas. 

Šīs atpūtas ir ar mums kādu laiku tagad, vēsturiski, bet tas ir bijis attīstās, un tas ir iespējams, ir iegūt mazliet vienkāršāku. Paziņojums dažas pazīmes no tā, ko es esmu izcelti. Tur šīs lietas ar leņķveida brackets-- kreiso kronšteinu un tiesības kronšteins. Un paziņojums simetriju šeit. Un simetriski, es domāju, tāpat kā es ir šī sākuma tagu šeit vai atklātu tagu ja jūs, šeit noteikti man ir tuvu tag vai tiešais tagu, kas ir atšķiras tikai tiktāl, ciktāl tas ir tas slash sākumā vārda HTML. Un jūs varat iedomāties tas, kā man bija pagadās ierosina pirms, hey, pārlūku, šeit nāk daži HTML. Un otrādi, hey, pārlūku, kas ir tas par HTML-- sākumā un beigās. 

Tikmēr hey, pārlūku, šeit nāk galvas manu lapu. Hey, pārlūku, kas ir to galvu. Hey, pārlūku, šeit ir ķermeņa manu lapu. Hey, pārlūku, tas arī viss, lai organismā. Un iekšpusē, kas ir daži patvaļīgs teksts tagad. Un iekšpusē galvu, tikmēr, ir daži patvaļīga bet tagged, tā sakot, tekstu, kas saka, titulu manas lapas ir "hello, pasaule." Tagad, tagad, jūs varat pieņemt, ka pārlūkprogrammas ir only-- vai, drīzāk, web lapas ir tikai divi parts-- galvu un ķermeni. Un galva parasti ir tikai piemēram, izvēlņu joslā, sīkumi tiešām tikai pašā augšā. Un ķermenis ir iekšām lapas, viss šajā lielā taisnstūrī kas aizpilda ekrānu. Tāpēc es esmu gatavojas iet uz priekšu un darīt to. Es gatavojas iet uz priekšu un noklikšķiniet uz Saglabāt, File Saglabāt. Un es esmu gatavojas, lai saglabātu tas kā hello.html, un es esmu tikai gatavojas ielieciet to uz mana galda. Un es iešu priekšu un noklikšķiniet uz Saglabāt. Un notice-- manu Mac at Vismaz ir kliegt uz mani. Vai tiešām vēlaties to darīt? Un es esmu gatavojas teikt, jā, izmantot HTML. Es zinu labāk šajā gadījumā. Un tagad es iešu uz mana galda kur man ir šo failu pēkšņi. Un es esmu gatavojas dubultklikšķi uz tā. Un jūs pamanīsiet, ka, noklusējuma, Chrome atvēra. Tas ir tāpēc, ka tas ir manu noklusējuma pārlūku. Un tas tikai saka: "Sveiki, pasaule." Bet tas saka "hello, pasaule "divās vietās. Paziņojums augšējā kreisajā stūrī. Diezgan grūti nepamanīt, ka. Tas ir liels un drosmīgs. Un kur gan citur tas šķiet teikt, "hello, pasaule"? 

Mērķauditorija: tab. 

DAVID J. Malan: Jā, tab pati. Tātad, kad es teicu vadītājs lapa ir viss up top-- un tiešām tas ir nosaukums. Tas ir tikai cilnē šeit. Un es varu pull šo cilni ārā tā, lai maldinātu. Tas ir tikai tab viena tagad, un patiesībā mēs redzam "hello, pasaule" šeit un "Hello, world" uz leju šeit. Tā diezgan vienkārši. Bet tas ir arī diezgan vienkāršs. Un, patiesībā, es pietuvināto. Es varu mainīt fonta lielumu tikko pārspīlēt pieejamības. Bet pieņemsim tagad kaut ko darīt nedaudz vairāk interesants. 

Es esmu gatavojas go-- Ak vai, pieņemsim man nokļūt atpakaļ uz manu teksta failu. Es esmu dodas atpakaļ uz manu teksta failu, un es esmu gatavojas mainīt šo un teikt "Hello, Disney World." Glābt. Un doties atpakaļ uz manu pārlūku un noklikšķiniet uz Ielādēt atkārtoti. Un tagad, protams, to saka "Disney World". Un es esmu gatavojas, lai mākslīgi palielinātu tikai tāpēc ir vieglāk redzēt. Tāpēc tagad, diemžēl, es veida gribu kuri paredzēti, patiesībā, tas ir Mac funkciju. Es gribu, lai noklikšķināt uz Disney World un doties kaut kur, piemēram, disney.com, bet tas nedarbojas. Tātad pamatprincips tīmeklī ir hipersaites, saites, kas iet citur. Tātad, kā es varu darīt? Nu, es varētu vienkārši pateikt, "Hello, http://www.disney.com." Saglabāt šo. Pārlādēt. Bet tas arī nav klikšķināmos. Un, kas ir jauki šeit, lai arī tas nav funkcionāls vēl, ir tas, ka, šķiet, ka pārlūks burtiski tikai ko es saku to darīt. Tātad, ja es vienkārši ierakstiet URL, piemēram, tas, tas vienkārši notiek, lai parādītu man URL. Man vajag, lai izmantotu tagus vai atzīmes valoda, lai faktiski pateikt pārlūkprogramma to darīt vēl vairāk. Tāpēc es esmu gatavojas iet uz priekšu un dzēst šo brīdi. Un es esmu gatavojas teikt, hey, pārlūku, sākt enkuru šeit, saite tā runāt. Un hiper-reference, galamērķis Minētās enkurs, būtu šo URL. Un paziņojums manas pēdiņas. Es varētu izmantot vienu pēdiņas, pārāk, bet jums ir jābūt konsekventiem, un es parasti tikai izmantot pēdiņas, lai saglabātu to vienkārši. Paziņojums Es esmu gatavojas slēgt tagu. Un tad šeit es esmu, teikt, "Disney World". Un tagad man vajag kādu symmetry-- open kronšteins, / a, slēgta kronšteinu. 

Tātad, ko es esmu ieviesusi? Mēs esam bija daži tagus jau. HTML, Head, Title, Body, ir visi tagi, tā sakot, ar atvērtām un slēgtām kolēģiem. Bet paziņojums, tas ir sava veida principiāli atšķirīgs. Tas ir tas, ko mēs saucam HTML atribūts. Un atribūts ir tikai atslēgas vērtību pāri. Tā ir izplatīta lieta Datora science-- atslēgu vērtību pāri. Tas ir sava veida instrumentu tirdzniecību. Galvenais un vērtība. Vārds un pēc tam daži citu vārdu vai vārdus. Un šajā gadījumā, galvenais ir href, un vērtība ir tā, ka pilns URL. Un ko atribūts dara tas ir ietekmē uzvedību tag. Un šajā gadījumā, mums ir nepieciešams, lai ietekmētu uzvedība enkura taga, jo mums ir nepieciešams nostiprināt šo saiti, lai kaut kur. Un kā jūs darīt, ir veidā atribūta. 

Tāpēc es esmu gatavojas iet uz priekšu un saglabājiet failu tagad. Iet atpakaļ uz manu pārlūku un papildināšanas. Un, voila, mums tagad ir pirmsākumiem likumīgu mājas lapā. Super-vienkārša, bet, ja es lidināties virs this-- paziņojums apakšējā kreisajā stūrī, tas ir super-mazs. Bet jūs redzēt www.disney.com. Un, ja es noklikšķiniet uz tā, tiešām šis putotāji mani prom uz disney.com. Tagad, ziņkārīgs lieta šeit ir tā, ka tas nav best-- visvairāk tirdznieciskās URL, bet tas ir jauki, jo šis fails nav pastāvēt par World Wide Web. Tā pastāv kā vietējā failu acīmredzot mani Lietotāji directory-- / jharvard-- par John Harvard-- / desktop. Bet tas ir URL. Tā vienkārši notiek, ir vietējie. Diemžēl neviens no jums var apmeklēt Tas, jo, ja jūs tipa šo URL, tu būsi stāsta pārlūkprogrammu, meklēt failu sauc hello.html uz jūsu cietā diska. Un, protams, ja vien jūs esat sekojuši līdzi manuāli, tas nav gatavojas pastāvēt tur. 

Tātad tas ir jauki. Mums joprojām ir nepieciešams veids, galu galā, lai iegūtu šo failu tīmeklī, bet pieņemsim ķircināt izņemot pāris ietekme uz drošību, ko mēs tikko redzēja un tie to atpakaļ uz agrāko diskusija no šī rīta. Izrādās, ka, ja pārlūkprogramma burtiski vienkārši dara ko es saku to, ko darīt, un šķiet, būt gadījums, ka enkurs tag ir ietekmē vērtību Šis raksturlielums sauc href bet tas parāda to teksts, tas šķiet nozīmēt, ka es varētu likt URL abās vietās, un pēc tam pārlādēt un tagad redzēt URL un iet uz URL. Paziņojums, ja es lidināties virs apakšējā kreisajā, Es esmu patiešām gatavojas vēl disney.com. 

Tātad, ja jūs esat kādreiz bijis phished-- P-H-I-S-H-E-D-- ar vienu no šiem viltus e-pastiem no, piemēram, PayPal jūsu bankas, Jūs droši vien esat gotten saites iekšpusē par e-pastu, jūs lasāt, ka stāsta jums noklikšķiniet šeit, lai dotos apstiprinātu Jūsu parole vai apstipriniet savu dzimšanas vai sociālo vai kaut sociāli inženierijas jums atklāt informācija. Nu, es varētu veida ņemt priekšrocība šajā, nevarēju es? Es varētu pateikt kaut ko piemēram, www.paypal.com. Un tā vietā, disney.com, es varētu doties uz, piemēram, badguy.com. Pārlādēt. Un cik viegli ir piekrāptais, īpaši netehnisks lasītājs vai īsumā lasīšanas lasītājs nekā uzklikšķināt saikne, piemēram, tas, kas, ja es noklikšķiniet it-- Es tiešām nevēlos iet badguy.com. Es nezinu, kas patiesībā tur. Tātad paypal.com, paziņojums, ir ko tas saka, ka tā notiek, lai, bet, protams, ja es skatos super-zems, tas ir mazliet neskaidra, bet tā saka badguy.com. Tas ir vienīgais pateikt tieši tagad ka es esmu gatavojas nepareizā vietā. Un, kad es teicu iepriekš, ka bankas tiešām nevajadzētu veicināt vai vilcienu Lietotājiem uz noklikšķinot saites, šis ir tikai viena izpausme tā. Un tas ir tik vienkārši. Jūs tagad pretinieks ja jūs darīt kaut kas līdzīgs šim un mēģināt triks lietotāju stājas apmeklē jūsu mājas lapā. Bet tagad, mēs glabāt lietas jauka un tīra. Mēs ejam, lai iet uz priekšu un attīšana šīs izmaiņas. Pārlādēt lapu. Un es dodos atpakaļ uz disney.com. 

Let 's redzēt, ja mēs nevaram kaitināt Tas papildus nedaudz vairāk. Tātad "hello, Disney World." Es esmu gatavojas teikt šeit lejā. Varbūt es esmu gatavojas darīt dažas vietas. "Mēs ceram, ka jums patika!" Glābt. Pārlādēt. Tas nav rea-- tas nav ko es paredzēti, vai ne? Es domāju, ja es esmu ārstējot manu tekstu failu, piemēram, vārdu procesors, ko jūs ceram, varētu notikt šeit? Jā, es jūtos kā tur jābūt līnija pārtraukums šeit, tāpēc uzskata buggy kaut kādā veidā. Bet tas tiešām tīši, jo tāpat kā iepriekš, pārlūkprogramma notiek tikai darīt to, ko tu pateikt to darīt. Es neesmu teicis, lai izjauktu līnijas. Man nav teicis to, lai pārvietotos uz leju, pat lai gan, intuitīvi, es jūtos kā es darīju. Tātad izrādās, mums ir nepieciešams nedaudz vairāk atzīmes, un es esmu gatavojas noteikt šo šādi. Es esmu gatavojas priekšvārds šo pirmo sveiki ar ko sauc tag punktu. Un tad es iešu uz priekšu un wrap šo citu sodu citā tag punktā, kaut arī viņi super-īsas rindkopas. Tagad es esmu gatavojas, lai saglabātu. Pārlādēt. Un tagad mums ir, ka telpa, un mēs veida ir semantikas divi atsevišķi punkti. 

Tas ir viss, naudas sodu un labi, bet tas jauki, lai pievienotu attēlu uz šo lapu, tāpēc es iešu meklēt Mickey Mouse Google attēli. Un tikai jautri, es esmu gatavojas greifers šo attēlu. Es iešu uz priekšu tagad paķert URL šī attēla, lai gan tur ir atšķirīgs veidi, kā to darīt. Tagad, es esmu tikai gatavojas kopēt URL. Es esmu gatavojas doties atpakaļ manā tekstā failu, un es esmu gatavojas teikt šeit, img src = quote likt pēdiņas beigās ka URL, super-gara. Un tad jēdziens attēls ir nedaudz atšķirīgs. Tur tiešām nav jēdziens sākuma attēla un beidzas attēlu, kā sākuma atzīmētu beigu tagu. Tātad tas jūtas mazliet dīvaini mani semantiski to darīt, būt tuvu attēla tagu. Tas nav nepareizi. Tas ir pilnīgi pareizi, un tas ir jāveicina, bet tur ir stenogrāfija apzīmējumu. Es varu veida vienlaicīgi atvērt un aizvērt pašu tagu, un kas padarīs pārlūku laimīgs. Tātad, tas ir tikai nedaudz vairāk īss lietām ka konceptuāli tiešām nav jēga sākuma un beigu. Viņi vienkārši ir tur, vai viņi nav. 

Tāpēc es esmu gatavojas, lai saglabātu šo un doties atpakaļ uz manu "Hello, World" lapā un papildināšanas. Un tas ir mazliet ārpus kontroles, jo tas attēls ir faktiski mazliet liels, bet tas ir OK. Es varētu mainīt to programmu. Vai jūs zināt, ko. Tikai, lai pierādītu, es esmu gatavojas tiešām teikt ka platums šī lieta būtu tikai 200 pikseļi, 200 punktus. Ļaujiet man iet uz priekšu un saglabājiet un pārlādēt, un tagad lapa izskatās mazliet vairāk saprātīgi. Bet paziņojums modelis. Nu, es esmu veida māca jums visu HTML kādā ziņā, vismaz konceptuāli, jo visi HTML ir ir šie tags-- atvērt tagus, slēgta tagus, un atribūti, kas mainīt savu uzvedību. Un, acīmredzot, ik tag var būt nulle vai viens vai divus vai vairākus atribūtus, katrs no kas dara kaut ko nedaudz atšķiras. Tagad, kā jūs zināt, kas ir? Jums tikai klausīties kādu piemēram, man pateikt jums to, kas ir, vai jūs vienkārši Google apkārt apmācība uz HTML, un tas tiešām ir šo vienkāršo. 

Patiesi, kad es biju undergrad gadiem un uzzināja HTML, viens no maniem matemātikas mācīšanas palīgi tikko pavadīja mazliet laika izglīto mani lai kā pusstundu, stundu, un tad man bija par manu ceļu. Man bija par manu ceļu pretī padarot visvairāk pretīgs mājas lapas jebkad, kas, acīmredzot, man nav tiešām progresējusi aiz. Bet jautājums ir, ka tad, kad jūs izprast šos vienkāršos ideas-- ja arcane text-- bet tie vienkārši idejas sākot doma un noslēguma domāja, saglabājot viss labi, balstīts, meklē kaut ko uz augšu, nemainot rīcība šo atzīmi, tas tiešām viss ir uz to. Un patiesībā, ja mēs tagad iet uz kaut kas līdzīgs google.com-- faktiski, iesim vietu mazliet vairāk reasonable-- stanford.edu. Un es iešu uz View, Izstrādātājs, View Source. Tas ir neglīts, bet notice-- un es ņemšu tuvinātu paziņojumā daži sīkumi, kas ir pazīstams jau. Tur ir tas šeit, kas ir pārlūks. Šeit nāk HTML5. Tur ir HTML. Acīmredzot, tur ir atribūtu, man nav izmantot, kas nosaka valoda lapā, un tas var palīdzēt ar automātisko tulkošanas un sīkumi, piemēram, ka. Lūk vadītājs lapā. Lūk nosaukums Stenforda lapā. Tur ir tag man nav runāt par yet-- Meta tagu. Tā ir tikai sava veida pamatinformācija. Tas palīdz ar SEO, vai meklēšanas optimizācija, vai Google meklēšanas rezultātus vai tamlīdzīgi. Bet, ja mēs pastāvīgi meklējam, saglabāt meklē, šeit ir Body tag. Un tur ir ķekarus citi tags mēs esam nav runājuši par vēl. Bet Div ir viens priekšlikums dalīšana lapā. Tas ir kā neredzams taisnstūra ja jūs veida vēlaties garīgi sadalīt savu lapu par dažādas vienības tiešsaistē. Un tad daudz divs I redzēt, kaut ko sauc Class, bet mēs būsim atpakaļ uz to. 

Tas ir interesting-- Forms. Veidlapas ir visā tīmeklī. Jebkura meklēšanas lodziņš tu esi kādreiz izmantots ir forma. Un, jā, pieņemsim faktiski redzēt. Forma. Darbība. Šīs veidlapas rīcība, kāda vēsturiski iemesli, ir tas, ka URL. Metode ir "post". Izrādās, ka HTTP pieprasījumus var izmantot darbības vārds "saņemt", kā mēs redzējām iepriekš, vai "post". Un redzēsiet atšķirību par šo brīdi. Pieņemsim faktiski redzēt, kas tas ir. Ļaujiet man iet atpakaļ uz Stenforda lapā. Kādā veidā viņi runā par, jūs domājat? Kas lec ārā pie jums? 

Mērķauditorija: Meklēšanas lodziņš. 

DAVID J. Malan: Jā. Tātad up augšējā labajā stūrī šeit ir tas Search lodziņš. Un tas, kā tie īstenoti it-- tag, kas ir burtiski atvērtā kronšteins forma. Un tad pieņemsim meklēt kaut ko. Meklēsim draugs no mine-- "Nick Parlante." Enter. Un, protams, tas devās uz nedaudz atšķirīga URL. Ļaujiet man atgriezties šeit. Meklēsim "kursu." Nolādēts. Devās uz citu URL. Tātad, Stanford s pievienojot dažas burvju ka viņi nav ņemot mani uz URL ka mēs redzējām rīcība atribūts tur. Bet šī forma šeit tiek īstenota vienīgi veidā šī atzīmes šeit, šie tagus. Patiesībā, šeit ir ieeja meklēšanas veidu, ko vēlaties. Šeit ir piegādātāju, Vēl viens meklēšanas veidu. Šeit ir ieeja virkni pati. Un tā mērķis nav wrap mūsu prāts ap visiem šiem tagiem bet tikai, lai redzētu. Tas ir vienkārši atverot un aizverot birkas un meklē lietas uz augšu. Yeah? Victoria? 

Mērķauditorija: [dzirdams] DAVID J. Malan: Tas ir labs jautājums. Tas ir nedaudz sarežģītāk, lai redzētu. Ļaujiet man atgriezties, ka jautājums tikai dažas minūtes kad mēs skatāmies uz kaut ko sauc CSS, vai kaskādes stila lapas, un mēs varam mēģināt secināt tik daudz no lapas. Tātad, ja mēs tagad to apskatīt google.com, pieņemsim redzēt, kas viņu lapā izskatās. Jūs they're-- tas ir gudrs šodien. LABI. Viss pabeigts. Labi, tāpēc View Source. Jūs domājat, ka Google ir tiešām jauks pirmkodu. Tātad, acīmredzot, kas notiek šeit? Un patiesībā, tas nav pat HTML. Tas ir kaut kas ko sauc par JavaScript. Un pieņemsim glabāt iet un iet. Es pat nezinu, kur lapa sākas. Es esmu gatavojas izmantot Command F, atklāts kronšteins HTML. Labi, tur tas ir. Es atklāju sākumu lapas, un tur ir tik daudz sīkumi šeit. 

Kas patiesībā notiek? Nu, jūs zināt, ko, mēs varam tīrīt to uz augšu. Ja es tā vietā doties uz šo Pārbaudiet rīkjosla, šis īpašais diagnostikas rīks, un iet nevis uz tīklu, kur mēs turpinām iet šodien, bet, ja es eju uz Elements, to, kas ir patiešām jauki ir tas, ka pārlūks ir daudz daudz labāk acis nekā man. Un pārlūks var nolasīt ka haoss, kas mājas lapā, ka HTML mail mēs tikko paskatījās, un tas var izanalizēt to vai lasīt un analizēt to un pārformatēt to jauka cilvēka draudzīgā veidā. Tātad, ko es esmu redzēt tagad Šajā ekrānā šeit saskaņā Elements, tieši tādu pašu saturu, bet tie esam izrobota viss, tie esam colorized, bet tas ir tieši tas pats teksts ka es lejupielādēt no servera. 

Un, kas ir jauki, tagad ir es redzu organismā, par instance-- paziņojumu, lapa joprojām sastāv no tikai galva un ķermenis, un es varu hierarhiski nirt šeit. Ievērojiet, ka Google, šķiet, ir lai divs-- šo vienu, un šo vienu. Es varu paplašināt to. Tur ir viss ķekars citu divs. Tātad, tas ir nedaudz sarežģīti. Bet pagaidiet. Tas šķiet tik daudz lasāms, salīdzinoši, nekā šis. Kāpēc Google neērts pati, tikai nosūtot šo milzīgo putru koda dažu kārtošanas vienkārši īstenot kaut ko kas izskatās tik vienkārši pēc pirmā acu uzmetiena? Tāpat kā, kāpēc viņi pievienot vairāk vietas? Kāpēc tie hit Enter, piemēram, I did? Paskaties, cik labi es biju rakstot tīmekļa lapu. Es hit Enter tik rūpīgi. Es atkāpi tāpēc viss ir tik skaista un salasāms. Kāpēc Google nepraktizē pats? 

Mērķauditorija: [dzirdams] DAVID J. Malan: Labi. Ļoti godīgi. Viņiem nav daži persona Google manuāli atjaunināšanu mājas lapu vairs. Tas nav 1999 vairs. Tāpēc viņi ir programmatūra. Viņiem ir citi instrumenti, kas radīt dinamiski viņi HTML. Protams, ka kodekss bija rakstīts ar cilvēkiem, bet realitāte ir, tas ir diezgan godīgi teikt, pārlūkprogramma noteikti nav aprūpi, kā netīrs kods ir. Bet tur ir vēl vairāk pārliecinoši tehnisku iemeslu ka Google izplata savu HTML kods šādā apliets, šķietami milzīgs veids visu iepakot kopā ar ļoti maz way-- ļoti maz ceļā formatējumu, piemēram, I did. 

Mērķauditorija: [dzirdams] 

DAVID J. Malan: Faster? Kāpēc? Un ko tu teici, Lydia? Ātrāk? Kāpēc ātrāk? Mērķauditorija: [dzirdams] DAVID J. Malan: Ir nav vietas, lai lasītu. Jā. Tāpēc domāju par to, ko telpa ir. Tātad katrs simbols uz klaviatūras aizņem daži telpu apjoms pārstāvēt, nu fiziski, piemēram, tas aizņem ka daudz vietas, vai kaut kā zem nosūcējs, kas prasa atmiņu. Un kā aside-- un mēs runāt vairāk par šo tomorrow-- katru rakstzīmi uz klaviatūras parasti prasa 8 biti vai vienu baitu. Tātad modelis 8 nullēm vai tiem, vai tikai 1 baits, kā mēs cilvēki būtu parasti saka. Tātad tas ir mazs, bet tas joprojām nav nulle. Tas ir vēl dažas vietas daudzumu. Tātad, ja inženieris vai Google hits starpdevējs tikai vienu reizi, un pieņemsim Google-- tas ir super-popular-- Pieņemsim, ka miljards cilvēku apmeklēt viņu mājas lapu dienā, vai kādu cilvēku skaits apmeklējiet mājas lapu A miljards reizes dienā, cik daudz papildu baiti ir kas programmatūras inženieris tikai izmaksas Google ar hitting viņa vai viņas starpdevējs reizi? 

Mērķauditorija: [dzirdams] DAVID J. Malan: Ne gluži tik slikti. Tikai vienu baitu reizes miljardiem. Tātad izveidojuši lielisku Mērķauditorija: 8 miljardus gigabaitu. DAVID J. Malan: Nav 8000000000. 8 miljardus baiti. Bet 1 gigabaitu. 1 gigabaita būtu mērvienība. Ja viņš vai viņa dara divas telpas, 2 gigabaitiem. Trīs gigabaitiem. Pa labi? Tas svari dārgi. Un tāpēc gadījumos, piemēram, Google, kas piešķirts, ir ekstrēmi gadījumi, ir arī citi jautājumi, kas rodas tikai padarot ļoti saprātīgus lēmumus vai, ņemot ļoti vienkāršas cilvēka rīcību, jo tas ir šo palielināts efektu. Tātad, viens no iemesliem Tas izskatās tik saspiests ir tieši tā, kā Viktorija said-- tas bija tikko radīts ar datoru anyway. Tāpēc nav liels darījumu. Ļaujiet pārlūkprogramma skaitlis tas. Bet tas arī apzināti nav daudz vietas, tāpēc, ka telpa nav nepieciešama. Un telpa faktiski maksā naudu. 

Tā nu izmaksas laiku, jo vienkārši virzīt ka daudz vairāk datus no Vietne Google.com mītnē tikko ir ieguvuši, lai kādu summu laiks, pat ja tas ir milisekundes vai mikrosekundes, bet kas papildina līdz pa tik daudziem lietotājiem, vai, visticamāk, tas, iespējams, maksā naudu. Google probably pieslēdzas kāds cits pasaulē, viens no tiem peering punkti, un, ja tie ir sava veida finanšu attiecības saskaņā ar kuru viņu dati maksā naudu, Tie var arī samazināt cik daudz datu viņi spļaut ārā uz viņu interneta pieslēgums. 

Tik smieklīgi lieta, lai gan, galu galā, vai varbūt pārliecinoši lieta, ir tas, ka, lai gan šis izskatās briesmīgi nomācošs, beigās, dienā, tas joprojām ir precīzi tie paši principi kā Tas ir ļoti vienkāršs lapā šeit no HTML lappuse. Tik vienkārši apkopot un tā, ka jūs ir kanonisko versiju, ja jums nav pēc kopā pēc izvēles šeit, šeit varētu būt visvienkāršākā no interneta lapas, lai kaut ko spēlēt ar varbūt vēlāk. 

Nu, pieņemsim ieviest pāris citas idejas tagad. Mēs esam par to, lai ieviestu kaut ko sauc stila tagu. Mēs varam stylize šo lapu vairāk interesantu veidos. Tādējādi, kaut arī HTML e-pastu ir visu par marķējumu uz augšu dati, veida norādot uz A pārlūku, kā strukturēt datus, kur likt to, CSS, vai kaskādes stila lapas, ir otrā valoda, kas parasti izpaužas sajaukt ar HTML kā mēs see-- bet mēs varam tīrīt kas izveidots moment-- kas ņem tā gala jūdžu, un tas stylizes to. Tas izpaužas krāsas tikai tiesības, fontu izmēru tikai tiesības, pozicionēšanas tikai labi. Tas viss ir par estētiku vai formatējumu, nevis par būtiska pašiem datiem. Un vienkāršākais veids, kā parādīt tas ir iespējams, ar savu piemēru. Tāpēc es esmu gatavojas iet pa manu vienkāršu teksta failu. Un tikai brīdi, es ņemšu staigāt mūs cauri procesam to izdarīt paši. 

Es esmu gatavojas doties atpakaļ uz manu failu šeit un pārlādēt lapu tikko lai apstiprinātu, kā tas izskatās. Tas ir, ja mēs esam pie tagad. Es jūtos kā bērni varētu baudīt kam daži krāsu uz šo mājas lapu. Tāpēc es esmu gatavojas iet uz augšu šeit uz galvas lapā. Un es esmu gatavojas darīt stilu, / stils. Un tad iekšā, es esmu gatavojas pateikt ķermeni manas page-- un šis formatējums ir, pirmā acu uzmetiena, varbūt nedaudz dīvaini, bet parasto. Es esmu gatavojas teikt, ka fonā krāsa šīs lapas jābūt zaļā krāsā. Un tas ir diemžēl veida nav labākais dizains. Ievērojiet, ka iepriekš pasaulē HTML, Es teicu, ka atribūti šie atslēgas vērtību pāri. Kaut kas ir vienāds ar citātu likt pēdiņas beigās "kaut ko." Pasaulē CSS, kas bija paredzēti daži dažādiem cilvēkiem, viņi nolēma, ka viņu pasaules, atslēgu vērtības pāri būtu vārds resnās zarnas kaut kas. Tātad, tas ir tas pats ideja, though. Tas saista vērtību ar kādu atslēga, kas kaut kādā veidā ietekmē uzvedību šajā lapā. 

Un jūs varat droši uzminēt. Kas tas ir, iespējams, gatavojas darīt, pat ja jūs nekad neesmu redzējis HTML vai CSS pirms? Mērķauditorija: Mainīt fona krāsu. DAVID J. Malan: Jā, mainīt fona krāsu. Un konkrētāk fona krāsu no ķermeņa. Bet ciktāl ķermenis tagad ir web page-- tā ir vienīgā lieta zem title bar really-- tas iespējams, gatavojas ietekmēt to pašu. Tātad, pieņemsim redzēt. Pieņemsim glābt šo. Iet šeit un pārlādētu. Tas ir diezgan pretīgs. Un to, kas notiek šeit ir blakusparādība. Es tikko izvēlējos šo attēlu nejauši. Kāpēc ir zaļš nav caurstrāvo aiz Mickey? Mērķauditorija: [dzirdams] DAVID J. Malan: Tieši tā. Izrādās, ka attēli, diezgan daudz visi attēli, ka mēs varētu izmantot, visi rectangles-- no taisnstūri. Pat ja Mickey ir dažas līknes pie sevis un ir fons, ka fons ir kaut kas. Tā ir jābūt baltā krāsā. Tā ir jābūt melnā vai kaut kas cits. Tas var būt caurspīdīgs. Un patiesībā, es varētu atvērt Mickey Mouse šeit programmā sauc Photoshop vai kaut kas līdzīgs un mainīt visu, ka baltā fons pārredzama, tā zaļā varētu spīdēt cauri. Bet tas ir kaut kas man būtu nepieciešams jautāt par sevi vai grafiķis vai dizainers pie manas kompānija, piemēram, darīt, it īpaši, jo es tikko aizgūts šo vienu no interneta. Bet tas ir, kāpēc tas notiek. 

Tātad, ko vēl varētu mēs vēlamies darīt? Nu, mēs varētu vēlēties, lai teikt mēs tiešām ceru, ka jums patika. Un uzmanību, es gribu lai padarītu šo spēcīga, un tāpēc es saku atklāta spēcīga un aizvērt spēcīga un pēc tam pārlādēt. Un tas ir mazliet grūti redzēt projektoru bet varbūt tiešām tagad lec ārā pie jums mazliet vairāk. Tātad jūs varat pievienot slīprakstā šajā veids, treknrakstā saskaras šādā veidā. Mēs varētu mainīt krāsas. Patiesībā, tikai sākas, es esmu gatavojas iet uz priekšu un darīt to. Man nav īsti patīk, kā mans punkts ir tas cieši kopā, tāpēc es varētu darīt kaut kas līdzīgs šim. Es esmu gatavojas pateikt pārlūku, mainās katru punktu atzīmi, lai būtu, pieņemsim say-- faktiski, jūs zināt, ko, pieņemsim saskaņot to tekstu-align, centru. Un atkal, es zinu, tas tikai tāpēc, ka kāds to mācīja man vai es paskatījos to uz augšu tiešsaistes atsauces. Tāpēc ļaujiet man saglabāt šo. Un, ah, tagad es esmu centrētu attēlu tur. Un tiešām, jūs zināt, kas, ja Es pārvietot manu attēlu uz punktu tag-- tāpēc trešo daļu, pat ja tas nav teksta. Pieņemsim, izņemot to, ka un pārlādēt. Tagad lapa sāk izskatīties veida of-- Es domāju, tas joprojām ir diezgan neglīts, bet vismaz tā izskatās, ka es pavadīju divas minūtes, nevis vienu minūti padarot to. 

Un tā, pakāpeniski, mēs varam padarīt šīs estētiskās izmaiņas tagad uz lapu? Man nav īsti mainījies šos datus lapa izņemot pievienojot vārdu tiešām. Esmu pievienotās metadatus, ja Jums gribas. Hey, pārlūku, padara Vārds "tiešām" treknrakstā. Bet dati nav spēcīgs. That ir metadati. Dati ir "tiešām." Tātad mums vēl joprojām ir dažas no tie paši jēdzieni kā iepriekš. Tagad, protams, tas nav tīmeklī, tāpēc es esmu gatavojas darīt vienu pēdējo soli šeit. 

Es iešu uz hello.html un vienkārši izcelt un kopēt to. Un tagad es esmu gatavojas iedziļināties Cloud9, kas Es staigāt jūs cauri tikai brīdi. Un izredzes ir jūs drīz būs, ja nav jau, pie ekrāna, kā šis. Un ļaujiet man tikai jums ātri tūre, kas Cloud9 patiesībā ir. Tātad atkal mākonis 9 ir šis mākonis balstītu pakalpojumu kas sniedz jums un man ilūziju no mūsu pašu virtuālo mašīnu mākonis, tehniski konteiners mākonis, ka mums ir pilnīga administratīvās privilēģijas. Tātad teorētiski, neviens citur pasaulē ir piekļuve ekrāna es esmu meklē tieši tagad, izņemot varbūt cilvēki kurš palaist vietni, jo tehniski tie ir fiziskās piekļuves iespējas un tā tālāk. 

Tātad, ko mēs redzam šajā vidē? Es esmu gatavojas tālinātu, jo tas ir mazliet maza. Un ļaujiet man norādīt vairāk šeit tikai brīdi. Kreisajā pusē manu un jūsu ekrāns, tur ir failu pārlūks pa kreisi. Tik līdzīgs garā Mac OS un Windows. Tie ir visi failus manā kontā. Un pēc noklusējuma, ja jūsu konts ir kā manējā, jūs redzēsiet, vai drīz redzēt helloworld.html un readme.md. Vairāk nekā šeit labajā pusē, tas ir kur mani teksta faili gatavojas iet. Ja esat kādreiz izmanto Microsoft Word vai Notepad vai TextEdit, Tas ir vārds mans rediģēšanas failu gatavojas iet. Un tad pats arcane iezīme šajā vidē ka mums nav tiešām ir nepieciešams, lai izmantotu, ir leju šeit sauc Terminal logu. Ja jūs esat izmantojis DOS no vakardienas, tas ir Linux vai Linux ekvivalents DOS. Tas ir tekstu balstītu interface-- Nav peles klikšķiem, bez velkot. Viss, jūs varat darīt, ir rakstīt komandas, bet šīs komandas var izveidot failus, pārvietot failus, atveriet katalogi, tuvu katalogi, darīt jebkura vairākas lietas. Bet tagad, mēs vienkārši pavadīt savu laiku šeit. 

Un tāpēc pieņemsim to izdarītu. Ja tu esi tas vide, kas jums vajadzētu būt, ja esat izveidojis darbvietu jau, iet uz priekšu un tikai iet uz augšu File, New uz brīdi. Un kas dos jums jaunu tab tepat vidū. Un es just-- un pieņemsim iet uz priekšu un darīt to. Iesim uz priekšu, un tagad to failu, saglabājiet un iet uz priekšu, un sauc to hello.html, nedrīkst jaukt ar helloworld.html, kas nāca ar savu jauno bezmaksas kontu, kas ir tikai paraugs fails. Jūs redzēsiet, ka pēkšņi parādās, visticamāk, kreisajā pusē, un tab joprojām būs atvērts. Un ļaujiet man aicinām jūs tagad, lai atjaunotu šis fails vai daži to variantus. Un, ja jūs nevar gluži redzēt to uz ekrāns, tas ir identisks slaidiem ka jūs, iespējams, citā tab. 

Tātad īsumā, padarīt savu pirmo mājas lapu, saglabājiet to, un tad tikai brīdi, Es jums parādīs, kā jūs faktiski var apskatīt šo. Bet mainīt vismaz viena lieta. Mainīt HelloWorld uz kaut kas no jūsu izvēles, tāpēc, ka jūs esat pārliecināts, ka tas ir jūsu failu un ne vienu es tikko izveidojāt. Viss kārtībā. Un, kad jūs ready-- nē rush-- kad esat gatavs, iet uz priekšu un saglabājiet failu pēc tam, kad esat veicis šīs izmaiņas. Un, ja jūs noklikšķiniet uz Palaist aizpogāt top, šis vajadzētu atvērt jaunu cilni, kas pateiks tu kādu URL, jūs varat apmeklēt jūsu failu, bet tas var aizņemt laiku, lai quote likt pēdiņas beigās "sākt Apache", kas ir nosaukums web serveri. Tāpēc esiet uzmanīgi, lai darīt tieši kas ir failā galu galā. Tāpēc tieši tagad, es ņemšu tuvinātu. Ja es sāktu rakstīt atvērtā kronšteins HTML, paziņojums tas pamudinot man pabeigt manu domu. Un, ja es gatavo mana doma, to automātiski dod man noslēguma tagu. Bet cerības ir, tad es hit Enter, un tad virzīties iekšā tur un tie galvu iekšā un tad man ķermeni iekšā. Un tas ir mazliet dīvaini sākumā, jo tas dara darbu jūsu vietā, taču saproti, ka galu galā tas ļaus ietaupīt keystrokes. Un patiesībā, ļoti bieži iezīme programmēšanas vidēm šajās dienās gan interneta attīstību, piemēram, šis un aktuālā programmēšana, ko mēs runājam par rītdienu, ir šie auto-complete funkcijas, lietas, kas vienkārši ļautu programmētājs vai dizainers rakstīt mazāk keystrokes paveikt to pašu. Dažreiz tas ir labi, lai gan. Dažreiz tas ir tikai kaitinošas. Un atkal, kad jūs esat pārraksta slaids vai kādu to variantu, Jūs varat noklikšķināt uz pogas Izpildīt augšu augšas. Un pēc tam apakšā logu, jums tiks informēts to, ko URL jūs varat apmeklēt jūsu mājas lapā. Mine, piemēram, ir pie business-daharvard.c9users.io un tā tālāk. Labi, tāpēc, ļaujiet me-- kādi jautājumi? Jebkādi citi jautājumi par vienkārši kļūst šis darba pirms mēs pievienot funkcijas? Un ļaujiet man ieteikt, vienkārši saņemt folks comfortable-- jo tā ir viena lieta, lai tikai copy-paste akli, ko es esmu darījusi. Bet tikai tāpēc, ka ļaudīm cīnīties ar vismaz vienu to-do, Es esmu gatavojas ieslēgt kādu mūziku. Es esmu gatavojas ierosināt sarakstu lietas, iespējams, var pievienot. Un jūs noteikti var izmantot Google. Un kāpēc ne mēs tikai ierosina, ka jūs mēģināt atrisināt vismaz vienu konkrētu problēmu šeit. Tātad attiecībā uz tagiem, ļaujiet man atkārtoti šo šeit. 

Patiesībā, ļaujiet man likt tas ar teksta formā. Pieņemsim, ka starp tagiem mēs varētu izmantot šeit ir daži tagus vairāk nekā šeit. Mēs esam redzējuši tagu punktu. Tagad tas notiek, lai auto-pilnīgs. tag punkts enkura tag. Pieņemsim, ka jūs vēlaties, lai padarīt kaut ko lielāku, lai jūs varētu like-- span tag var palīdzēt. Nu, jūs, iespējams, nepieciešama neliela palīdzība par to tikai brīdi. Mēs esam redzējuši div. Jūs redzēsiet tur tabulu. Tur kaut kas ko sauc tr, td. Th, td. Nāciet atpakaļ uz to brīdi. Kas vēl varētu būt parocīgs? Tur ir spēcīga. Tur ir uzsvars, vai drīzāk em. There's-- kas cits varētu jūs iedomātā šeit? Nu, mēs ņemšu apskatīt, kas kopā. Forma, ko mēs esam redzējuši. Tur ir forma. Tur ieeja un daži citi. Labi, tāpēc pieņemsim to izdarītu. Lai atbildētu uz Victoria 's Jautājums, ļaujiet man vispirms tikai pārliecinieties, ka visi ir iespēja saņemt savu sveiks darbu. Tad ļaujiet man iepazīstināt pāris citas idejas. Tad mēs let folks atrisināt kāda problēma par to pašu. Tad mēs faktiski atgriezties šim jēdzienam formā, un mēs faktiski no jauna ieviestu kopā front-end interfeisu, tā sakot, par Google pati. Mēs izmantosim Google kā atpakaļ beigās un ļaujiet viņiem darīt to smago darbu, meklējot, bet mēs atjaunot priekšējā galā Google un meklēšanas formu ka viņi ir savā mājas lapā. Un tāpēc mēs atgriezties šie tagus tikai brīdi. 

Tātad tas bija tas, ko es ierosināja tikai pirms brīža. Mēs varam pievienot stilizācija līdz A lapa iekšpusē šī stila tag, un mēs varam stylize fona krāsu, teksta saskaņošana, vai tas ir centrā vai pa kreisi vai pa labi. Bet ļoti ātri jūs būtu atrast vai web dizainers varētu atrast, ka tas kļūst nedaudz smagnēja, jo jūs darāt to, kas ir sauc sajaucot saturu ar prezentāciju par to. Jūs esat sajaucot savus datus un to estētika. Un patiesībā, ja jūs uzskatāt, kas notiek varētu notikt vairāk LAIKU_ tas ir ļoti mazs mājas lapa, protams. Bet, ja es pievienot saturu, lai šajā lapā un es pievienot stilu uz šo lapu, lapas ļoti ātri kļūst ilgāk un ilgāk un ilgāk. Un domāju, ka es gribu ir otrais mājas lapu, kas akcijas daži no šiem atribūtiem. Pieņemsim, ka mans otrais mājas lapu par manu site-- arī, es gribu viss centru, un es arī gribu visu ar zaļu fonu. Es esmu diezgan daudz nāksies kopēt un ielīmēt dažas no šīm līnijām minētajā otrajā datnē, kas jūtas labi. Tas atrisinās problēmu. 

Bet ko tad, ja es gribu trešo lapu vai 30 lapu vai 40th lapa? Tagad es esmu būs kopēšanas un līmēšana daudz dublikāta kodu vairākos failos. Un tā domāju, ka Es izlemt vai es esmu teicis, hey, mēs neesam izmantojot zaļa fona vairs. Mēs ejam, lai sāktu izmantot apelsīnu. Kas jums ir jāmaina? Nu, jums ir mainīt šo stilu no zaļas uz oranžu, cik daudzās vietās? Tāpat 30 vai 40 vietām. Tas ir garlaicīgs. Tas ir tendētas uz kļūdu. Tur ir vairāki iemesli kur jūs negribētu, lai izraisītu šāda veida sāpes par sevi. Un tā tas nebūtu jauki ja mēs varētu pieņemt to, ko es tikko likt starp šiem diviem dzeltens tags šie stila tagus, faktors to ārā, un nodot visas manas stilizācija vienā centrālajā failā ka visi 30 vai 40 no maniem citiem failiem aizņemties no vai kaut kā atsauces, nav atšķirībā tīklu diagrammas mēs darām pirms? 

Tātad, ja es iet šeit, es esmu gatavojas faktiski ierosināt ka mēs aizstāt style tag ar kaut ko sauc saikne tag, kas ir briesmīgi, briesmīgi nosaukts, jo jums nav izmantot Saite tag radīt ko mēs cilvēki zinām, kā saite mājas lapā. Šim, jūs izmantojat, kas tag? Kā jūs izveidot saiti mājas lapā? Mērķauditorija: to a. DAVID J. Malan: Vai A vai enkurs tag, kas devās uz Disney pirms. Saite tag šeit saka this-- saite uz failu ar nosaukumu styles.css, attiecības, uz kuru būs, ka tā ir mana stilu. Tātad, tas ir viens no S ir iekļauts CSS-- kaskādes stila lapas. Stils sheet-- divi no S grāds CSS. Kaskādes stila lapas. Tas tikai nozīmē, hey, pārlūku, iet atrast styles.css vietējā servera un izmantot to kā savu stilu, kas nozīmē iekšpusē šo failu būs visi stilizācijas, ka mēs esam tikai darīts. Un tā, kas tas fails varētu izskatīties tas ir. Un es ņemšu tikai darīt, tas ir ātrs Piemēram, tāpēc, ka mums nav vajadzīga iegūt pārāk daudz nezālēm šeit. Bet, ja es kopēt to, ko es esmu ierosinot ir tas, ka programmētājs izveidot jaunu failu, ielīmēt šajos lines-- whoops-- ielīmēt šo līniju, saglabājiet to kā styles.css, un tad, otrs fails, izdzēst visu, kas un aizstāt to vietā ar šo saiti tag. Tā, ka, ja es saistīt href = "styles.css", attiecības ir "stilu" tuvu tag. Saglabājiet to. Iet atpakaļ uz manu HelloWorld. Pārlādēt. 

Burtiski nekas nav noticis. Tas ir laba lieta, jo tas nozīmē, ka tas ir faktiski viss strādā. Lai pierādītu, cik, pieņemsim, ka es veikt typo, un es aicinu šo "styles.css" ar lielo S, kas ir nepareizs, un pēc tam pārlādēt. Tagad jūs varat redzēt, tas vienkārši nedarbojas. Tagad, kāpēc? Nu, pieņemsim izmantot paņēmiens no agrāk. Ļaujiet man iet uz priekšu un, mana pārlūkprogramma, Chrome, es esmu gatavojas atvērt, ka īpaša tīkls tab kā iepriekš, un ļaujiet man pārlādēt lapu. Ko jums nav pārsteigts redzēt tagad? Vai varbūt jūs esat pārsteigts, lai to aplūkotu. Katrā ziņā, tas, ko jūs redzat tagad? Mērķauditorija: [dzirdams] DAVID J. Malan: Tas nav atrasts. Kāpēc tas nav atrasts? Nu, Styles.css-- kapitāls S-- neeksistē. Es misnamed to. Simple typo. Bet es saņemu saprotams tagad 404, jo serveris saka, hey, tas nav atrasts. Burtiski, es nezinu kur tas fails. Tātad, kā rezultātā, pārlūkā parāda jums to, ko tā var, izejvielas lapas saturu, kas bija 200, HTML, bet stilizācija nevar jāpievieno pēc tam. Un tas ir tas, kas ir domāts ar kaskādes. Jūs varat veida pievienot pēc, un tā veida pilnveido estētiku mājas lapā. Un jūs pat varat ignorēt tos stili ar vēl citām stila failiem Ja tu vēlies. Tas nav atrasts, tomēr, šajā gadījumā, jo, protams, es misnamed to. Tāpēc es būtu noteikt, ka pirmais. 

So iesim uz priekšu un ierosināt sekojošo. Iesim uz priekšu un darīt to. Sākot ar varbūt Jūsu helloworld fails, ļaujiet man tikai uzaicināt pāris no iezīme ieteikumus. Tātad, Victoria, jūs gribēja veikt dažas teksts lielāks, vai ne? Labi, lai mēs varētu do padarīt tekstu lielāku. Un mēs katrs raut nost tikai viena problēma atrisināt. Padarīt teksts lielāks. Es neesmu gatavojas apnikt rakstot šo, ja mēs ir bullet tehnoloģija tiesības pār šeit. Tātad dažas problēmas. Tāpēc mēs esam gatavojas izmēģināt padarīt tekstu lielāku. Viss kārtībā. Kas vēl būtu kāds ieteikt? Ko vēl varētu mēs vēlamies darīt mājas lapā? Pieņemsim nākt klajā ar īss saraksts ar lietām un tad deleģēt grupa skaitlis šo out. 

Mērķauditorija: [dzirdams] 

DAVID J. Malan: Labi, amats teksts dažādās pusēs lapas? Viss kārtībā. Kaut kas cits. 

Mērķauditorija: [dzirdams] DAVID J. Malan: Tas ir. Tātad gif ir tikai citā faila formātā. Mēs tikai izmanto, ko A png vai jpg iespējams? Mēs izmantojām jpg. Ja jūs esat ziņkārīgs, pārmērīgs atbildi uz savu jautājumu ir jpg parasti izmanto fotogrāfijas, jo tas atbalsta miljoniem krāsu vai 24-bitu krāsu. GIF parasti izmanto, piemēram, interneta memes šie days-- animācijas, piemēram, animācijas gifs. Bet tas notiek, izmantot mazāku krāsu palete, tikai 256 iespējamās krāsas, bet tas atbalsta pārredzamību un animācija. Un tad tur ir png, kas atbalsta pārredzamību un vairāk krāsu bet ne animācija. Tātad, tas ir kompromiss. Tātad pievienojot gif, lai gan, būtu funkcionāli līdzvērtīgs pievienojot PNG vai JPG. Jā. Image Source vienāds. Tātad kaut kas cits. Pieņemsim nākt klajā ar kaut ko, mēs nosūtījām Victoria darīt šeit. 

Mērķauditorija: Pievienot pogas formā. DAVID J. Malan: OK. Tātad pievienot pogas formā. Un mēs darīsim, ka viens kopā. Tā, ka būs ideāls segue uzreiz pēc šo izaicinājumu. Jebkas cits? Kas varētu Jūs vēlaties darīt? Tīmekļa jūtas ļoti underwhelming ja tas ir viss, ko mēs varam darīt. Mērķauditorija: Mainīt teksta krāsu. DAVID J. Malan: Mainiet ko? Mērķauditorija: krāsa teksta. DAVID J. Malan: Izmaiņas krāsa teksta. Viss kārtībā. Tātad, pieņemsim darīt. Tikai atkal tā, ka tu neesi, tikai ko Rote, darot tieši to, ko es daru, Es esmu gatavojas, lai ieslēgtu mūziku par varbūt piecas minūtes šeit. Jūs esat laipni aicināti izmantot Google. Jūs esat laipni aicināti uzdot mani, un Es čuksti mājienu auss. Jūs esat laipni aicināti meklēt pār otra pleciem. Bet atrisināt tikai vienu no šīm problēmām. Bet mēs darīsim pēdējais, uz veido vienu, ja mēs varētu kopā. Tātad piecas minūtes, lai atrisinātu jebkura no šīm problēmām izmantojot Google, intuīciju, vai jebkura citas pieejams jums līdzekļus. 

[SKAN MŪZIKA] Viss kārtībā. Neraizējieties, ja jūs vēlaties saglabāt tinkering, bet es ņemšu sabojāt pāris no šīm atbildēm. Tātad pirmo ierosinājumu no Viktorija bija padarīt tekstu lielāku. Tātad tur ir daži veidi, kā to izdarīt. Es esmu šobrīd atjaunota mans ekrāns ar šo lielumu, lai gan es esmu pietuvināto mākslīgi tikai redzēt lietas. Un pieņemsim darīt. Ļaujiet man iet uz priekšu un paķert dažas sugas latīņu teksta vienkārši tāpēc mums ir kaut ko strādāt. Tātad man tikai vienu mirkli. Es ņemšu veikt trīs punktus. LABI. Tas būs labāks piemērs. Tātad ziņkārīgs, jo mans hello.html, es tikko ielīmēts trīs absurds latin punkts vienkārši tāpēc mums ir kādu tekstu, lai strādātu ar. Un Victoria mērķis bija veikt dažas teksta lielāks. Lai es varētu, kā iepriekš, iet šeit. Un ļaujiet man darīt to pareizi. Es esmu nāksies saiti tagu, kas norāda uz failu sauc par "styles.css," attiecības no kuriem ir atkal "stilu." Un tad es esmu gatavojas, lai saglabātu, ka un atvērt šo "styles.css." 

Tātad, tāpat kā iepriekš, man ir spējas šajā CSS failu faktiski ignorēt noklusējuma estētika mājas lapā, un noklusējuma estētika, protams, ir diezgan blāvi. Tas ir sava veida normāla fonta lielumu, melna teksts, balts fons, un tā tālāk. Tāpēc domāju, ka es gribu, lai visu šo tekstu lielāks. Es varētu darīt dažas lietas. Manā styles.css failu, es Varētu teikt, jūs zināt, ko, piemēro turpmāk ķermeņa manu lapu. Iet uz priekšu un padarīt fonta izmērs 24 punkti, kas ir skaitlis es varētu izmantot Microsoft Word. Ļaujiet man iet atpakaļ uz manu web lapa šeit un pārlādēt, un jūs varat redzēt, ka tas jau daudz lielāks. Un mēs varam iegūt mazliet traks, tāpat kā mēs varam par desktop-- padarīt to 96 punkti. Pārlādēt. Un tas kļūst mazliet neparocīga šajā brīdī. 

Bet es varētu būt nedaudz precīzāks. Tā vietā, lai piemērotu šo stilu uz ķermeņa manu lapu, ko vēl es varētu piemērot to vietā, ko citi tag, kas varētu vēl funkcija tādā pašā veidā? 

Mērķauditorija: P tag? DAVID J. Malan: P tag. Tātad galva nebūtu pareizs, jo galvas, jūs nevarat patiešām kontrolēt estētiku. Tur nu teksts tur vai nav. Bet p tag-- varu nirt nedaudz dziļāk, tā sakot, uz punktu tags. Un, pat ja ir trīs, tas ir pilnīgi naudas sodu, jo CSS, kad es tikai teikt "p", šis nozīmē piemērot šādus jebkuram tag, kas atbilst šo selektors, selektora tikko ir nosaukums tag. Tātad, kur jūs redzat "P", pieteikties fonta lielumu, un pieņemsim padarīt to vairāk saprātīgs again-- 24. punkts. Un jūs zināt, ko, tikai labu pasākumu, pieņemsim padarīt krāsu sarkana tikai uz šo brīdi. Un tagad, ja es pārlādēt, tagad mēs redzēt trīs neglīts punktus. 

Bet tagad pieņemsim, ka es esmu veida of-- Es gribu pirmo daļu izlēkt pie lietotāja. Es nevēlos, lai tikai palielinātu fonta lielumu viss. Un tāpēc es tiešām gribu, lai noteiktu, vai atšķirt starp šiem punktiem. Tātad, pieņemsim atbrīvoties no sarkano, jo tas ir tikai sava veida lipīgs, un iesim uz priekšu un padarīt burtu lielums 12 punktu pēc noklusējuma, tā ka mēs esam atpakaļ uz kaut ko nedaudz vairāk saprātīgi. Un tagad es tikai vēlos, lai palielinātu fonta izmērs pirmās daļas. Es varu darīt to daži veidos, bet viens no veidiem, kas ir iespējams, visvairāk mācību pie brīdis ir darīt šādi. Ļaujiet man iet uz priekšu un saka, tas punkts ir unikāls ID "pirmo." Es varētu nosaukt šo kaut ko es gribu. Es varētu nosaukt šo "foo" vai jebkuru citu vārdu, bet es esmu gatavojas sniegt tai kādu semantiski jēgpilna nosaukums piemēram, "pirmais". Tas ir unikāls identifikators, ID, par manu pirmo punktu. 

Ko es tagad varu darīt manā stilu ir nedaudz precīzāks. Tā vietā, lai sakot, jāpiemēro šādi uz p tagu, Es varu teikt following-- piemēro šādu, vai izvēlieties, HTML elements kas ir unikāls ID "pirmo." Ko es gribu pieteikties uz to? Burtu lielums 24 punktu. Tāpēc man ir divi selektori tagad. Viens padara visi punkts 12 punktu. Bet tas viens, jo īpaši tādēļ, tas nāk second-- runa pēdējais šajā file-- tas ir lavīnveida efekts. Esmu tikko visiem maniem punkts tags 12 punktu, bet tas tagad kaskādes un ignorēšanas ka jebkuriem elementiem lapā, jebkurš tag lapā kuru unikālais ID ir citāts likt pēdiņas beigās "vispirms." Un hashtag šajā kontekstā vienkārši nozīmē "unikāls identifikators". Man nav nodot to HTML failu. Es, nekā šeit, vienkārši pateikt quote likt pēdiņas beigās "vispirms." 

So let me pārlādētu. Un tagad es redzu, ah, OK. Es domāju, tas nav tik diezgan, bet tas ir sava veida līdzīgu priekšvārda uz grāmatu vai kaut kas tamlīdzīgs, kur pirmā daļa ir lielāka. Varētu būt vēl precīzāks tikai pirmie burti, bet vismaz Esmu izmantojis lielāku kontroli. Tagad maybe-- varbūt es gribu darīt laikam kāda iemesla dēļ, un tāpēc es nevēlos to attiecas uz tikai vienu HTML tagu. Drīzāk, pieņemsim say-- pieņemsim arī darīt šādi. Class = "imports". Tā kā ID tiek izmantots, lai unikāli identificēt vienu lietu, vienu tagu, savā mājas lapā, klases ir domāts, lai būtu izmantot jebkuru skaitu elementu vai tagus uz jūsu mājas lapā. Tātad, tas ir atkārtoti. ID nav atkārtoti. Grupa ir atkārtoti. 

Un jūs zināt, ko, kāda filozofisko reasons-- Man nav pabeidzis manu thought-- es esmu gatavojas teikt ka pirmā daļa un otrā daļa ir svarīgi. Tāpēc es esmu gatavojas piemērot klasi sauc "Svarīgu", ka, ja es saglabāt manu failu un pārlādēt, nav funkcionālā ietekme vēl. Bet es esmu pievienojis dažus metadati uz failu, veida kaut ko atsevišķu No datiem faila galveno, tā, ka tagad manā stilu, ja I vietā saka ".important" - jūs zināt, kaut kas ir svarīgi, es esmu gatavojas veikt fonta krāsu, red-- vai drīzāk nav burti krāsu, tikai krāsu. Tur ir pretrunas CSS diemžēl. Un pārlādēt. Tagad paziņojums pirmais divi punkti ir sarkanas bet ne trešais, jo I tikai piemēroja klasi "svarīgs" pirmajam diviem no šīm lietām. 

Tātad ID, jums ir iespēja ļoti precīzi norādīt. Ar klasēm, jums ir otrreizēju. Bet abos gadījumos, pamanīsiet veida labas dizaina principu kur es ņemt ārā visi estētika manā styles.css failu. Tāpēc nav messiness šeit. Nav pieminēts sarkanā vai treknrakstā vērstu vai fonta izmērs šajā failā. Drīzāk man ir semantiski, jēgpilni raksturo savus datus, kā, šeit ir daži svarīgi dati. Te ir vēl daži svarīgi dati. Turklāt šeit ir "Pirmais" manu svarīgu datu. Tātad HTML ir visu par sava iezīmēšanu, burtiski, vārdiem un punkts un konstrukcijas, kas jūsu lapa ar šiem maz mājieni, ja jūs būs, ka jūs varat kaut kā piesaistīt, izmantojot citas metodes, piemēram, CSS šādā veidā. 

Tātad atbildot uz Viktorijas jautājumu, mēs varam padarīt tekstu lielāku šādā veidā. Ir tik daudzi citi veidi, bet fonts tag-- atvērts kronšteins "font" - faktiski ir vairākus gadus vecs. Un šī ir problēma, Arī ar paļaujoties tikai par tiešsaistes resources-- tie mēdz būt novecojusi. Un tiešām, kas ir bijis novecojis, jo pasaule saprata, ko nozīmē "font-size = 7" nozīmē? Tā nav. Un tā jau daudzus gadus, un šis day-- viens no sāniem atzīmē, šeit ir tas, ka faktiski neticami sāpīgi vēl dažreiz attīstīt vietām, web, jo Microsoft un Google un Mozilla un Citi bieži vienisprātis par to, kā interpretēt specifikāciju, piemēram, HTML. 

Ir noteikumu krājumu HTML, ka parasti saka, ko katrs tag nozīmē. Bet dažreiz tas ir pa kreisi uz īstenošanu rīcības brīvība, Microsoft rīcības brīvība un Google. Un tā jūs ļoti bieži redzēt uz mājas lapā kaut ko izskatās atšķirīgi uz PC nekā tas uz Mac, un tas tiešām tāpēc, dienas beigās, viņi nav to izmēģināt labi uz abām platformām. Bet tas ir arī tāpēc, ka pamatoti, gudri cilvēki būs nepiekrist un uzņēmumiem būs nepiekrist, un tā viens no izaicinājumiem programmēšanas tīmeklī vai projektēšana lietas, tīmeklī raksta jūsu mājas lapā tādā veidā kas darbojas uz katru interneta pārlūku. Bet pat tas ir nepamatoti, vai ne? Ir tik daudz versijas tik daudz pārlūkiem, kas pastāv, ka kādā brīdī, jums ir arī, lai veiktu spriedumu zvanu un jums ir jāizlemj, kā uzņēmums, īpaši e-komercijas-style vietnes, kur jūs esat mēģina izmantot jaunākais un lielākais tehnoloģijas, lai sniegtu patiešām labu lietotāju pieredze. Bet daži procents lietotājiem varētu joprojām izmantojot Internet Explorer 6 vai 7 vai 8, it īpaši, atkarībā no valsts, ka viņi nāk no. 

Un tā ļoti bieži apspriedās ir kaut kas piemēram, "interneta pārlūku statistika." Un, ja mēs ejam kuri paredzēti, pieņemsim redzēt Wikipedia un redzēt, kā up-to-datums šis diagramma ir ja tur ir viens. Tātad, šeit jūs varat redzēt kur pārlūkprogrammas faktiski ir, saskaņā ar 2015. gada decembri, saskaņā ar ASV valdībai. Chrome ir 42% tirgus daļu, kam seko IE lielākoties uzņēmumu uzstādījumus vai datora uzstādījumi, protams, seko Firefox, tad Safari, tad Opera nebija padarīt karti šeit kādu iemeslu dēļ, un tad citi. Varbūt tas ir zem citiem. Bet vairāk problēmu nekā is-- Redzēsim, vai Wikipedia ir arī versijas pārlūkiem version-- 

Ejam uz pārlūka statistiku. IE. Pat tas nav pietiekami. Pārlūkprogrammas statistika. Mana versija. Tas nav būs labi. Paskatīsimies versijas. Pārlūku tirgus daļa. Let 's redzēt, ja tas nāk uz augšu. LABI. Tagad tas kļūst nedaudz vairāk noderīgs. Tātad šeit, ievērosiet, ka mēs visi esam dažādas versijas pārlūkiem. Un, mans dievs, ja jums look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45. Es domāju, Pārlūkprogrammas arvien atjaunināts, un dažreiz dažas no šīm izmaiņām ir nozīmīgi funkcionalitātes ziņā. Un tā kādā brīdī, produktu vadītājiem, vai inženieri nepieciešams veikt decision-- jums zināt, ko, tikai 1% no pasaules joprojām izmanto IE 7. Pie velna ar viņiem. Mēs vienkārši nav gatavojas atbalsta šo pārlūku. Un ko tas nozīmē neatbalstīt? Tas varētu nozīmēt, ka pogas nestrādā savā mājas lapā, vai tas varētu nozīmēt, ka formatējums ir pilnīgi izslēgts. Vai jums varētu būt, lai padarītu ka pats spriedums zvans mobilo šajās dienās, kur mēs esam netaisos atbalstīt IOS 5 vairs. Lai cilvēki vienkārši ir uzlabot. Vai mēs nebrauksim, lai atbalstītu Cupcake Android OS Android ierīcēm, jo, kā world-- kā tech pasaule vēlas virzīties uz priekšu, tā veida vēlas velciet pasaule ar to, lai tie nav ir jāturpina būt savietojams lai viņi var piedāvāt jaunas un labas īpašības. Tas patiešām ir viens no iemesliem, kāpēc tik daudzi uzņēmumi ir izplatot automātiskie atjauninājumi un veida piespiežot jaunākās programmatūras versijas uz mums. Un pat uzņēmumi piemēram, Apple būs kārtot no piespiest jūs gandrīz vai piespiest Jūs ziņā tirgus spēku iegādāties jaunu telefonu, jo viņi vienkārši nebūs atjaunināt savu veco tālruni vairs. Tātad jūs garām uz jaunākais un lielākais funkcijas, jo tas ir dārgi viņiem kā Uzņēmums uzturēt vecāki, varbūt sliktāki versijas programmatūru. Bet neto ietekme ir tāda, ka mēs arī cieš, kā labi. 

Tātad, pieņemsim to apskatīt tikko pāris galīgo lietas šeit. Pieņemsim klauvēt pie reālā ātri dažus šie citi lodes, ja interese. Tātad, ja jūs mēģināt, piemēram, pozīciju tekstu, kas atrodas dažādās pusēs lapa, es esmu gatavojas darīt vienu ātru veidu, bet tur ir atšķirīgs veidi, kā to izdarīt. Ļaujiet man iet uz priekšu un eliminate-- vienkāršot to šādi. Ļaujiet man iet atpakaļ uz manu vienkāršas, vienkāršas punktus. Ļaujiet man iet atpakaļ uz manu styles.css. Un es esmu tikai gatavojas izmantot simple-- ko jūs varētu būt redzējis Google vai atsauktu no earlier-- teksta saskaņot labi. Un pārlādēt šo lapu. Tagad viss šķiet būt labi līdzināts, kā jūs varētu redzēt uz gaisvadu šeit. 

Mēs varam padarīt to izskatās mazliet vairāk pasūtīt līdzīgu, un mēs varam teikt "attaisnot" un pārlādēt. Tagad tas ir jauki un laukumu par abiem pusēm, kas ir sava veida jauki. Vēl viens mērķis, mums bija šeit bija mainīt krāsu teksta. Tātad, mēs redzējām, ka ar manu sarkano tekstu. Un tagad pievienot pogas formā. Tātad, kāpēc nav mēs cenšamies darīt tieši to? Bet vispirms ļaujiet man iet uz vietas, kas lielākā daļa no mums izmantot katru day-- Google. Un pieņemsim to apskatīt kā Google faktiski darbojas. Bet es esmu gatavojas darīt. Vispirms ļaujiet man darīt in-- yep, ļaujiet man iet uz Google vispirms. Es esmu nāksies iet uz Google iestatījumi, jo es gribu, lai izslēgtu kaut ko sauc tūlītēju rezultātu. 

Tātad jums varētu būt pamanījuši Google šie days-- ļaujiet man atgriezties un pārvērst šo par. Tātad, ja es sāktu meklēšanu par "kaķiem", piemēram, tas, paziņojums, ka ne tikai darīt Man auto-aizpildīt up top, visi pēkšņi, lapa pati Šķiet nomainīt diezgan ātri, kā arī, un tas ir Google, izmantojot valodu sauc JavaScript cenšas būt noderīga. Bet, diemžēl, tā veida par kopgaldu up mūsu diskusija par to, kas patiesībā notiek zem motora pārsega šeit. Tāpēc es esmu tikai veida ātri izslēdziet tūlītēju rezultātu. Un es esmu gatavojas noklikšķiniet uz Saglabāt. Un tagad es esmu gatavojas atvērt ka diagnostikas rīkjosla, ka es glabāt atvēršanu cilnē Network. Tātad, pieņemsim darīt. Ļaujiet me-- whoops-- ritināt šo leju mazliet. Un ļaujiet man meklēt "kaķiem." 

Un tagad notice-- faktiski, šī ir laba iespēja apspriest uz brīdi. Paziņojums mirkli es type-- apturētu to. Beidz. LABI. Paziņojums brīdi es rakstīt vēstuli C, skatīties apakšā ekrānam. A- T- S. Kāda apakšā Šī ekrāna, mans tab Network, ieteikt notiek katru reizi, kad es rakstīt vēstuli? Diemžēl, varde ir ļoti kaitinošas šodien vai Shamrock vai kāds viņš ir. Kas notiek katru reizi, kad es drukāti? Un ļaujiet man skaidrs buferis un ierakstiet to vēlreiz. So-- Whoops. Katru reizi, kad es rakstīt vēstuli, C- A- T-- tik jauna rinda acīmredzot tur parādās. Ko katrs no šiem rindas pārstāv, pamatojoties uz to, ko mēs esam redzējuši un apsprieda līdz šim? Mērķauditorija: Meklēšanu? DAVID J. Malan: meklēšanu, vai vairāk vispārēji, HTTP pieprasījums no mana pārlūku uz serveri. Nu, kāpēc ir mana pārlūkprogramma veicot HTTP pieprasīt katru reizi, kad es rakstīt vēstuli? 

Mērķauditorija: [dzirdams] DAVID J. Malan: Jā, tā dodot man šo auto-pilnīgs rezultātus. Tāpat, kur darīt šo meklēšanas rezultāti nāk no? Nu, katru reizi, kad es rakstīt vēstule, Google sūta vairāk un vairāk un vairāk vārds es esmu rakstīt. Kāpēc? Tāpēc, ka viņi vēlas, lai dod man labāk un labāk, labāk ierosinājums, ieteikumu sarakstu, par to, ko vārds Es cenšos, lai faktiski pabeigta. Tātad tas ir, burtiski ik raksturs rakstot uz Google tiek nosūtīts, galu galā beramkravu, bet arī dažreiz viens laikā, lai īstenotu šie auto-pilnīgs elementus, ja dati ir, protams, tīmeklī. 

Tagad, pieņemsim apskatīt to, kas patiesībā notiek, kad es noklikšķiniet uz Google meklēšana. Un tad mēs sviras šo sevi. Tātad, ja es ritiniet uz leju tagad ļoti pirmā pieprasījuma, kas tikko notika. Paziņojums sekojošo. Tas tika nosūtīts uz diezgan ilgu URL-- https://www.google.com/search? un tad viss ķekars sīkumi. Paskatīsimies tas patiesībā tagad pārlūka cilnes pati. Pieņemsim atbrīvoties no rīkjoslas šeit. Lūk, meklēšanas rezultātu lapā. Un paziņojums šeit ir URL. Tagad jūs varat droši uzminēt kas notiek šeit daļēji. Tātad, pirmkārt, definīcija. Tas acīmredzot ir galamērķis kur tiek iesniegta veidlapa. Tātad, kad es drukāti vārdus "Kaķi" un hit Enter, acīmredzot Google nosūtīts mana teksta ievades uz šo URL ka es esmu uzsvērusi tur, slīpsvītra meklēšanu. Izrādās, ar URL, kaut kas notiek pēc tam, jautājuma zīme ir, kā mēs glabāt sakot, galvenais vērtības pāris kas bija drukāti uz formā vai kaut kā nosūtīti no pārlūku uz serveri. 

Tātad jebkurā laikā rakstāt ievade uz veidlapas tīmeklī un tas ir nosūtīts, jo mēs esam spriežam, izmantojot GET, viens no šiem virtuālo aploksnes, saturs no tā envelope-- jā, saglabāt kļūst pildījumu fiziski uz aploksnes klasē šodien, bet tehnoloģiski tas ir faktiski laisti URL. Tātad faktiski, ļaujiet man izsijāt caur šo. Kur jūs redzat lietotāja ievadi? Kur jūs redzat kaut ko ka es pats drukāti šeit? Yeah, tāpēc "kaķi". Pa labi? Tāpēc ļaujiet man dedzināt šis uz kaut ko vienkāršāku. Es esmu gatavojas izdzēst visu par šis URL, ka es nesaprotu, un es esmu tikai gatavojas atstāt tā kā this-- / meklēt? q = kaķi. Redzēsim kur q nāk no brīdi, bet kas jūtas kā minimumam informācijas apjoms, kas man paredzēts. Un tagad es esmu gatavojas hit Enter. Un paziņojums tas joprojām darbojas. Mēs joprojām saņemt atpakaļ visu ķekars kaķiem. Tātad Google ir mīļotājs nekā tas šajās dienās. Tas 2016, nevis 1999. gada. Tātad tur ir citi sīkumi, ka mana pārlūkprogramma sūta uz serveri. Bet tas ir minimāli viss, kas ir nepieciešams. 

Tātad, kas notiek? Nu, vispirms ļaujiet man iet uz priekšu un iet atpakaļ uz Cloud9 un ļaujiet man iet uz priekšu un aizvērt manu cilnes agrāk. Un es darīšu šo par manu pieder tikai uz brīdi. Es iešu uz priekšu un izveidot jaunu failu. Un es esmu gatavojas, lai saglabātu to kā google.html. Un es esmu gatavojas ļoti quickly-- Es esmu gatavojas nozagt, faktiski, daži no šī teksta tikai, lai ietaupītu laiku. Es esmu gatavojas, lai ielīmētu to šeit. Es neesmu gatavojas apnikt ar jebkurā stilizācijas šoreiz. Mēs ejam, lai izsauktu šo "Mans Google." Un es esmu gatavojas atbrīvoties viss organismā. Un es esmu gatavojas darīt turpmāk. Ļaujiet man tuvinātu. Veido action-- un kā es īsumā minēts earlier-- whoops-- kā es īsumā minēts iepriekš, darbībā un forma ir, ja jūs sūtīt datus. So google.com/search. Un metode es vēlos izmantot var būt viena no divām lietām. Tas var būt vai nu "get", kā mēs turpinām apspriest, vai arī tā var būt "post". Tagad, pamata Atšķirība ir, ja jūs izmantojat "get" visa informācija norāda, lietotājs norāda izpaužas nosūtīts URL. 

Tas ir liels, lai lietas, piemēram, meklēt dzinēji un dažas citas programmas, bet kādos apstākļos būtu Jūs nevēlaties, lai aizpildītu veidlapu un ir informācija, galu augšu URL, tāpat kā pārlūkprogrammas adreses joslā? Kādu formu darīt you-- Mērķauditorija: [dzirdams] DAVID J. Malan: Jā, piemēram, ko? Mērķauditorija: paroles. DAVID J. Malan: Jā, lai jūs log , lai Facebook vai kādu mājas lapu. Tas ir lietotāja ievadi no forma, tekstlodziņš, bet jūs, iespējams, nevēlaties to rāda atbalstīts pārlūka URL. Kāpēc? Es domāju, varbūt ir dažas drošības ietekme uz tīklu, bet more-- patīk, vairāk vienkārši, kas notiks, ja jūsu kaimiņiem, jūsu citi nozīmīgi, jūsu bērni, jūsu laulātais izskatās caur jūsu pārlūka vēsturi? Ir jūsu parole taisnība tur pārlūkprogrammas vēsturi. Tas nav justies kā labu dizainu. Vai pat vairāk tehniski, pieņemsim, ka jūs cenšaties augšupielādēt fotoattēlu Flickr vai Facebook vai wherever-- kas ir lietotāja ievadi, lai gan tas ir nedaudz vairāk kā interesting-- man piestūķēt tēls URL joslā? Jūs veida veida nevar. Jūs veida var. Bet tiešām, es esmu grūti presēti iedomāties darām. Tāpēc man ir nepieciešams cits metodi augšupielādējot fotogrāfijas mājas lapā, un ka cita metode tiek saukta par "post". Bet tagad, mēs tikai runājam par "Get", kas ir vienkāršāka no diviem. Tas tikai liek visu lietotāja ievade URL. 

Tātad, šeit ir veids Es veidoju. Es gribu ievadi. Un jūs zināt, ko? Es esmu gatavojas veikt minējums šeit. Es esmu gatavojas atgādināt manu ievade "Q" par "vaicājumu." Un es domāju, ka tas ir viens no oriģinālu dizainu, iespējams, no 1999. gada. Un tad šī ieguldījuma veids ir tikai būs "tekstu." Un tad es esmu nāksies vēl ievade ka nav nepieciešams nosaukumu, jo mēs drīz redzēt, kura tips ir "jāiesniedz." Un tas ir gatavojas man īpašu pogu. Un tas arī viss. 

Tāpēc ļaujiet man iet uz priekšu un saglabājiet šo failu. Es esmu gatavojas doties atpakaļ uz manu pārlūkprogrammu un dodieties uz google.html. Enter. Un tas ir sava veida izsēts lai neteiktu vairāk. Bet ļaujiet man iet uz priekšu un meklējiet "kaķiem." Un paziņojums es esmu šobrīd Šajā Cloud9 URL. Bet kad es noklikšķiniet uz to, kur jūs ceru, ka es galu galā? 

Mērķauditorija: Google. 

DAVID J. Malan: Google. Tātad, pieņemsim noklikšķiniet uz Iesniegt. Un tiešām es esmu atkārtoti īstenots Google. Pa labi? Tas ir vienkāršāk. Tas ir vieglāks. Es domāju, mans kods ir acīmredzami labāks nekā savējo, no haoss mēs redzējām agrāk. Un jūs zināt, ko? Es esmu gatavojas spice šo augšu mazliet. Es neminēja šo agrāk. Ir tagus, piemēram, H1, par 1 pozīcijai, svarīgākais virsrakstu lapā. "Mana Google," Es aicinu šo. Ļaujiet man pārlādēt. Tā meklē mazliet labāk jau. Un, patiesībā, jūs zināt, ko? Esmu already-- man meloja. Es teicu, es netaisos stils šo, bet es esmu gatavojas stils tas kā agrāk. Un mans ķermenis būs, teiksim, teksta align centrs. Tas ir meklējat vairāk, piemēram, Google jau. 

Man vajag rindiņas pārtraukumu, lai gan, par to pogas Iesniegt. Un izrādās, tu var izmantot punktu, vai jūs varat vairāk burtiski tikai teikt, man rindiņas pārtraukumu here-- BR tagu. Un, ja es pārlādēt šo, tagad tas notiek tur. Tas ir nedaudz neglīts, tāpēc es varētu darīt vairākas rindiņu pārtraukumi, bet pieņemsim nav get pārāk mantkārīgs šeit. Tāpēc tagad pieņemsim redzēt, ja tā darbojas "suņiem." Šķiet strādāt "suņiem", kā arī. Tātad, kas ir pārliecinoši takeaway šeit? One-- nebija milzīgs lēciens uz ieviest dažus atslēgvārdus, tāpat veidlapas tagu ievades tag. Bet plašākā skatījumā ir, viss, ko mēs darām ir piesaistot mūsu izpratni HTTP un faktu, ka formas galu galā mainīt kas ir URL pārlūku, un tā, tāpēc mēs varam mehāniski sniegt ieguldījumu, lai serveri izdarot HTML formu un zinot ka serveris saprot HTTP, tāpat kā mūsu ķermenis saprot, piemēram, kratot manu roku, ka tas pats protokols, un lai mēs saņemtu atpakaļ atbildi ka mēs galu galā sagaida. 

Tāpēc pieņemsim mēģināt darīt kādu Pēdējā lieta, ko tagad ar mobilo, un es ņemšu make-- es ņemšu pievienot šo kodu uz slaidiem. Tātad, ja jūs vēlaties, lai lāpīt, jums noteikti var ņemt to no turienes. Bet es iešu priekšu un darīt vienu lietu. Es iešu uz priekšu un atvērt manu indeksa page-- mans sveiki lapa kā iepriekš, kas ir daudz šīs viltus latīņu teksta, vai bezjēdzīga latīņu teksta, un has-- tas izskatās šādi šajā fonta lielumu. Bet ļaujiet man iet uz priekšu un darīt to. Es iešu uz Cloud9. Un jums nav jādara šo soli. Es vienkārši darīt to pats. Es esmu gatavojas noklikšķiniet uz Kopīgot. Un tas ir funkcija tikai no Cloud9, saskaņā ar kuru Es varu darīt mana vide publiski. 

Un tikai dēļ demonstrēšana, ļaujiet man darīt. Es esmu gatavojas darīt manu pieteikumu atklātībai. Paziņojums tas brīdinājums man, esmu Es pārliecināts, ka es gribu to darīt, jo tas ir gatavojas veikt visus pasaulē, vai viņi šeit tagad vai skatoties video vēlāk par interneta iespēja redzēt to, ko es redzu. Bet tas ir OK. Es esmu gatavojas teikt "Gatavs". Un ļaujiet man aicinām jūs, ja es darīju Tas correctly-- ļaujiet man to izmēģināt pirmās. Iet uz priekšu, ja jums nav mind-- pārlūkprogrammā datorā, doties uz šo URL, un cerams jūs redzēsiet manu latīņu tekstu. Un, lai būtu skaidrs, tas ir darbojas ne par manu klēpjdators. Tas ir mākonis. Tas ir par Cloud9, burtiski, bet Esmu veikusi savu darbvietu atklātībai lai ikviens internetā var piekļūt savam latīņu mājas lapā. 

Iet uz pašu URL par tālrunis, ja jūs varētu. Ja tas būs izmaksas jums, lai gan, jūs var paskatieties pār plecu. Mērķauditorija: [dzirdams] DAVID J. Malan: Es atvainojos? Mērķauditorija: [dzirdams] DAVID J. Malan: Tikai latīņu vārdi. Tas ir viss. Bet tas ir tas, ko jums vajadzētu redzēt. 

Mērķauditorija: Jā. DAVID J. Malan: Jā. Jā. LABI. Tātad, es varu turēt līdz jūsu tālrunis tikai brīdi? Tātad, cerams, ja jūs piekļūt tā, tas izskatās gandrīz nesalasāms. Tas ir still-- Es domāju, tas ir nesalasāms jo latīņu valodā. Bet tas ir arī lasāma kādam cita iemesla dēļ? Tāpat, ko displeases tu par šo? Mērķauditorija: Tas ir mazs. DAVID J. Malan: Tas ir super, super maza. Tātad, kā mēs varētu noteikt šo? Tas ir super, super mazs par Viktorijas tālruni un, ja jūs esat velk to pats, iespējams, mazs tālrunī, kā arī, ja vien jums ir iespējots pieejamības iestatījumi. Kas tas ir? Jūs varētu vienkārši šķipsnu un zoom, kas ir praktiski, bet tad jūs tikai redzēt dažus vārdus vienā reizē. Tātad pagaidiet minūti. Es zinu, kā noteikt šo. Pa labi? Es varētu izmantot CSS, un es varētu mainīt fonta izmērs no 12 punktu līdz 24 punktam. Bet blakusparādība, ka, protams, būs tagad, uz darbvirsmas vai klēpjdatoru, tagad teksts ir divreiz lielāks. Un tā tas būtu sava veida jauki atšķirt ierīcēm, un izrādās, tur Ir veidi, kā to, kas. Ir vairāki dažādi veidi, patiesībā, saskaņā ar kuru, izmantojot CSS un mīļotājs iezīmes ka mēs neiešu ļoti detalizēti, jūs varat būtībā vaicājumu pārlūku un teikt, Ja jūsu ekrāns ir mazāks nekā tas daudz pikseļu, izmantojiet šo fonta lielumu. Ja jūsu ekrāns ir lielāks, nekā tas daudz pikseļu, izmantojiet šo citu fonta lielumu. 

Jūs varat būt pat mīļotājs joprojām. Ja esat kādreiz apmeklējis mājas lapa, kas, uz galda, ir liels izvēlni varbūt off uz pusē, un pēc tam visu saturu ir uz pusi ka menu-- tas ir sava veida kopīgu paradigmu. Menu kreisajā pusē saturu par tiesībām, vai otrādi. Nav īsti strādāt mobilo kad jūsu Ekrāns ir tikai šī pikseļu plats. Tik daudz izplatītāki mobilais ir, Jūsu izvēlne pēkšņi nokļūt sabruka, un jums ir noklikšķiniet uz pogas, lai to aplūkotu, vai mājas lapā tiks likts izvēlni virs tā un likt zem tā saturu. Un jūs varat ieviest šos lietas daudzējādi, too. Jūs varat lūgt jūsu programmētāji, hey, komanda, jebkurā laikā redzat HTTP pieprasījumu no Android ierīci, Microsoft ierīce, Google ierīce, Apple ierīci, izmantojiet šo fonta izmērs un izmantot šo izvēlnes izkārtojumu, vai arī izmantot šo noklusēto lielāku izkārtojumu. 

Tagad, izmantojot to, ko būtisks paņēmiens šodien varētu inženieri izmantot zināt, vai tas ir iPhone, Android telefons, klēpjdators, desktop apmeklējot uzņēmuma serveri? Kur viņi saņem šo informāciju? 

AUDITORIJA: header? 

DAVID J. Malan: Jā, HTTP galvenes. Tātad, katru HTTP pieprasījums nāk no saviem klientiem, lai viņu serveriem ietver, iekšā, ka virtuālā aploksne, viss ķekars HTTP galvenes, no kuriem viens ir pārlūkprogramma un operētājsistēma pat, ja jūs uzmanīgi, lai ka detalizācijas līmenis. Tagad tas ir mistisks izskata string, bet pastāv programmatūra, kas tikko vienkāršot, ka, un jūs varat lūgt programmēšanas code-- PHP, Java, C ++, whatever-- kāda tālrunis this-- kāda ierīce ir šis lietotājs izmanto? Un tad jūs varat teikt, parādīt viņiem šis versija mājas lapā, ja tas ir telefons. Parādiet viņiem šo versiju mājas lapā, ja tas ir klēpjdatoru vai galda. Bet jums nav pat nepieciešams server-side sarežģītība. To var izdarīt pat visvienkāršāko lietas. 

Es esmu gatavojas darīt. Es iešu uz priekšu uz mans Cloud9 vide, un es esmu gatavojas pievienot atzīmi ka redzējāt Google pirms. To sauc par metatags. Un es nekad atceros šo vienu, tāpēc Es esmu gatavojas pārveidot to šeit. Meta name = "skatvietai", un pēc tam content = "width = ierīce platums, intital mērogs = 1 "un tas arī viss. 

Tātad tas varētu arī būt kā burvju buršana. Tas vēl nav viss, ka skaidrs, bet tas ir kaut ko darīt ar apskates, un apskates ir tikai ķermenis mājas lapa, taisnstūra reģions, kas definē lielāko lapā. Un tas ir tikai stāsta pārlūku, jūs zināt, ko? Padarīt platumu šīs lapas vienāds ar ierīces platuma. Citiem vārdiem sakot, neuzskatiet, ka Jums ir kādas neierobežotu telpu. Pieņemsim, ka jums ir tikai tik daudz telpa kā pašas ierīces ir liels. Un tāpēc tagad, ja es pārlādēt šo manā pārlūkprogrammā, es neredzu izmaiņas. Bet, ja es tomēr šo correctly-- un ļaujiet man šķērsot manu fingers-- ja jums visiem pārlādēt savu telefonu, vai ne redzēt pārliecinošu izmaiņas? Jā, ir that-- 

Mērķauditorija: [dzirdams] DAVID J. Malan: Jā. LABI. Tāpēc varbūt vieglāk lasāmu tagad? Vēl ir mazs, lai būtu godīgi, bet ne tik niecīga, lai būtu grūti. Un es, protams, var ignorēt šo tālāk ar CSS vai uz servera pusē, bet arvien vairāk to, kas tu esi redzot ir vairāk un vairāk funkcijas tiek pievienoti klienta pusē environments-- JavaScript, kā mēs apspriestu rīt, CSS, un HTML-- tā ka visi no šiem vaicājumiem var izdarīt uz klienta tā kā apnikt serveris daudz mazāk un ne ir sekot līdzi, lai piemēram, pastāvīga uzbrukums par jaunu ekspluatācijas sistēmai versijas, jaunas pārlūku versijas. Jūs varat vienkārši ļaut pārlūku jautāt ierīci, cik liels tu esi, un tad veikt mazliet loģiski lēmumi, pamatojoties uz to. Bet mēs redzēsim vairāk iespēju par loģiskiem lēmumiem rīt kontekstā par programmēšanas valodu. 

Tātad, kādi jautājumi, tad, par interneta attīstību? Šodien nav web programmēšana, per se, jo lielākā daļa visu mēs darījām bija ļoti estētisks, ja Jums gribas. Nav lēmumu pieņemšana kods, kas mēs esam uzrakstījuši, un tā, ka tāpēc HTML ir iezīmēšanas valoda, nav programmēšanas valoda. Bet rīt mēs ņemšu ātri apskatīt, galu galā, pie JavaScript, kas ir faktiskā programmēšana valoda, kas ļauj mums darīt mazliet vairāk. 

Kādi jautājumi? Nu, ļaujiet man ieteikt divas iespējas izvēles par mājasdarbu. Viens is-- šos Cloud9 konti nebeigsies. Jūs esat laipni aicināti izmantot tos lāpīt ar. Tas ir bezmaksas pakalpojumu līmeni. Saprast, ka, ja, veidojot Jūsu darbvietas, jūs padarīja publiski, tas nozīmē, ka ikviens uz internets var redzēt, ko jūs rakstāt. Tāpēc varbūt vienkārši apsvērt nav neērts sevi ja jūs nodot savu pirmo web lapa tur publiski nejauši, bet neviens gatavojas zināt meklēt tur anyway. 

Un two-- ļaujiet man mētāties up šo URL, kā arī, it īpaši, ja jūs nāca šodien nedaudz mazāk apmierināti nekā citi, pārliecināts, ko tas viss nozīmē sīkumi. Saprast, ka daudz vairāk par šo video, kas ir gan labs veids, lai aizmigtu un arī smieties laiku darot, ir arī daudz societally interesants un drošības saistītas diskusijas tajā no John Oliver, kaut arī komiķis. 

Bet, ja nav papildu jautājumi, kas mūs noved pie uzņemšanas. Tātad, kāpēc ne es ieslēgtu mūziku. Ir jābūt dzērieni un uzkodas ārpus. Es esmu laimīgs, lai maisīt tik Kamēr folks vēlētos, atbildēt uz jautājumiem vēl viens-on-one. Bet, pretējā gadījumā, jūs esat laipni pacelties jebkurā brīdī, un mēs redzēt jūs atkal rīt no rīta, lai mazliet vairāk. Labi, paldies.