David J. Malan: Gerai. Mes grįžome. Taigi, šio baigiamojo sesijos tikslas yra įvesti kelis sąvokas bet taip pat suteikia kiekvienam galimybę į rūšies ruožas pirštais ir iš tikrųjų ką nors padaryti mažai hands-on. Tikslas yra ne paversti mums visiems į interneto svetainių kūrėjai bet kokiomis priemonėmis, bet tikrai tik duoti jums kai kurių skonį pagrindinių konstrukcijų, ką eina į interneto programavimo, o šiandien internete plėtros, todėl statinio pusėje Quake ne logika, ne programavimo kalba, tiesiog statinis turinys. Ir jis duos mums galimybę realiai pamatyti, ką interneto serveris, pamatyti, kas HTML failas yra, pamatyti, kas tai HTTP tikrųjų tarnauja iki. Bet kol mes pasinerti, atgaline data Turite klausimų apie debesų kompiuteriją ar saugumo ar nieko tarp? Ar ne? Gerai, gerai, tegul tai padaryti, tik tuo atveju, iš Užsiregistravę procesas kažkas trunka kelias minutes. Mes tegul jis tai padaryti fone. Eiti į priekį, jei galėtų, į šį URL here-- c9.io. Tai trečiosios šalies service-- platforma kaip paslauga, jei will-- kad ketina pakviesti Jus užsiregistruoti sąskaitą, ir jis ketina suteikti kiekvienas iš jūsų in vadinamosios debesų sąskaita kažkieno infrastruktūros, įmonė vadinama Cloud9. Bet kas malonu apie tai, kad jie suteiks jums kurio apytikslis Tikrasis realaus pasaulio plėtra aplinka, nors į debesis ir interneto naršyklę, ir mes naudosime tai, kad iš tikrųjų šiek tiek eksperimentuoti šiandien. Ir tada eiti į priekį ir tiesiog naršyti savo kelią į registracijos procesą Jei galėtum. Taigi, mes atsitikti naudoti šią klasėje Aš mokau visiems mūsų studentams, tiek miesteliu ir išjungti dabar, ir tai pakeisti, kas istoriškai buvo kitaip atsisiųsti programinę įrangą. Taigi, kas jums buvo patekti į yra viena iš šių virtualių mašinų, iš esmės, kad aš aprašyta anksčiau. Taigi ši bendrovė Cloud9 tikriausiai nuomos iš trečiosios party-- iš tiesų šiuo atveju, Google ", visumą krūva virtualių mašinų kad jie kažkaip sukapoti į atskirų serverių iliuzija kad kiekvienas iš mūsų turi pilną kontrolę. Tai ne visai tiksliai pasakyti kad jie virtualios mašinos, nors, nes tai, ką Cloud9 tikrųjų naudoja yra šiek tiek naujesnis technologijos vadinamas Konteinerių. Ir leiskite paimti šią nuotrauką Čia dažų šią nuotrauką. 

Konteineris yra, jei pamenate nuotrauką iš anksčiau, šiek tiek lengvesnis svoris nei virtualioje mašinoje. Iš tiesų, kadangi paskutinis kartą mes kalbėjome apie ten yra operacinė sistema ir Hypervizoriaus ir tada svečias operacinė sistema, svečių operacinė sistema, svečių operacinės sistema, ant savo fizinės kompiuterinės įrangos, skirtumas su šia naujesne technologija, Konteinerių yra tai, kad jie visi kažkaip pasidalinti tas pats operacinė sistema. Tačiau jie vis tiek sukurti kiekvieno žmogaus iliuzija turintys jo paties išskirtinis administracinės teisės ir failai serveryje. Bet yra mažiau programinė įranga tarp jūsų ir aparatūros. Kurio rezultatas yra teorija, didesnis našumas, nes jūs naudojate arba eikvoti mažiau išteklių dėl, kad vadinamosios Virtualizacija sluoksniu. Taigi tai vadinama Konteinerių gamta būdu technologiją, pavadintą Docker, kuri yra labai daug ateina į savo. Ir tai yra kažkas, kad inžinieriai savo įmonę gali rūšies tarsi pradėti kalbėti Apie greičiau jei jie dar neturite, nors ten tikrai ne Priežastis šokinėti ant bet bandwagons. 

Taigi su tai sakė, ką jūs tikriausiai pamatyti dabar yra ekranas, kuris atrodo šiek tiek panašus į šį. GERAI. Ir tik paskambinti man per jei ne. Ir jei so-- Aš ateisiu per jei ne. Eiti į priekį ir spustelėkite, kad didelis plius sukurti darbo vietą, ir pamatysite, kaip šis ekranas. Galite skambinti darbo sritį pavadinimas viską, ką nori dabar. Ir tik iš tikrųjų paprastumo, eiti and-- gerai, kai kurie iš jūsų jau darbo sritis. Pavadinkite tai ką want-- verslą, Harvardo, ketvirtadienis, ką norite. Jums nereikia aprašymas. Jūs galite palikti jį privačiai, nebent jumis jau turime darbo vietoms krūva. Jei priversti jį visuomenei, tai gerai šiandienos reikmėms. Čia taip pat yra vienas iš Upsells. Jūs gaunate vieną asmeninįpranešimą darbo sritį numatytas. Bet jei jūs norite daugiau, jūs turite mokėti daugiau. Priešingu atveju, jie priversti jus padaryti savo darbo viešai. Bet tai gerai, nes jie taip pat nukreipti tai ne atviro kodo bendruomenių paskatinti žmones iš tikrųjų bendradarbiauti. 

Ir paskutinis dalykas, kad svarbu, nors tai, po pasirinksite vardą ir po pasirinksite privatus arba viešasis, spustelėkite HTML5, didelis oranžinės piktogramą antras iš kairės, ir tada spustelėkite Kurti Workspace. Ir tai tikriausiai užtrukti keletą minučių arba tiek, bet jums tada turėti aplinka, kai jūs padaryti, kad atrodo, primenantis ką aš turiu ekrane čia dabar. Bet vėl gi, tai gali užtrukti keletą minučių arba daugiau, jeigu reikia į šį ekraną kai jūs paspaudėte Sukurti Workspace. Bet tik žymėti mane per jei norite mane pažvelgti į ką nors ar patarti išvaizdą. Gerai. Taigi, aš ruošiuosi fone tai dabar. Skambinkite man per jei jums atrodo, kad jokių techninių sunkumų. Bet vėl gi, tai gali užtrukti Šiek tiek už tai, kad atidarytumėte. Ir tegul eiti į priekį ir kalbėti apie tai, kas ji iš tikrųjų reiškia, kad interneto puslapį, kaip HTML naudojamas, ir kaip visa tai dabar jungia kaip mes pradedant iš tikrųjų naudoti kai kurios technologijos. Taigi paaiškėja, kad galiu eiti mano mažai Mac čia atidaryti paprastą programą, pavadintą TextEdit arba Windows galėjau atvira kažkas vadinamas Notepad.exe. Ir aš galėčiau tiesiog kažką daryti kaip this-- "Hello, World". Ir tada aš galėtų išgelbėti tai, kaip hello.txt Taigi ne magija ten. Tai neturi nieko bendro su interneto programavimas, nieko daryti su HTML. Tiesiog sukurti paprastą tekstinį failą. Tačiau paaiškėja, kad interneto puslapis yra tiesiog tik tai. Tai paprastas tekstinis failas, kuriame yra tekstas kad jūs galite įvesti savo klaviatūroje, tačiau ji paprastai, bet ne visada baigiasi ne Txt bet Html arba .htm. Ir jūs ne tik įrašykite žodžius failą. Jūs iš tikrųjų turite naudoti dalykų, vadinamų žymės arba, platesne prasme, kažkas vadinamas žymėjimo kalba. 

Taigi, aš ruošiuosi labai greitai įvesti ir tada paaiškinti taip. Aš ruošiuosi pirmą kartą tipo tai, kuris sako, ei, naršyklė, čia ateina interneto puslapis parašyta HTML. Ir šie du dalykai kartu pasakyti, ei, naršyklė, taip yra iš tiesų HTML. Ei, naršyklė, čia ateina vadovas ar mano puslapio viršuje. Ei, naršyklė, viduje viršuje mano puslapis, įdėti pavadinimą, kuris yra "labas, pasaulis ". Ei, naršyklė, po galva mano puslapis, čia ateina mano puslapyje kūną. Ir, ei, naršyklė, kūno mano puslapis, taip pat turėtų pasakyti: "hello world". Taigi, kas yra svarbiausi informacijos čia? Tai, kas paprastai vadinamas dok tipo deklaracija, ir, tiesą sakant, tai šiek tiek sunku įsiminti tai ne pirmas. Jūs tiesiog rūšies kopijuoti įklijuokite jį. Tai formalus būdas pasakyti, ei, naršyklė, Aš naudoju HTML versija 5, kuris išėjo šiek tiek neseniai. Tai magiškas užkalbėjimas, kad kai kurie žmonės su bloga prasme dizainas nusprendė įdėti ne pačiame viršuje failą. Nors tai tiek paslaptinga, kad viskas tai means-- Ei, naršyklė, čia ateina su HTML 5 versija. 

To poilsio buvo su mumis tam tikrą laiką dabar, istoriškai bet tai buvo vystosi, ir tai tikriausiai buvo truputį paprastesnis. Pastebiu kelis požymius ką aš paryškintas. Yra tokie dalykai su kampu brackets-- kairįjį laikiklį ir teisė laikiklis. Ir pastebėsite simetrija čia. Ir simetrijos, aš turiu galvoje, kaip aš šią pradžios žymos čia arba atvirą tag jei bus, žemyn čia turiu Uždaryti tegus arba pabaiga tegus tai skiriasi tik tiek, kiek ji turi tai velniop ne žodžio pradžioje HTML. Ir jūs galite galvoti apie tai kaip man buvo atsainiai pasiūlyti anksčiau, ei, naršyklė, čia ateina šiek tiek HTML. Ir, atvirkščiai, ei, naršyklė, tai tai už HTML-- pradžioje ir pabaigoje. 

Tuo tarpu ei, naršyklė, čia ateina mano puslapyje galvą. Ei, naršyklė, tai jį galvą. Ei, naršyklė, čia yra mano puslapyje kūnas. Ei, naršyklė, tai viskas organizmui. Ir viduje, kad yra tam tikra savavališkai tekstas dabar. Ir viduje galvos, tuo tarpu, yra kai savavališkai, tačiau tagged, taip sakant, tekstą, kuriame sakoma, pavadinimą mano puslapyje turi būti "Labas, pasauli". Dabar, dabar, jūs galite manyti, kad naršyklių turi jei jums reikia, arba, tiksliau, interneto puslapiai turi tik du parts-- galvą ir kūną. Ir galva yra paprastai tik kaip meniu juostoje stuff tikrai tik pačiame viršuje. Ir kūnas puslapio viduriai, viskas, kad didelis stačiakampis kad užpildytų ekraną. Taigi, aš ruošiuosi eiti į priekį ir tai padaryti. Aš ketinate eiti į priekį ir spustelėkite Įrašyti failą Įrašyti. Ir aš ruošiuosi išsaugoti tai kaip hello.html, ir aš tik ketina padėkite jį ant mano darbastalio. Ir aš ruošiuosi eiti į priekį ir spustelėkite Įrašyti. Ir notice-- mano mac ne jau šaukia mane. Ar jūs tikrai norite tai padaryti? Ir aš ruošiuosi pasakyti, taip, naudoti HTML. Aš žinau geriau šiuo atveju. Ir dabar aš ruošiuosi eiti į mano darbastalio kur aš šį failą staiga. Ir aš ruošiuosi dukart jį spustelėkite. Ir jūs pastebėsite, kad, Numatyta, kad "Chrome" atsivėrė. Tai todėl, kad tai mano numatytąją naršyklę. Ir tai tik sako: "Labas, pasauli". Bet jis sako: "labas, pasaulis "dviejose vietose. Atkreipkite dėmesį, viršuje kairėje. Gana sunku nepastebėti, kad. Tai didelis ir drąsus. Ir kur kitur jis atrodo pasakyti: "Labas, pasauli"? 

AUDITORIJA: skirtukas. 

David J. Malan: Taip, pati skirtukas. Taigi, kai pasakiau galvos puslapis yra viskas iki top-- ir iš tikrųjų tai yra pavadinimas. Tai tiesiog Kortelėje čia. Ir aš galiu traukti šį skirtuką iš taip, kad nebūtų supainioti. Tai tik vienas skirtukas dabar ir iš tikrųjų mes matome "labas, pasauli" čia ir "labas, pasauli" žemyn čia. Taigi gana paprasta. Bet tai taip pat gana paprasta. Ir, iš tikrųjų, aš Mastelis. Galiu pakeisti šrifto dydį tik perdėti prieinamumo. Bet tegul dabar ką nors padaryti šiek tiek įdomesnis. 

Aš ruošiuosi go-- oi, tegul man gauti atgal į savo tekstinį failą. Aš ruošiuosi grįžti į savo Tekstinis failas, ir aš ruošiuosi pakeisti ir pasakyti "Labas," Disney "pasaulis." Sutaupyti. Ir grįžti į savo Naršyklė ir spustelėkite Atnaujinti. Ir dabar, žinoma, ją sako: "Disney" pasaulis. " Ir aš ruošiuosi dirbtinai padidinti Vos todėl lengviau matyti. Taigi, dabar, deja, I rūšies noriu to-- tikrųjų, tai Mac funkcija. Noriu spustelėkite Disney World ir eiti kažkur kaip disney.com, bet kad neveikia. Taigi pagrindinis principas internete yra hipersaitus nuorodos, kad eiti kitur. Taigi, kaip man tai padaryti? Na, galėčiau tik pasakyti, "Labas, http://www.disney.com". Išsaugoti šią. Perkrauti. Bet tai irgi ne spausti. Ir kas malonu čia, nors tai nėra funkcinis dar, yra tai, kad atrodo, kad naršyklė tiesiog tik ką sakau daryti. Taigi, jei aš tiesiog įveskite URL, kaip tai, tai tik ketina parodyti man URL. Man reikia naudoti žymes ar žymėjimo kalba, kad iš tikrųjų pasakyti naršyklė padaryti dar daugiau. Taigi, aš ruošiuosi eiti į priekį ir ištrinti akimirką. Ir aš ruošiuosi pasakyti, ei, naršyklė, pradėti inkarą čia nuoroda taip sakant. Ir hiper-nuoroda, paskirties tos inkaras, turėtų būti šį URL. Ir pastebėsite mano kabučių. Galėčiau naudoti kabutes, taip pat, bet jūs turite būti nuoseklūs, ir aš norėčiau paprastai tiesiog naudoti kabutes laikyti jį paprasta. Atkreipkite dėmesį, aš ruošiuosi uždaryti žyma. Ir tada aš čia ruošiuosi pasakyti, "Disney World". Ir dabar man reikia symmetry-- atvira laikiklis, / A, uždarytas laikiklį. 

Taigi, ką aš pristatė? Mes turėjome keletą žymes jau. HTML Vadovas, Pavadinimas, kūnas, yra visas žymes, taip sakant, su atviromis ir uždarų kolegomis. Tačiau pranešimas, tai tarsi iš esmės skiriasi. Tai yra tai, ką mes vadiname HTML atributas. Ir atributas yra tik pagrindinis vertė pora. Tai yra dažna dalykas Kompiuterio science-- raktas-reikšmė pora. Tai tarsi iš prekybos įrankiu. Pagrindinis ir vertės. Žodis ir tada kai kitas žodis arba žodžiai. Ir šiuo atveju, svarbiausia yra href, ir vertė yra ta, kad pilnas adresas. Ir ką atributas yra ji įtakoja žymės elgesį. Ir šiuo atveju, mes reikia daryti įtaką inkaro žyma elgesys, nes mums reikia įtvirtinti ši nuoroda į kažkur. Ir kaip jums tai padaryti yra būdu atributo. 

Taigi, aš ruošiuosi eiti į priekį ir išsaugokite failą dabar. Grįžti atgal į savo naršyklėje ir perkraukite puslapį. Ir voila, mes dabar turi pradžia apie teisėtą tinklalapį. Super paprasta, bet jei aš užveskite pelės žymeklį ant this-- pranešimas apatiniame kairiajame kampe, tai super mažas. Bet jūs matau www.disney.com. Ir jei aš spustelėkite jį, iš tikrųjų tai plaktuvai mane į disney.com. Dabar, keistas dalykas čia yra tai, kad ji yra ne best-- labiausiai paklausių URL, bet tai gerai, nes tai failas neatsidaro egzistuoja apie World Wide Web. Ji egzistuoja kaip vietos failą matyt Mano Vartotojai directory-- / jharvard-- John Harvard-- / darbalaukyje. Bet ji turi URL. Jis tiesiog atsitinka būti vietos. Deja, niekas iš jūsų galite aplankyti tai, nes jei įvesite šią nuorodą, norite būti pasakoja savo naršyklę, ieškoti failų vadinamas hello.html kietajame diske. Ir, žinoma, jei jūs buvo taip palei rankiniu būdu, jis nesiruošia egzistuoja. 

Taigi, kad viskas gerai. Mes vis dar turime būdą, galiausiai, gauti šį failą į interneto, bet tegul erzinti išskyrus keletą pora saugumo padariniai, ką mes tiesiog pamatė ir susieti jį atgal į anksčiau diskusija iš šio ryto. Pasirodo, kad, jei Naršyklė pažodžiui tik daro ką aš pasakyti, padaryti, ir atrodo būti tas atvejis, kad inkaro tag įtakos vertės Šis atributas vadinamas href bet tai rodo tai tekstas, tai atrodo tai nereiškia, kad galėčiau įdėti URL abiejose vietose ir tada perkraukite ir dabar pamatyti URL ir eiti į URL. Atkreipkite dėmesį, jei aš užveskite pelės žymeklį ant apatiniame kairiajame, Aš iš tiesų vyksta dar disney.com. 

Taigi, jei jūs kada nors buvo phished-- P-H-I-S-H-E-D-- su vienu iš šių fiktyvių laiškų iš, kaip PayPal jūsų banko, jūs tikriausiai Dotarłeś nuorodos viduje iš elektroniniu paštu, kad jūs skaitote, kad jums pasakys, spustelėkite čia eiti Patvirtinti Jūsų slaptažodis arba patvirtinkite savo gimimo datą ar socialinės ar kažkas socialiai inžinerija jums atskleisti informacija. Na, galėčiau rūšies imtis Privalumas tai, negalėjau aš? Galėčiau pasakyti kažką patinka, www.paypal.com. Ir vietoj disney.com, aš gali eiti į, pavyzdžiui, badguy.com. Perkrauti. Ir kaip lengva tai naivuolis, ypač ne techninis skaitytojas ar prabėgomis skaityti Skaitytojas, nei spustelėkite nuoroda, kaip šis, kuris, jei aš spustelėkite it-- Aš iš tikrųjų nenori eiti badguy.com. Aš nežinau, kas iš tikrųjų yra. Taigi paypal.com, pranešimas yra ką ji sako jis ketina, bet žinoma, jei žiūriu žemyn super mažas, tai šiek tiek neryškus, bet jis sako badguy.com. Tai vienintelis pasakyti dabar kad aš ruošiuosi netinkamoje vietoje. Ir kai aš anksčiau sakė, kad bankai tikrai neturėtų skatinti ar traukiniu vartotojus į paspaudę nuorodas, ši yra tik vienas pasireiškimas jį. Ir tai, kad paprasta. Jūs esate dabar, jei priešas jūs ką nors panašaus į tai ir bandyti apgauti vartotoją į apsilankymą jūsų svetainę. Bet dabar, mes nuolat dalykų gražus ir švarus. Mes ketiname eiti į priekį ir atgal šiuos pakeitimus. Perkrauti puslapį. Ir aš einu atgal į disney.com. 

Leiskite pamatyti, jei mes negalime erzinti tai vienas nuo kito šiek tiek daugiau. Taigi "labas," Disney "pasaulis." Aš ruošiuosi pasakyti žemyn čia. Gal aš ruošiuosi padaryti šiek tiek kambarį. "Tikimės, kad jums mėgautis savo buvimo!" Sutaupyti. Perkrauti. Tai ne rea-- tai ne ką aš skirta, tiesa? Aš turiu galvoje, jei aš gydant mano tekstą pateikti kaip teksto redagavimo, ką tu tikiuosi nutiktų čia? Taip, aš jaučiu, kaip ten turėtų būti linijos trūkis čia taip jis jaučiasi Buggy tam tikru būdu. Bet tai tikrai apgalvotas, nes tik kaip ir anksčiau, naršyklė tik ketina Ar tai, ką pasakyti, daryti. Aš jos nepasakiau jį sulaužyti linijas. Aš nepasakiau jį žemyn, net nors intuityviai, aš jaučiuosi kaip aš padariau. Taigi paaiškėja, mums reikia šiek tiek daugiau aprašų, ir aš ruošiuosi išspręsti šią problemą taip. Aš ruošiuosi PRATARMĖ Šiame pirmasis Sveiki su tuo, kas vadinama žyma dalis. Ir tada aš ruošiuosi eiti į priekį ir apvyniokite šį kitą sakinį kitoje žyma dalis, nors jie super trumpus punktus. Dabar aš ruošiuosi išsaugoti. Perkrauti. Ir dabar mes turime, kad erdvė, o mes tarsi turi semantikos dvi atskiros dalys. 

Tai viskas gerai, ir gerai, bet tai malonu pridėti paveikslėlį į šį puslapį, todėl aš ruošiuosi eiti ieškoti Peliukas Mikis "Google" vaizdai. Ir tiesiog for fun, aš ketina patraukti šį vaizdą. Aš ruošiuosi eiti į priekį ir dabar patraukti šio paveikslėlio URL nors skiriasi būdų, kaip tai padaryti. Nes dabar, aš tik ketina nukopijuokite URL. Aš ruošiuosi grįžti į mano tekstą failą, o aš ruošiuosi pasakyti čia img src = citata citatos pabaiga kad URL, super ilgai. Ir tada Kurių samprata vaizdo yra šiek tiek kitoks. Ten tikrai ne Pradinių samprata vaizdo ir baigiant vaizdą, kaip pradžioje pažymėti pabaigos žyma. Taigi jis jaučiasi šiek tiek keista man semantiškai tai padaryti, turėti arti vaizdo žyma. Tai nėra neteisinga. Tai visiškai teisinga, ir tai skatinama, bet ten sutrumpinimas notacija. Galiu rūšies vienu metu atidaryti ir uždaryti Tos pačios žymos, ir, kad bus padaryti naršyklė laimingas. Taigi, tai tik šiek tiek daugiau glausta dalykų kad konceptualiai tikrai ne prasmės pradžioje ir pabaigoje. Jie tiesiog yra ten, ar jie nėra. 

Taigi, aš ruošiuosi išsaugoti tai ir grįžti mano "Labas, pasauli" puslapyje ir perkraukite puslapį. Ir tai šiek tiek iš po kontrolės, nes vaizdas yra iš tikrųjų šiek tiek didelis, bet viskas OK. Galėčiau keisti jį į programą. Arba žinote, kas. Tiesiog parodyti, aš vyksta iš tikrųjų pasakyti kad šio dalyko plotis tik 200 pikselių, 200 taškais. Leiskite man eiti į priekį ir sutaupyti ir perkraukite, o dabar puslapis atrodo šiek tiek labiau pagrįsta. Bet pastebėsite modelis. Na, aš rūšies išmokė jus visus HTML tam tikra prasme, bent jau konceptualiai, nes visi HTML yra tai tags-- atviros žodžius, uždarytas žymes, ir atributus, kad keisti savo elgesį. Ir, matyt, kiekvienas tegus gali turėti nulį arba vieną arba dvi ar daugiau požymių, kiekvienas iš jų kurie daro kažką šiek tiek skiriasi. Dabar, kaip jūs žinote, kas egzistuoja? Jūs tiesiog klausytis, kad kažkas kaip man pasakyti, kas egzistuoja, arba tiesiog "Google" maždaug už pamoka html, ir ji tikrai tai paprasta. 

Iš tiesų, kai buvau undergrad prieš keletą metų ir išmoko HTML, vienas iš mano matematikos mokymo padėjėjai tiesiog praleido šiek tiek laiko konsultavimo mane už kaip pusę valandos, per valandą, ir tada man buvo mano būdas. Buvau ant mano kelią link labiausiai šlykštus svetainės ever, kuris, matyt, aš ne tikrai progresavo už jos ribų. Bet esmė yra ta, kad, kai jūs suprasti šiuos paprastus ideas-- jei paslaptingą text-- bet tai paprasta idėjos pradeda mintį ir uždaryti mintį, išlaikant viskas gražiai suderinta, ieško kažkas ne, iš dalies keičiančio elgesys tos žymės, tai tikrai visi yra į jį. Ir iš tiesų, jei mes dabar eiti kažkas panašaus google.com-- tikrųjų, eikime vietą šiek tiek daugiau reasonable-- stanford.edu. Ir aš ruošiuosi eiti į View, Kūrėjas, Žiūrėti šaltinį. Tai bjaurus, bet notice-- ir aš priartinti įspėjimo kai kurių dalykų, kad yra susipažinę jau. Yra tai čia, kuris yra naršyklė. Čia ateina HTML5. Yra HTML. Matyt, ten atributas, kad aš ne naudoti, kuriame nurodoma kalba puslapį ir tai gali padėti su automatiniu vertimo raštu ir stuff like that. Štai Puslapio vadovas. Štai Stanfordo puslapis pavadinimas. Yra žymė aš ne kalbėti apie yet-- Meta žymės. Tai tiesiog tarsi Papildoma informacija. Tai padeda su SEO, arba paieškos sistemos optimizavimas, arba Google Paieškos rezultatai ar pan. Bet jei mes nuolat ieško, laikyti ieško, čia Kūno žymės. Ir ten kekių kita žymės mes ne kalbėjo apie dar. Bet Div yra vienas dėl padalinys puslapyje. Tai tarsi nematomos stačiakampio jei kokios nori protiškai padalinti savo puslapį į skirtingi vienetai internete. Ir tada daug div us Aš pamatyti, kažką vadinama klasė, bet mes grįžti prie to. 

Tai interesting-- formas. Formos yra visame internete. Bet Paieškos laukelis esate kada naudojamas yra forma. Ir, taip, tegul realiai pamatyti. Forma. Veiksmas. Tokią formą veiksmų, dėl kokios nors istorinių priežasčių yra tai, kad URL. Metodas "Pradėti". Pasirodo, kad HTTP užklausas galite naudoti veiksmažodis "gauti", kaip matėme anksčiau, arba "po". Ir pamatysite skirtumą tai per akimirką. Leiskite realiai pamatyti, kas tai yra. Leiskite grįžti prie Stanfordo puslapyje. Kokia forma jie kalbėti apie, jūs manote? Kas šuoliai į tave? 

Auditorija: paieškos laukelyje. 

David J. Malan: Taip. Taigi iki viršuje dešinėje čia tai paieškos laukelį. Ir tai, kaip jie įgyvendinami it-- tegus tai tiesiog po atviru laikiklis forma. Ir tada tegul ieškoti kažko. Leiskite ieškoti bičiulių iš mine-- "Nick Parlante". Įveskite. Ir, žinoma, jis nuvyko į šiek tiek kitoks adresas. Leiskite grįžti čia. Leiskite ieškoti "kursus". Velnias. Nuėjo į kitą URL. Taigi, Stanfordo pridedant keletą magija kad jie nesiima mane į URL kad matėme veiksmų atributas ten. Bet ši forma čia yra įgyvendinamas visiškai būdu šio žymėjimo čia, šios žymės. Tiesą sakant, čia indėlis iš paieškos tipą, kurį norite. Čia yra indėlis kitas paieškos tipą. Čia yra pati eilutės įvesties. Ir todėl tikslas yra ne, į kuriuos vyniojami Mūsų protai visame visus šiuos žodžius bet tiesiog pamatyti. Tai tiesiog atidarymo ir uždarymo žymės ir ieško dalykai Up. Taip? Viktorija? 

Auditorija: [NESIGIRDI] David J. Malan: Tai geras klausimas. Štai šiek tiek sudėtingiau pamatyti. Leiskite grįžti į tą Klausimas tik kelias minutes kai mes žiūrime į vadinamąjį CSS, arba pakopinių stilių, ir mes galime pabandyti daryti išvadą, kiek iš puslapio. Taigi, jei mes dabar pažvelgti google.com, pažiūrėkime, ką jų puslapis atrodo. Galima būtų they're--, kad mielas ir šiandien. GERAI. Viskas padaryta. Visos teisės, todėl Žiūrėti kodą. Galima būtų galvoti "Google" turi tikrai gražus kodo. Taigi, matyt, kas čia vyksta? Ir iš tikrųjų, tai nėra net HTML. Tai yra kažkas, vadinamas "JavaScript". Ir tegul nesustoti ir eiti. Aš net nežinau, kur puslapis prasideda. Aš ruošiuosi naudoti Command F atvira laikiklis HTML. Gerai, ten yra. Radau puslapio pradžią, ir yra tiek daug dalykų čia. 

Ką iš tikrųjų vyksta? Na, žinote, ką, mes galime valyti tai padaryti. Jei aš vietoj eiti tai Apžiūrėkite įrankių juosta, šis specialus diagnostikos įrankis, ir eiti ne tinkle, kur mes nuolat vyksta ir šiandien, bet jei aš einu į Elements, kas tikrai gražus yra tai, kad naršyklė turi daug daug geriau akys nei aš. Ir naršyklė gali skaityti kad tinklalapio netvarka, kad HTML paštas mes tiesiog pažvelgė, ir ji gali parse tai ar skaityti ir analizuoti ir iš naujo suformatuoti gražus žmogaus patogiu būdu. Taigi, ką aš matau dabar Šiame ekrane čia pagal elementai, lygiai toks pats kiekis, bet jie įspaudžiami viską, jie jau nudažyta, bet tai lygiai toks pats tekstas kad aš atsisiuntė iš serverio. 

Ir kas malonu dabar matau organizme, dėl instance-- įspėjimo, puslapis dar sudaro tiesiog galva ir kūnas, ir aš galiu hierarchiškai neria čia. Atkreipkite dėmesį, kad "Google", atrodo, į divs-- šį vieną ir tai vienas. Galiu išplėsti, kad. Yra visa krūva kitų div us. Taigi tai šiek tiek sudėtinga. Bet palauk. Tai atrodo tiek daug skaitoma, palyginti, nei šis. Kodėl Google nepatogus Pati tiesiog siunčiant Tai didžiulė netvarka kodas kai Rūšiuoti tik įgyvendinti kažką kad atrodo taip paprasta iš pirmo žvilgsnio? Kaip, kodėl jie pridėti daugiau erdvės? Kodėl jie Enter kaip aš? Pažiūrėkite, kaip gera man buvo ne rašyti tinklalapį. Aš paspauskite Enter taip uoliai. Aš atitraukiama Taigi viskas yra toks gražus ir įskaitomas. Kodėl Google negali praktikuoti tą patį? 

Auditorija: [NESIGIRDI] David J. Malan: Geras. Labai teisinga. Jie neturi kai asmuo "Google" rankiniu būdu atnaujinti namų puslapiu nebėra. Tai ne 1999 nebėra. Taigi jie turi programinę įrangą. Jie turi kitas priemones, kad generuoti dinamiškai jie HTML. Žinoma, kad pati kodas buvo parašyta žmonėms, tačiau tikrovė yra tokia, tai visai teisinga sakyti, naršyklė tikrai nėra rūpintis, kaip nepatogus kodas yra. Tačiau yra dar labiau įtikinamų techninių priežasčių kad "Google" platina savo HTML kodas toks jausmingas, atrodytų, didžioji būdas visi supakuoti kartu su labai mažai way-- labai mažai į formatavimo, kaip aš taip. 

Auditorija: [NESIGIRDI] 

David J. Malan: greičiau? Kodėl? Ir ką jūs sakote, Lydia? Greičiau? Kodėl greičiau? Auditorija: [NESIGIRDI] David J. Malan: Yra nėra vietos skaityti. Taip. Taigi manau, apie tai, kas yra erdvė. Taigi kiekvienas simbolis ant klaviatūros trunka kai vietos suma atstovauti, fiziškai, kaip ji užima, kad daug vietos, ar kažkaip po dangtis, kuris reikalauja atmintį. Ir kaip aside-- ir mes daugiau kalbėti apie šį tomorrow-- kiekvienas personažas ant klaviatūros paprastai reikalauja 8 bitus, arba vieną baitą. Taigi 8 nuliai modelis ar tie, arba tiesiog 1 baitas, nes mes žmonės būtų paprastai pasakyti. Štai nedidelė, tačiau tai dar ne nulis. Tai dar šiek tiek erdvės suma. Taigi, jei inžinierius arba Google "hitai tarpo tik vieną kartą, ir manau, Google ", tai super-popular-- tarkime, kad milijardai žmonių apsilankyti jų namų puslapiu per dieną, arba kai žmonių skaičius aplankyti Titulinis puslapis milijardus kartų per dieną, kiek papildomų baitų turi, kad programinės įrangos inžinierius tiesiog kainuos Google pataikyti jo tarpo kartą? 

Auditorija: [NESIGIRDI] David J. Malan: Ne visai taip blogai. Tik vienas baitas kartus per milijardo. Taigi a-- Auditorija: 8 mlrd gigabaitų. David J. Malan: Ne 8 mlrd. 8 milijardas baitų. Bet 1 gigabaitas. 1 gigabaitas būtų matavimo vienetas. Jei jis ar ji tai daro du erdvės, 2 gigabaitų. Trys gigabaitai. Right? Tai svarstyklės palūkanas. Ir tokiais atvejais, kaip "Google", kuris suteikė, yra Ypatingais atvejais, yra ir kitų klausimų, kurie kyla tik darant labai pagrįstus sprendimus arba imtis labai paprastus žmogaus veiksmus, nes ji turi šį padidintos poveikį. Taip, kad vienas iš priežasčių, Tai atrodo taip suspaustas yra tiksliai taip, kaip Viktorija said-- tai buvo tik generuoja kompiuterių vistiek. Taigi ne big deal. Tegul naršyklė figure it out. Tačiau ji taip pat sąmoningai neturi daug vietos, nes erdvė nėra būtinas. Ir erdvė iš tikrųjų kainuoja. 

Tai tiek kainuoja laiką, nes tiesiog stumti kad daug daugiau duomenų iš Google.com būstinė tik gavo imtis tam tikrų sumą laikas, net jei tai milisekundžių ar mikrosekundžių, tačiau kad išauga iki per tiek daug vartotojų, arba daugiau tikėtina, kad tai tikriausiai kainuoja pinigus. "Google" turbūt prisijungia prie kažkas pasaulyje, vienas tų Įsižiūrėjimo taškai, ir jei jie turi kai finansinių santykių rūšies kuriuo jų duomenys kainuoja pinigus, jie gali taip pat sumažinti, kiek duomenų jie spjaudė ant jų interneto ryšys. 

Taigi juokingas dalykas, nors, galiausiai, arba gal džiuginantys dalykas, yra tai, kad nors tai atrodo siaubingai didele, bent dienos pabaigoje, tai dar tikslios patys principai kaip Tai labai paprasta puslapis čia apie HTML puslapis. Taigi tik apibendrinti, todėl, kad jūs turi kanoninį versiją, jei nebuvo Žemiau palei pasirinkimas čia čia gali būti paprastas tinklalapių, taip kažkas žaisti su galbūt vėliau. 

Na, tegul įvesti pora kitų idėjų dabar. Ketiname pristatyti kažkas vadinamas stiliaus tag. Mes galime Stilizuoti šį puslapį daugiau įdomių būdų. Taigi o HTML laišką yra visa informacija apie ženklinimo iki duomenys, tarsi nurodant iki A naršyklė kaip struktūrizuoti duomenis, kur įdėti, CSS, arba pakopinių stilių, yra antroji kalba, kad paprastai pasireiškia maišomos su HTML kaip mes see-- tačiau mes galime valyti kad sudaryta moment--, kad mano tai galutinis mylios, ir ji stylizes ją. Ji gauna spalvos teisingai, šrifto dydis teisingai, pozicionavimo teisingai. Tai viskas apie estetika ar formatuoti, o ne apie Pati pagrindinė duomenų. Ir paprasčiausias būdas parodyti tai gal pavyzdį. Taigi, aš ruošiuosi eiti per mano paprastą tekstinį failą. Ir tik akimirką, aš vaikščioti su mumis per procesą tai padaryti patys. 

Aš ruošiuosi eiti atgal į savo failą čia ir perkraukite puslapį tiesiog patvirtinti, kaip jis atrodo. Štai kur mes ne dabar. Jaučiu, kaip vaikai galėtų naudotis tam tikra spalva prie šio tinklalapio. Taigi, aš ruošiuosi eiti čia į puslapio galvos. Ir aš ruošiuosi daryti stilių, / stilių. Ir tada viduje, aš ruošiuosi pasakyti, kad mano page-- kūną ir tai formatavimas, ne Iš pirmo žvilgsnio, galbūt šiek tiek keista, bet tradicinis. Aš ruošiuosi pasakyti, kad fone spalva Šiame puslapyje turėtų būti žalias. Ir tai, deja, tarsi ne geriausias dizainas. Atkreipkite dėmesį, kad anksčiau atsižvelgiant į HTML pasaulyje, Aš pasakiau, kad atributai Ar šie pagrindiniai vertės poros. Kažkas yra lygus citata citatos pabaiga "kažkas". Atsižvelgiant į CSS pasaulyje, kuris buvo sukurta keletas skirtingų žmonių, jie nusprendė, kad jų pasaulio, raktų vertės poros būtų žodis dvitaškis kažką. Taigi, tai tą pačią idėją, nors. Jis prisijungia vertę su kai raktas, kuris kažkaip įtakoja šio puslapio elgesį. 

Ir jūs tikriausiai galite atspėti. Kas tai tikriausiai daryti, net jei jūs niekada matyti HTML arba CSS anksčiau? Auditorija: pakeisti fono spalvą. David J. Malan: Taip, pakeisti fono spalvą. Ir konkrečiai fono spalva kūno. Tačiau tiek, kiek kūnas dabar yra interneto page-- tai vienintelis dalykas žemiau pavadinimo juostos really-- tai tikriausiai bus paveikti tą patį. Taigi pažiūrėkime. Leiskite išsaugoti tai. Spauskite čia ir perkraukite puslapį. Tai gana šlykštus. Ir tai, kas vyksta čia yra šalutinis poveikis. Aš tiesiog pasirinkau šį paveikslėlį atsitiktine tvarka. Kodėl žalia ne permeating už Mickey? Auditorija: [NESIGIRDI] David J. Malan: Būtent. Pasirodo, kad vaizdai, gražus daug visas nuotraukas, kad mes galime naudoti, visi stačiakampiai rectangles--. Net jei Peliukas turi keletą kreivių su savimi ir turi pagrindą, kad fonas turi būti kažkas. Ji turi būti baltos spalvos. Ji turi būti juoda ar kažkas. Ji gali būti skaidrus. Ir iš tiesų, galėčiau atidaryti Mickey Mouse čia į programą "Photoshop" ar kažkas panašaus ir pakeisti visa tai balta fonas skaidrus, taip žalia būtų shine through. Bet tai ką man reikia paklausti apie save arba grafikė ar dizaineris mano kompanija, pavyzdžiui, daryti, ypač, nes aš tiesiog pasiskolino šį vieną iš interneto. Bet tai, kodėl tai vyksta. 

Taigi, ką dar gali norime daryti? Na, mes galbūt norėsite pasakyti, kad mes tikrai tikiuosi jums patiks Jūsų viešnagę. Ir dėmesio, aš noriu kad tai stiprus, ir taip pasakysiu atvira stipri ir uždaryti stipri ir tada perkraukite puslapį. Ir tai šiek tiek sunku matyti projektoriaus bet galbūt tikrai dabar šuoliai į jus šiek tiek daugiau. Taigi jūs galite pridėti kursyvu tai būdas, drąsus susiduria šiuo būdu. Mes galime keisti spalvas. Tiesą sakant, tik prasideda, aš ketina eiti į priekį ir tai padaryti. I do not really like kaip mano dalys yra tai arti vienas kito, todėl aš gali padaryti kažką panašaus į tai. Aš ruošiuosi pasakyti naršyklę, keisti kiekvieną tag dalį ir kurios turi, tegul say-- tikrųjų žinote, ką, tegul jį suderinti text-align, centrą. Ir vėl, aš žinau, tai tik nes kažkas išmokė jį man ar aš mačiau jį į internetinė nuoroda. Taigi leiskite man išsaugoti tai. Ir Ak, dabar aš orientuota vaizdą ten. Ir iš tikrųjų, jūs žinote, ką, jei Aš perkelti savo vaizdą į dalį tag-- todėl trečia pastraipa, nors tai ne tekstą. Leiskite išsaugoti, kad ir perkraukite puslapį. Dabar puslapis pradeda atrodyti natūra of-- Aš turiu galvoje, jis vis dar gana bjaurus, bet bent jau atrodo, kad aš praleido dvi minutes, o ne vieną minutę todėl. 

Ir taip, palaipsniui, mes galime padaryti šios estetinės pokyčiai Dabar į puslapio? Aš tikrai ne pakeisti duomenis į išskyrus pridedant žodį tikrai puslapis. Aš pridėjau metaduomenis, jei bus. Ei, naršyklė, padaryti Žodis "tikrai" drąsus. Bet duomenys nėra stiprus. Štai metaduomenys. Duomenys yra "tikrai". Taigi, mes vis dar turime kai tomis pačiomis sąvokomis, kaip ir anksčiau. Dabar, žinoma, tai yra ne internete, todėl aš ruošiuosi daryti vieną galutinį žingsnį čia. 

Aš ruošiuosi eiti į hello.html ir tiesiog išryškinti ir nukopijuoti tai. Ir dabar aš ruošiuosi eiti į Cloud9, kuris Aš jums per vos akimirką. Ir šansai yra jums netrukus bus, jei ne jau, ne ekrane, kaip tai. Ir leiskite man tiesiog suteikti jums greitai kelionė ką Cloud9 iš tikrųjų yra. Taigi vėl debesys 9 yra tai debesys pagrįsta paslauga kuri suteikia jums ir man iliuziją turėti savo virtualų mašina debesyje, techniškai konteineris, debesys, kad mes turime pilnas administratoriaus teises. Taigi teoriškai, niekas kitur pasaulyje turi prieiga prie ekrano aš žiūri dabar, išskyrus gal žmonių kurie paleisti svetainę, nes techniškai jie turi fizinės prieigos ir pan. 

Taigi, ką mes matome šioje aplinkoje? Aš ruošiuosi nutolinti, nes tai šiek tiek maži. Ir leiskite man priminti per čia tik akimirkai. Kairėje pusėje mano ir jūsų ekranas, yra failas naršyklė kairėje. Taigi panaši dvasia Mac OS ir Windows. Visa tai yra iš failai mano paskyroje. Ir pagal nutylėjimą, jei jūsų sąskaita yra kaip mano, pamatysite ar greitai pamatyti helloworld.html ir readme.md. Per čia iš dešinės pusės, tai yra kur mano tekstiniai failai ketinate eiti. Jeigu jūs kada nors naudoti "Microsoft Žodis "arba" Notepad ar TextEdit, tai žodis mano redagavimas failų ketina eiti. Ir tada labiausiai paslaptinga bruožas šioje aplinkoje kad mes ne tikrai reikia naudoti yra žemyn čia vadinamas terminalo langą. Jei naudojama DOS pasekėjai, tai Linux arba Linux ekvivalentas DOS. Tai tekstinis interface-- nėra pelės paspaudimų, nesitrina. Visi jūs galite padaryti, tai tipo komandas, bet tie komandas gali kurti failus, perkelti failus, atidarykite katalogų, artimi katalogų padaryti bet dalykų. Bet dabar, mes tiesiog praleisti savo laiką čia. 

Ir todėl galime tai padaryti. Jei esate šį aplinka, kuri jums reikia būti, jei sukūrė darbo vietą jau, eiti į priekį ir tiesiog eiti Failų, naujos akimirką. Ir kad duos jums nauja Skirtukas čia per vidurį. Ir aš just-- ir tegul eiti į priekį ir tai padaryti. Vykime į priekį ir dabar nereikia Failo, išskyrus ir eiti į priekį ir jį vadiname hello.html, neturi būti painiojama su helloworld.html, kuris atėjo su savo naują nemokamą sąskaitą kuris yra tik pavyzdys failą. Pamatysite jis staiga atsiranda, greičiausiai kairėje pusėje, ir skirtukas dar veiks. Ir leiskite man skatiname jus dabar atkurti Šis failas arba kai jų variantai. Ir jei jūs negalite gana pamatyti jį ant ekranas, tai yra tokie patys, kaip skaidres kad tikriausiai turite kitoje kortelėje. 

Taigi trumpai tariant, padaryti savo pirmąjį interneto puslapį, išsaugokite jį, o tada vos akimirką, Aš jums parodysiu, kaip jūs iš tikrųjų galite peržiūrėti tai. Bet pakeisti bent vieną dalyką. Pakeiskite HelloWorld į kažkas savo pasirinkimą, taip, kad jūs esate įsitikinęs, kad tai jūsų failą, o ne vienas aš ką tik sukūrėte. Gerai. Ir kai jūs ready-- nėra rush-- kai būsite pasiruošę, eiti į priekį ir išsaugokite failą Kai jūs atlikote šiuos pakeitimus. Ir jei jūs spustelėkite Paleiskite mygtuką iki viršaus, tai turėtų atidaryti naują skirtuką, kuris pasakys Jūs ką URL galite apsilankyti savo failą, bet tai gali užtrukti šiek tiek laiko citata citatos pabaiga "pradėti" Apache ", kuris yra žiniatinklio serverio pavadinimą. Taigi būkite atsargūs daryti būtent kas yra faile galiausiai. Taigi dabar, aš priartinti. Jei aš pradedu rašyti atviro laikiklis HTML pranešimas tai paskatino mane baigti savo mintis. Ir jei aš baigiau savo mintis, ją automatiškai suteikia man uždarymo tegus. Tačiau tikimasi, tada aš paspauskite Įveskite, ir tada pereiti viduje yra o galva viduje ir tada darau kūno viduje. Ir tai šiek tiek keista iš pradžių, nes ji daro darbą už jus, bet suprantu, kad galiausiai tai sutaupys jums klavišų. Ir iš tiesų, labai dažnas bruožas programavimo aplinkose šių dienų tiek interneto plėtrai, kaip tai ir tikrasis programavimas, kuri mes kalbame apie rytojaus, yra šie auto-pilnas funkcijų, dalykų, kad tik leidžianti programuotojas ar dizaineris tipo mažiau klavišų atlikti tą patį. Kartais tai gerai, nors. Kartais tai tiesiog erzina. Ir vėl, kai jūs transkripcija skaidrių arba kai jo variantas, galite spustelėti mygtuką Paleisti iki viršaus. Ir tada apačioje langas, jums bus informuoti kokia URL gali aplankyti jūsų tinklalapį. Mano, pavyzdžiui, yra ne business-daharvard.c9users.io ir taip toliau. Gerai, taip, tegul me-- klausimų? Bet kokie kiti klausimai apie tiesiog gauti ši darbo, kol mes pridėti funkcijų? Ir leiskite man pasiūlyti, tiesiog gauti žmonės comfortable-- nes tai vienas dalykas, tiesiog Nukopijuokite ir įklijuokite aklai, ką aš padariau. Bet tik todėl, kad žmonės ristis su bent viena to-do, Aš ruošiuosi įjungti šiek tiek muzikos. Aš ruošiuosi pasiūlyti sąrašą dalykų, kuriuos potencialiai gali pridėti. Ir, žinoma, galima naudoti "Google". Ir kodėl gi ne, mes tiesiog pasiūlyti, kad jūs bandote išspręsti bent vieną konkrečią problemą čia. Taigi, kalbant apie žymeles, leiskite man panaudoti tai čia. 

Tiesą sakant, leiskite man įdėti tai į tekstine forma. Tarkime, kad tarp žymenų, mes galime naudoti, čia yra keletas žodžius čia. Mes matėme žymę dalis. Dabar jis ketina Auto-pilnas. žyma dalis, inkaro žymė. Tarkime, jūs norite padaryti kažką daugiau, todėl jūs galite like-- tarpatramis žymė gali padėti. Na, galbūt reikia šiek tiek padėti už tai vos akimirką. Mes matėme div. Pamatysite ten stalo. Yra kažkas vadinamas TR, TD. Kt, TD. Grįžti į tą iškart. Ką dar gali būti naudinga? Yra stiprus. Yra dėmesys, ar veikiau Em. There's-- ką dar gali praeivius čia? Na, mes priimsime pažvelgti, kad kartu. Forma, kurią mes matėme. Yra forma. Yra įėjimas ir keletas kitų. Gerai, tad tai padaryti. Norėdami atsiliepti į Viktorijos klausimas, leiskite man pirmas tiesiog įsitikinkite, kad kiekvienas galėtų gauti savo sveikinasi darbo. Tada leiskite man pristatyti pora kitų idėjų. Tada mes galime žmonės išspręsti kai problema dėl jų pačių. Tada mes iš tikrųjų sugrįšiu su ta forma sąvoką, ir mes iš tikrųjų naujo įgyvendinti kartu priekinė sąsaja, taip sakant, pačiai "Google". Mes naudosime "Google" kaip nugaros pabaigoje ir tegul jiems daryti sunkų darbą, paieška, bet mes atkurti priekio "Google" ir paieškos formą kad jie turi savo pagrindinį puslapį. Ir todėl mes grįžti į Šios žymės vos per akimirką. 

Taigi, tai buvo tai, ką aš Siūloma vos prieš akimirką. Mes galime pridėti stilizacija iki A puslapis viduje šio stiliaus tag ir mes galime Stilizuoti foną spalva, tekstas derinimą, ar tai centras arba į kairę arba į dešinę. Bet labai greitai būtų rasti arba interneto dizaineris būtų rasti, kad tai tampa šiek tiek griozdiškas, nes jūs darote tai, kas vadinamas maišymo turinys Pristatymas jų. Jūs maišyti savo duomenis ir jo estetika. Ir iš tiesų, jei manote, kad kas nutiks per LAIKĄ_ tai yra labai mažas Interneto puslapis, žinoma. Bet jei aš papildykite ją į šį puslapį ir aš pridėti stilių į šį puslapį, puslapis labai greitai gauna ilgiau ir ilgiau ir ilgiau. Ir manau, kad aš noriu turėti antrą puslapį, kuris dalijasi kai kurie iš šių požymių. Tarkime, mano antrasis tinklalapį Mano site-- pat, noriu viską centrą ir aš taip pat noriu viską su žaliame fone. Aš gana daug teks nukopijuoti ir įklijuoti kai šių eilučių į tą antrą failą, kuris jaučiasi gerai. Ji bus išspręsti šią problemą. 

Bet kas, jei aš noriu trečią puslapį arba 30. puslapis arba 40. puslapis? Dabar aš ruošiuosi būti kopijavimo ir įklijuoti daug pasikartojantis kodas aikštelė į kelis failus. Ir taip manyti, kad Aš nuspręsti ar aš sakė, ei, mes ne naudojant žaliame fone nebėra. Mes ketiname pradėti naudoti oranžinės spalvos. Ką jūs turite pakeisti? Na, jūs turite pakeisti tą stilių iš žalios į oranžinę, kaip daugelyje vietų? Kaip 30 arba 40 vietų. Tai varginantis. Tai linkę klysti. Yra keletas priežasčių, kur nenorėtų sukelti kad skausmo sau natūra. Ir taip nebūtų tai būtų gražus jei galėtume imtis, ką aš ką tik įdėti tarp šių dviejų geltona žymės, šios stiliaus žymės, veiksnys jį, ir įdėti visą savo stilizacija į vieną centrinę failą kad visi 30 ar 40 mano kiti failai skolintis iš ar kažkaip nuoroda ne kitaip, tinklų diagramas mes darome anksčiau? 

Taigi, jei aš einu čia, aš vyksta iš tikrųjų pasiūlys kad mes pakeisti stilius tegus su kažkuo vadinama nuoroda žymeles, kurios yra siaubingai, siaubingai pavadintas, nes jūs neturite naudoti nurodo žymė sukurti ką mes, žmonės žino, kaip tinklalapio nuorodą. Norėdami, kad jūs naudojate, kurie žymė? Kaip jums sukurti į tinklalapį nuorodą? Auditorija: a. David J. Malan: A, arba inkaras žymeles, kad nuvyko į Disney anksčiau. Nuorodą žymelę čia sako this-- nuorodą į failą pavadinimu styles.css, santykiai, į kurią bus, kad tai mano stilių. Todėl tai yra vienas iš S-aisiais CSS-- pakopinių stilių. Stilius sheet-- dvi S-aisiais CSS. CSS. Tai tiesiog reiškia, ei, naršyklė, eikite rasite styles.css vietinio serverio ir naudoti jį kaip savo stilių, o tai reiškia, viduje šio failo bus visi iš stylizations, kad mes ką tik padaryti. Ir taip, kas tai failas gali atrodyti tai. Ir aš tiesiog padaryti tai greitai pavyzdys, nes mums nereikia gauti per daug į piktžolių čia. Bet jei aš nukopijuoti tai, ką aš pasiūlyti yra tai, kad programuotojas sukurti naują failą, įklijuokite tose lines-- whoops-- įklijuokite tose linijose, išsaugoti ją kaip styles.css, o tada kitas failas, ištrinti visa tai ir jį pakeisti vietoj su šiuo nuorodą žyma. Taigi, kad jei aš susieti href = "styles.css" santykiai turi būti "Stilių" Uždaryti žymė. Išsaugok tai. Grįžti atgal į mano HelloWorld. Perkrauti. 

Pažodžiui nieko neįvyko. Tai yra geras dalykas, nes tai tai reiškia, kad iš tikrųjų visi dirba. Norėdami įrodyti, kiek, tarkime, aš padaryti klaidos, o aš vadinu tai "styles.css" didžiosios S, kuri yra neteisingas, tada perkraukite puslapį. Dabar galite matyti tiesiog neveikia. Dabar, kodėl? Na, tegul naudoti technika iš anksčiau. Leiskite man eiti į priekį ir, mano naršyklė, "Chrome", aš ketina atverti, kad ypatingas Tinklo skirtukas, kaip ir anksčiau, ir leiskite man perkraukite puslapį. Ką tu ne nustebino pamatyti dabar? O gal esate nustebęs, kad jį pamatyti. Bet kuriuo atveju, tai, ką matote dabar? Auditorija: [NESIGIRDI] David J. Malan: Tai nerastas. Kodėl jis negali rasti? Na, Styles.css-- sostinė S-- neegzistuoja. Aš misnamed ją. Paprasta klaidos. Bet aš gaunu suprantama dabar 404, nes serveris sako, ei, tai nerasta. Drąsiai, aš nežinau jei tas failas yra. Taigi, kaip rezultatas, naršyklėje rodo, ką ji gali, žalias puslapio turinį, kuris buvo 200, HTML, bet stilizacija negali būti po pridėta. Ir tai yra tai, kas reiškia domino. Jūs galite pridėti tarsi ją po, ir ji tarsi valo iš tinklalapio estetika. Ir jūs netgi galite nepaisyti tų stilių su dar kitais stylesheet failus Jeigu nori. Jis nerado, nors, šiuo atveju, nes žinoma, aš misnamed jį. Taigi aš turiu pataisyti, kad pirmas. 

Taigi eikime į priekį ir pasiūlyti šias. Vykime į priekį ir tai padaryti. Nuo ko gero Jūsų HelloWorld failą, leiskite man tiesiog pasikviesti pora vaidybinių pasiūlymus. Taigi, Viktorija, tu norėjai padaryti kai tekstas didesnis, tiesa? Gerai, kad mes galėtume padarysiu tekstas didesnis. Ir mes kiekvienas roviau tik viena problema išspręsti. Padaryti tekstas didesnis. Nesiruošiu gaišti rašyti tai, kai mes turi kulka technologiją teisę čia. Taigi kai kurios problemos. Taigi, mes ketiname pabandyti kad tekstas didesnis. Gerai. Ką dar būtų kažkas pasiūlo? Ką dar gali norime daryti tinklalapį? Leiskite sugalvoti trumpas sąrašas dalykų ir tada deleguoti grupė suprasti tai. 

Auditorija: [NESIGIRDI] 

David J. Malan: Gerai, pozicijos tekste dėl skirtingose ​​pusėse puslapyje? Gerai. Kažkas kito. 

Auditorija: [NESIGIRDI] David J. Malan: Tai. Taigi GIF yra tik skiriasi failo formatas. Mes tik naudojamas, koks A PNG arba JPG tikriausiai? Mes naudojome JPG. Jei įdomu, yra susidaręs perviršinis atsakyti į jūsų klausimą yra jpg paprastai naudojamas fotografijos, nes jis palaiko milijonai spalvų arba 24 bitų spalvos. GIF yra visuotinai naudojamas, kaip, interneto Memes šie days-- animacija, kaip animaciniai Gif. Bet tai atsitinka naudoti mažesnį spalvos paletė, tik 256 galimų spalvų, bet ji palaiko skaidrumas ir animacija. Ir tada ten PNG, kuris palaiko skaidrumas ir daugiau spalvų bet ne animacija. Taigi, tai kompromisas. Taigi pridedant gif, nors, būtų funkciškai lygiavertis pridedant PNG arba JPG. Taip. Image Source lygus. Taigi kažkas. Leiskite sugalvoti kažką, kad mes išsiuntėme Victoria padaryti čia. 

Auditorija: Pridėti mygtukus forma. David J. Malan: Gerai. Taigi pridėti mygtukus forma. Ir mes padarysime, kad vienas kartu. Taigi, kad bus puikus Segue iš karto po šio iššūkio. Dar kas nors? Kas gali jums patinka daryti? Interneto jaučiasi labai underwhelming jei tai yra viskas, ką mes galime padaryti. Auditorija: Keisti teksto spalvą. David J. Malan: Pakeiskite ką? Auditorija: Spalva tekste. David J. Malan: Pakeisti spalva teksto. Gerai. Taigi, galime tai padaryti. Tiesiog vėl taip, kad nesate, tiesiog atmintinai, daro būtent tai, ką aš darau, Aš ruošiuosi įjungti muziką Maybe penkių minučių čia. Jūs esate kviečiame pasinaudoti "Google". Jūs esate laukiami paklausti manęs ir Aš šnabždesys užuominą į ausies. Jūs esate laukiami ieškoti per kitų pečių. Bet išspręsti tik vienas iš šių problemų. Bet mes padarysime paskutinį vieną, kad sudaro vieną, jei galėtume kartu. Taigi penkias minutes išspręsti bet kurį vieną iš šių problemų naudojant "Google", intuicija, ar kiti turimi jums priemonėmis. 

[GROJA MUZIKA] Gerai. Nesijaudinkite, jei norite išlaikyti skardinimo, bet aš sugadinti pora iš šių atsakymų. Taigi pirmas pasiūlymas iš Viktorija buvo padaryti tekstas didesnis. Taigi ten yra keletas būdų, kaip tai padaryti. Aš šiuo metu atkurtos mano ekranas tokio dydžio, nors aš Mastelis dirbtinai tik pamatyti dalykus. Ir tegul tai padaryti. Leiskite man eiti į priekį ir patraukti kai bendrinis Lotynų tekstas tik todėl mes turime kažką dirbti. Taigi man tik vieną akimirką. Aš tris pastraipas. GERAI. Tai bus geriau pavyzdys. Taigi įdomu, kad mano hello.html, aš tiesiog įterptas trijų absurdiškas Lotynų dalys tik todėl mes turime kokį nors tekstą dirbti. Ir Victoria tikslas buvo padaryti kai teksto daugiau. Taigi galėčiau, kaip ir anksčiau, eikite čia. Ir leiskite man tai padaryti teisingą kelią. Aš ruošiuosi nuorodą žyma, kad atkreipia į failą vadinamas "styles.css," santykiai iš kurių yra vėl "Stilių." Ir tada aš ruošiuosi išskyrus tai, kad ir atverti šią "styles.css". 

Taigi, kaip ir anksčiau, Turiu gebėjimas šiame CSS failą kad iš tikrųjų pakeis numatytąjį estetika tinklalapį, ir numatytasis estetika, Žinoma, yra gana nuobodu. Tai tarsi įprastinį šrifto dydį, juoda tekstas, baltas fonas, ir tt. Taigi tarkime, aš noriu padaryti visą šį tekstą didesni. Galėčiau padaryti keletą dalykų. Mano styles.css failą, aš Galima sakyti, jūs žinote, ką, taikomos taip, kad mano puslapyje kūnas. Eiti į priekį ir padaryti šrifto dydis 24 taškų, kuris yra numeris galiu naudoti Microsoft Word. Leiskite man eiti atgal į savo interneto puslapis čia ir perkraukite, ir jūs galite pamatyti, kad tai jau daug didesnis. Ir mes galime gauti šiek tiek kvailai, kaip mes galime ant desktop-- kad ji 96 taškų. Perkrauti. Ir tai truputį griozdiškas šiuo metu. 

Bet aš galėtų būti šiek tiek tikslesnis. Vietoj šio Stilių į mano puslapį kūno, ką dar galėčiau jį taikyti, o ne, kas kita žyma, kad vis dar gali funkcija tokiu pačiu būdu? 

Auditorija: p žymė? David J. Malan: P žymė. Todėl galvos nebūtų teisinga, nes galvos, jūs negalite iš tikrųjų kontroliuoti estetika. Yra arba tekstas nėra, ar ne. Tačiau p tag-- galiu pasinerti šiek tiek giliau, taip sakant, į dalį žymės. Ir nors yra trys, tai visiškai gerai, nes CSS, kai aš tiesiog pasakyti "p", tai reiškia taikyti taip bet žyma, kad rungtynių šį selektorių, selektorius tik būdama žyma, pavadinimas. Taigi, kur matote "P" taikyti šrifto dydį, ir tegul ji taptų protinga again-- 24 punkto. Ir žinote ką, tiesiog gera priemonė, padarykime spalvą raudonas tik šiuo metu. Ir dabar, jei aš įkelti, dabar mes pamatyti tris negraži pastraipas. 

Bet dabar manau, kad aš tarsi of-- Noriu pirmąją pastraipą iššokti ne vartotojui. Aš nenoriu tiesiog padidinti šrifto dydis viskas. Ir taip aš iš tikrųjų noriu nustatyti ar išskirti šias dalis. Taigi leiskite atsikratyti raudonas, nes tai tiesiog rūšies lipnus, ir eikime į priekį ir padaryti šrifto dydis 12 taškų pagal nutylėjimą, taip, kad mes grįžome į kažką šiek tiek labiau pagrįsta. O dabar aš tiesiog norite padidinti šrifto dydis pirmojoje pastraipoje. Aš galiu tai padaryti keletą būdais, tačiau vienas iš būdų tai bene mokomoji ne momentas yra padaryti taip. Leiskite man eiti į priekį ir sakyti, kad tai dalis turi unikalų ID "pirmas". Galėčiau tai vadina ką noriu. Galėčiau tai vadina "foo" ar bet koks kitas žodis, bet aš ruošiuosi duoti jam šiek tiek semantiškai prasmingas vardas kaip "pirmas". Tai yra unikalus identifikatorius, ID, mano pirmoje pastraipoje. 

Ką aš dabar galiu padaryti mano stilių yra šiek tiek tikslesnis. Vietoj sakydamas, taikyti taip prie p žyma, Galiu pasakyti following-- Taikomi šie, arba pasirinkite, HTML elementas kad turi unikalų ID "pirmas." Ką aš noriu kreiptis į jį? Šrifto dydžio 24 taškų. Taigi turiu du selektoriai dabar. Vienas užtikrina, kad visos iš punktai 12 tašką. Bet tai viena, ypač, nes jis ateina second-- kalbama paskutinė file-- tai turi kaskadinį efektą. Aš ką tik padarė visi mano žymės 12 dalis taškų, bet tai dabar kaskadomis ir viršesnis kad bet elementais į puslapį, bet į puslapį, kurio žymė unikalus ID citata citatos pabaiga "pirmas". Ir šiame kontekste grotelėmis tiesiog reiškia "unikalų identifikatorių." Nemanau, įdėti jį į HTML failą. Aš per čia, tik pasakyti, citata citatos pabaiga "pirmas". 

Taigi leiskite man perkraukite puslapį. Ir dabar matau, ah, gerai. Aš turiu galvoje, tai nereiškia, kad gana, bet tai tipo apie tarsi įžanga A knyga ar kažkas panašaus, kur pirmoji dalis yra didesnė. Gali būti dar tikslesni su tik pirmosios raidės, bet ne mažiau kaip Aš naudojamasi daugiau kontrolės. Dabar maybe-- gal norite tai padaryti kartais dėl kokios nors priežasties, ir taip aš nenoriu, kad tai taikomas tik vienoje HTML žymės. Atvirkščiai, tegul say-- tegul Taip pat atlikite šiuos veiksmus. Class = "importas". Kadangi ID naudojamas vienareikšmiškai nustatyti vieną dalyką, vieną žymę, Jūsų tinklalapį, klasė yra skirtas būti naudojamas bet elementų ar žymes skaičius Jūsų interneto puslapyje. Taigi, tai daugkartinio naudojimo. Tapatybės negali būti pakartotinai panaudotas. Klasė yra daugkartinio naudojimo. 

Ir žinote ką, už ką filosofinė reasons-- Aš ne baigti savo thought-- aš ruošiuosi pasakyti kad pirmoji dalis ir Antroji dalis yra svarbi. Taigi, aš ruošiuosi taikyti klasė vadinama "Svarbu", kad, jei galiu išsaugoti savo failą ir perkraukite, neturi funkcinis poveikis dar. Bet Aš pridėjo kai metaduomenų failo, tarsi kažkas atskiro nuo pagrindinių duomenų failą, taip, kad dabar mano stilių, jei aš o pasakyti ".important" - žinote, nieko, kad svarbu, aš ketina padaryti šrifto spalvą, red-- ar veikiau ne font-spalvos, tik spalva. Yra neatitikimų CSS deja. Ir perkraukite puslapį. Dabar pastebėsite pirmas dvi pastraipos yra raudona bet nėra trečioji, nes I tik taikė klasė "svarbus" į pirmąjį dvi iš šių dalykų. 

Taigi ID, jūs turite galimybę labai tiksliai nurodyti. Su klasių, turite pakartotinai naudoti. Tačiau abiem atvejais, pastebėsite, tarsi geras projektavimo principo kur aš atsižvelgti visus iš estetika mano styles.css failą. Taigi nėra Bałaganienie čia. Nėra raudonos paminėjimas arba drąsus-apdailos arba šrifto dydį šiame faile. O aš turiu semantiškai, prasmingai apibūdina savo duomenis, čia yra keletas svarbių duomenų. Čia yra keletas svarbesnių duomenų. Be to, čia yra "Pirmas" mano svarbių duomenų. Taigi HTML yra visa informacija apie tarsi žymėjimo, pažodžiui, žodžiai ir punktai ir konstruoja savo puslapis su šių mažai patarimų, jei jūs valia, kad jūs galite kažkaip atsvaros naudojant kiti metodai, pavyzdžiui, CSS tokiu būdu. 

Taigi atsakydamas į Victoria klausimą, mes galime padaryti tekstas didesnis tokiu būdu. Yra tiek daug kitų būdų, tačiau šrifto tag-- atvira laikiklis "font", - iš tikrųjų yra keletas metų. Ir tai yra problema, taip pat su pasikliaujant tik "Internetiniai resources-- jie linkę būti pasenusi. Ir iš tiesų, kad buvo pasenusios, nes pasaulis suprato, ką reiškia "font-size = 7" reiškia? Tai nėra. Ir taip daugelį metų ir į tai day-- vienas iš šono čia pažymi, yra tai, kad jis yra iš tikrųjų neįtikėtinai skausminga dar kartais sukurti plotus paversti interneto, nes "Microsoft" ir "Google" ir "Mozilla ir kiti dažnai nesutaria, kaip interpretuoti kaip HTML specifikacijos. 

Yra HTML vidaus tvarkos taisyklės, kad paprastai sako, ką kiekvienas žymuo reiškia. Bet kartais ji palikta įgyvendinimo veiksmų laisvė, "Microsoft" laisvė "ir" Google. Ir todėl jūs labai dažnai pamatyti svetainėje kažką atrodo kitaip ant PC nei ji ant Mac, ir tai tikrai, nes Dienos pabaigoje, jie nebuvo išbandyti jį gerai ant abiejų platformų. Bet tai taip pat, nes pagrįsta, protingų žmonių bus nesutinku ir bendrovės nesutinka, ir taip vienas iš programavimo uždavinių už interneto ar projektavimo dalykų internete rašo savo interneto svetainėje taip kad veikia kiekvieną naršyklėje. Bet net ir tai neprotinga, tiesa? Yra tiek daug versijų tiek daug naršyklių ten, kad tam tikru momentu, jūs taip pat turite priimti sprendimą skambutį ir jūs turite nuspręsti, kaip įmonė, ypač elektroninės komercijos stiliaus vietų, kur jūs bando naudoti naujausias ir geriausias technologijos suteikia tikrai gera vartotoją patirtis. Bet kai kurie iš jūsų vartotojų procentas galėtų vis dar naudojate Internet Explorer 6 ar 7 arba 8, ypač priklausomai nuo Šalis, kad jie iš. 

Ir taip labai dažnai aptarti yra kažkas kaip "interneto naršyklės statistika." Ir jei mes einame to-- pažiūrėkime Vikipedija ir pamatyti, kaip up-to-data Ši diagrama yra jei yra vienas. Taigi čia matote kur naršyklių tikrųjų yra pagal 2015 m gruodžio pagal JAV vyriausybės. "Chrome" yra 42% rinkos dalį, po IE daugiausia įmonių nustatymus arba kompiuteryje nustatyti parametrai, žinoma, Po "Firefox", tada Safari ", tada" Opera nebuvo padaryti žemėlapį čia dėl kažkokių priežasčių, ir tada kt. Gal tai pagal kitus. Bet daugiau problemų nei is-- pažiūrėkime, jei Vikipedija taip pat turi versijos naršyklių version-- 

Vykime į naršyklės statistika. T.Y. Net tai nėra pakankamai. Naršyklė statistika. Mano versija. Kad nesiruošia būti teisūs. Pažiūrėkime versijas. Naršyklės užimama rinkos dalis. Leiskite pamatyti, jei tai ateina. GERAI. Dabar tai vis šiek tiek daugiau naudinga. Taigi čia, pastebėsite, kad mes visi skirtingų versijų naršykles. Ir, mano Dieve, jei look-- Chrome 48, "Chrome 47", "Chrome 31", "Chrome 45. Aš turiu galvoje, Naršyklės vis atnaujinami, o kartais kai kurie iš šių pakeitimų yra reikšmingas funkcionalumo. Ir taip tam tikru punktu, produkto vadybininkai ar inžinieriai reikia padaryti decision-- jums žinote, ką, tik 1% pasaulio vis dar naudoja IE 7. Į pragarą su jais. Mes tiesiog nesiruošia remti, kad naršyklė. Ir ką tai reiškia neremti? Tai gali reikšti, kad mygtukai neveikia savo tinklalapį, ar tai gali reikšti, kad formatavimas yra visiškai išjungti. Arba jums gali tekti padaryti Tame pačiame sprendime skambutis mobiliųjų šių dienų, kai, mes nesiruošia remti iOS 5 daugiau. Taigi žmonės tiesiog turi atnaujinti. Arba mes neketiname remti Cupcake Android OS Android prietaisus, nes kaip world-- kaip technologijų pasaulis nori judėti į priekį, Jis rūšies nori vilkite pasaulio su juo taip, kad jie neturi ir toliau turi būti suderinami, todėl jie gali pasiūlyti naujų ir gerų savybių. Tai yra iš tikrųjų viena iš priežasčių, kodėl tiek daug įmonių, diegiame automatiniai atnaujinimai ir tarsi verčia Naujos programinės įrangos versijos nuo mūsų. Ir net įmonės kaip Apple rūšiuoti priversti jus beveik arba priversti jums kalbant apie rinkos jėgų pirkti naują telefoną, nes jie tiesiog nebus atnaujinti savo seną telefoną nebėra. Taigi jūs praleisti ant Naujausias ir geriausias savybes, nes tai brangu juos kaip Įmonės išlaikyti vyresnio amžiaus, be abejo, prastesnės programinės įrangos versijos. Bet grynasis poveikis yra tai, kad mes taip pat kenčia tai taip pat. 

Taigi leiskite pažvelgti tik iš galutinių dalykų pora čia. Leiskite atkalti labai greitai kai tos kitos kulkos, jei įdomu. Taigi, jei bandėte, Pavyzdžiui, padėtį tekstas dėl skirtingų pusių iš puslapis, aš ruošiuosi daryti vieną greitas būdas, bet ten kitokia būdų tai daryti. Leiskite man eiti į priekį ir eliminate-- supaprastinti tai taip. Leiskite grįžti prie mano paprasti, paprasti punktai. Leiskite man eiti atgal į savo styles.css. Ir aš tik ketina naudoti simple-- kurį galėjo matyti "Google" arba Atšaukti iš earlier-- text-align teisus. Ir iš naujo įkelkite šį puslapį. Dabar viskas atrodo būti dešiniuoju pelės suderinti, kaip jūs galite pamatyti Viršuje čia. 

Mes galime padaryti, tai atrodo šiek tiek daugiau užsakyti panašų, ir mes galime pasakyti "justify" ir perkraukite puslapį. Dabar tai gražus ir kvadratas tiek pusių, kurios rūšies gražus. Kitas tikslas, kad mes čia buvo buvo pakeisti spalvą teksto. Taigi mes matėme, kad su mano raudoną tekstą. Ir dabar pridėti mygtukus forma. Taigi, kodėl ne mes stengiamės daryti būtent tai? Bet pirmiausia leiskite man eiti į svetainę, kuri dauguma mūsų naudoti kiekvieną day-- "Google". Ir tegul pažvelgti kaip "Google" iš tiesų veikia. Bet aš ruošiuosi tai padaryti. Pirmiausia leiskite man tai padaryti in-- Yep, leiskite man eiti į Google. Aš ruošiuosi eiti į "Google" nustatymai, nes aš noriu išjungti kažką vadinama greitų rezultatų. 

Taigi jums gali pastebėjau, "Google" tai days-- leiskite grįžti ir tai įjungtumėte. Taigi, jei aš pradedu ieškoti už "kačių", kaip šis, pastebėti, kad ne tik padaryti Man auto užbaigti iki viršuje, visi staiga, pati puslapis Atrodo pakeisti gana greitai, taip pat, ir kad "Google" naudoja kalbą vadinamas "JavaScript" bando būti naudinga. Bet deja, jis rūšies iš sujaukia mūsų diskusiją apie tai, kas iš tikrųjų vyksta po gaubtu čia. Taigi, aš esu tiesiog rūšies greitai išjungti greitų rezultatų. Ir aš ruošiuosi spustelėkite Įrašyti. Ir dabar aš ruošiuosi atidaryti kad diagnostikos įrankių juostoje, kad aš išlaikyti atidarymo pagal tinklo kortelę. Taigi leiskite tai padaryti. Tegul me-- whoops-- pereikite tai žemyn truputį. Ir leiskite man ieškoti "kačių". 

Ir dabar notice-- tikrųjų, tai yra gera proga aptarti akimirką. Atkreipkite dėmesį, kad šiuo metu aš type-- jį sustabdyti. Liaukis. GERAI. Atkreipkite dėmesį, kad šiuo metu aš įveskite raidę C, žiūrėti ekrano apačioje. A-T S. Ką dugną Šio ekrano, mano tinklas ", rodo, kas vyksta kiekvieno kartą įveskite laišką? Deja, varlė yra labai blaško šiandien arba Shamrock ar kas jis yra. Kas vyksta kiekvieną kartą aš įvedėte? Ir leiskite man išvalykite buferio ir įveskite jį dar kartą. So-- oi. Kiekvieną kartą, kai aš įveskite raidę, C-A- T-- taigi nauja eilutė akivaizdžiai palaiko rodomas. Ką kiekvienas iš šių eilučių atstovauti, remiantis tai, ką mes matėme ir aptarė iki šiol? Auditorija: Paieškos? David J. Malan: paiešką, arba daugiau bendrine, HTTP užklausą nuo savo naršyklėje prie serverio. Na, kodėl mano naršyklė priėmimo HTTP prašyti kiekvieną kartą aš tipo laišką? 

Auditorija: [NESIGIRDI] David J. Malan: Taip, tai suteikia man šie auto-pilnas rezultatai. Kaip, kur padaryti tai Paieškos rezultatai atsirado? Na, kiekvieną kartą aš įveskite laiškas Google siunčia daugiau ir daugiau ir daugiau žodis aš rašyti. Kodėl? Nes jie nori duoti man geriau ir geriau, geriau pasiūlymas, pasiūlymų sąrašo, už tai, ką žodis Bandau realiai baigtas. Taigi tai pasakyti tiesiog kiekvieną charakteris įvesite į Google yra siunčiamas, galiausiai birių, bet taip pat kartais vienas metu, siekiant įgyvendinti šie auto-pilnas savybes, kai duomenys yra, žinoma, internete. 

Dabar galime pažvelgti, kas iš tikrųjų atrodo atsitinka, kai aš spustelėkite "Google" paieška. Ir tada mes sverto tai save. Taigi, jei aš slinkite žemyn dabar labai pirmasis prašymas, kad tik atsitiko. Atkreipkite dėmesį į šiuos. Jis buvo išsiųstas į gana ilgą URL-- https://www.google.com/search? ir tada visa krūva daiktų. Pažiūrėkime, tai iš tiesų dabar pačiame naršyklės skirtuko. Leiskite atsikratyti juostoje čia. Štai paieškos rezultatų puslapis. Ir pranešimas čia URL. Dabar jūs tikriausiai galite atspėti kas čia vyksta iš dalies. Taigi, visų pirma, apibrėžimas. Tai, matyt, yra vieta kur forma pateikta. Taigi, kai aš įvedėte žodžiai "Katės" ir paspauskite "Enter", matyt "Google" nusiuntė mano teksto įvedimas į šį URL kad aš pabrėžė ten, velniop paiešką. Pasirodo, į URL, nieko, kad atsitinka po klaustukas, kaip mes nuolat sako, pagrindinis vertė pora kuris buvo įvestas į formą ar kažkaip perduodami iš naršyklė į serverį. 

Taigi bet kuriuo metu rašote įvedimo į formą dėl interneto ir tai siunčiami kaip mes buvo aptarti per GET, vienas iš šių virtualus vokai, turinys to envelope-- Taip, nuolat gauti įdaryti fiziškai į klasę voką šiandien, bet technologiškai tai tikrai įdėti į URL. Taigi iš tiesų, leiskite atsijoti per tai. Kur tu matai vartotojo įvestį? Kur tu matai kažką kad aš įvedėte čia? Taip, todėl "katės". Right? Taigi leiskite man distiliuoti tai į kažką paprastesnio. Aš ruošiuosi ištrinti viską apie Tai URL, aš nesuprantu, ir aš tik ketina palikti tai kaip this-- / search? q = katės. Pamatysime kur q ateina iš per akimirką, bet jaučiasi minimumo informacijos kiekis, kad aš jei. Ir dabar aš ruošiuosi paspauskite Enter. Ir pastebėsite ji vis dar veikia. Mes vis dar grįžti visa krūva kačių. Taigi "Google" yra mėgėjas nei tai šių dienų. Tai 2016, o ne 1999. Taigi ten kitų dalykų, kad mano naršyklė siunčia į serverį. Bet tai minimaliai visi tai būtina. 

Taigi kas vyksta? Na, visų pirma leiskite man eiti į priekį ir eiti Atgal į Cloud9 ir leiskite man eiti į priekį ir uždaryti savo skirtukus anksčiau. Ir aš tai padaryti ant mano savo tik akimirkai. Aš ruošiuosi eiti į priekį ir sukurti naują failą. Ir aš ruošiuosi išsaugokite jį kaip google.html. Ir aš ruošiuosi labai quickly-- Aš ruošiuosi pavogti, iš tikrųjų, kai šio teksto tik sutaupyti laiką. Aš ruošiuosi įklijuokite šį kodą čia. Aš nesiruošiu vargintis su bet stilizacija šį kartą. Mes ketiname tai vadina "mano" Google ". Ir aš ruošiuosi atsikratyti visko organizme. Ir aš ruošiuosi daryti toliau. Leiskite priartinti. Forma action-- ir kaip aš trumpai paminėti earlier-- whoops-- kaip aš trumpai minėta anksčiau, Action forma yra, kai jūs siunčiate duomenis. Taigi google.com/search. Ir metodas Noriu naudoti gali būti vienas iš dviejų dalykų. Tai gali būti arba "gauti", kaip mes saugome diskutuoti, ar ji gali būti "po". Nes dabar, pagrindinė Skirtumas yra, jei jūs naudojate "gauti" visi Informacija, kurią vartotojas pateikia išsiunčiamas į URL. 

Tai puikus dalykų, pavyzdžiui, paieškoje varikliai ir keletas kitų programų, bet kokiomis aplinkybėmis Jūs nenorite užpildyti formą ir turėti informaciją baigti up URL, pavyzdžiui, naršyklės adreso juostą? Kokios formos daryti you-- Auditorija: [NESIGIRDI] David J. Malan: Taip, patinka tai, ką? Auditorija: slaptažodžius. David J. Malan: Taip, taip, jūs prisijungiate prie "Facebook" ar tam tikru svetainėje. Štai naudotojo įvesties iš forma, teksto langelyje, bet jūs tikriausiai nenorite, kad jis rodyti Naršyklės URL. Kodėl? Aš turiu galvoje, gal yra keletas saugumo pasekmės tinkle, bet more-- patinka, paprasčiausiai, ką daryti, jei Jūsų draugas, jūsų kitų svarbių, jūsų vaikai, jūsų sutuoktinis atrodo per naršyklės istoriją? Yra slaptažodį teisė ten naršyklės istoriją. Tai neturi jaustis kaip gero dizaino. Ar net daugiau techniškai, tarkime, jūs bandote įkelkite nuotrauką į "Flickr" ar "Facebook ar wherever-- kad yra naudotojo įvesties, nors tai šiek tiek daugiau interesting-- kaip man prisikimšti žinutę URL juostoje įvaizdį? Jūs rūšies tarsi negali. Jūs rūšies galite. Bet, tikrai, aš sunku štampuotos įsivaizduoti tai, kad. Taigi man reikia kitą metodą įkelti nuotraukas į svetainę, ir, kad kitas metodas yra vadinamas "po". Bet dabar, mes tiesiog kalbėti apie "Gauti", kuris yra iš dviejų paprastesnė. Jis tiesiog daro visi naudotojo įvesties į URL. 

Taigi čia forma aš sukurti. Noriu įvestį. Ir žinote ką? Aš ruošiuosi imtis atspėti čia. Aš ruošiuosi priminti mano įėjimo "Q" ir "užklausą". Ir aš manau, kad tai yra vienas iš originalaus dizaino, galbūt, nuo 1999 m. Ir tada šio įėjimo tipas tiesiog bus "tekstas". Ir tada aš ruošiuosi kitą įvesties kad nereikia vardą, kaip mes greitai matyti, kurio tipas yra "pateikti". Ir tai vyksta man specialų mygtuką. Štai ir viskas. 

Taigi leiskite man eiti į priekį ir išsaugoti šį failą. Aš ruošiuosi eiti atgal į savo naršyklę ir eikite į google.html. Įveskite. Ir tai tipo nedaug pasakyti mažiausiai. Bet leiskite man eiti į priekį ir ieškoti "kačių". Ir pastebėsite aš šiuo metu Šiuo Cloud9 URL. Bet momentas paspaudžiu tai, kur jūs tikiuosi galų gale? 

AUDITORIJA: "Google". 

David J. Malan: "Google". Taigi leiskite spustelėkite Pateikti. Ir iš tiesų, aš iš naujo įgyvendinti "Google". Right? Tai paprastesnis. Tai lengvesni. Aš turiu galvoje, mano kodas yra aiškiai geriau nei jiems nuo netvarka matėme anksčiau. Ir žinote ką? Aš ruošiuosi prieskonių tai iki šiek tiek. Aš ne paminėti anksčiau. Yra žodžius, pavyzdžiui, H1, 1 kategorija, svarbiausia pozicijoje puslapyje. "Mano" Google "," aš vadinu tai. Leiskite perkraukite puslapį. Jis ieško šiek tiek geriau jau. Ir, iš tikrųjų, jūs žinote, ką? Aš already-- aš melavo. Pasakiau aš nesiruošia stiliaus tai, bet aš ruošiuosi stilius tai, kaip anksčiau. Ir mano kūnas bus, tarkim, text-align centras. Jis ieško daugiau kaip Google jau. 

Man reikia eilutės lūžį, nors, už tai mygtuką "Siųsti". Ir it turns out, jūs galima naudoti pastraipas, arba galite daugiau pažodžiui tik pasakyti, man liniją pertrauka here-- BR žyma. Ir jei aš perkrauti to, dabar jis eina ten. Tai šiek tiek negraži, todėl aš galėtų padaryti kelis eilučių, bet tegul ne gauti pernelyg gobšus čia. Taigi dabar galime pamatyti, jei ji veikia "šunų". Atrodo, kad darbas terminą "šunys", taip pat. Taigi, kas yra įtikinamų Takeaway čia? One-- nebuvo didžiulis šuolis Įvesti kelis žodžius, kaip forma žymę įvesties žymeklį. Bet iš esmės yra, visi mes darome yra sverto mūsų supratimą HTTP ir dėl to, kad formos galiausiai pakeisti kas yra naršyklės URL ir taip, todėl, galime mechaniškai prisidėti prie serverio darant HTML formą ir žinant kad serveris supranta HTTP, tiesiog patinka mūsų kūnas supranta, kaip, drebulys mano rankos, kad tą patį protokolą, ir todėl mes grįžti atsakymą kad mes galiausiai tikėtis. 

Taigi pabandykime padaryti vieną Paskutinis dalykas, kurį dabar su mobiliojo ryšio, ir aš make-- aš pridėsiu šis kodeksas skaidres. Taigi, jei norite Taisome, jums tikrai gali imtis jį iš ten. Bet aš ruošiuosi eiti į priekį ir daryti vieną dalyką. Aš ruošiuosi eiti į priekį ir atverti savo indekso page-- mano labas puslapis, kaip ir anksčiau, o turi šio dirbtiniais Lotynų daug teksto, arba bereikšmis Lotynų teksto ir has-- atrodo, kad tai ne šios šriftų dydžio. Bet leiskite man eiti į priekį ir tai padaryti. Aš ruošiuosi eiti į Cloud9. Ir jūs neturite padaryti šį žingsnį. Aš tiesiog padaryk tai pati. Aš ruošiuosi spustelėkite Bendrinti. Ir tai yra funkcija tik iš Cloud9, kuriuo Galiu padaryti, kad mano aplinka visuomenei. 

Ir tik vardan demonstravimas, leiskite man tai padaryti. Aš ruošiuosi padaryti, kad mano paraiškos visuomenę. Atkreipkite dėmesį, kad įspėjimas man, esu Aš tikrai noriu tai padaryti, nes tai ketina padaryti visiems pasaulyje, nesvarbu, ar jie čia dabar ar žiūrėti vaizdo įrašą vėliau dėl Interneto galės pamatyti, ką aš matau. Bet tai viskas OK. Aš ruošiuosi pasakyti "Priimta". Ir leiskite man paskatinti jus, jei aš tai correctly-- leiskite išbandyti jį pirmą kartą. Eiti į priekį, jei jūs neturite mind-- naršyklėje kompiuteryje, eiti į šį URL, ir, tikiuosi, pamatysite mano lotynų tekstą. Ir, kad būtų aišku, tai veikia ne ant mano laptopo. Tai debesyje. Tai ant Cloud9, pažodžiui, bet Aš atlikau savo darbo vietos visuomenę taip, kad kiekvienas internete gali prisijungti prie savo lotynų pagrindinį puslapį. 

Eiti į patį URL Jūsų telefonas, jei gali. Jei jis bus jums kainuoti, nors, jūs galite tiesiog ieškoti per petį. Auditorija: [NESIGIRDI] David J. Malan: Aš atsiprašau? Auditorija: [NESIGIRDI] David J. Malan: Tik lotyniškų žodžių. Tai viskas. Bet tai, ką jūs turėtumėte pamatyti. 

AUDITORIJA: Taip. David J. Malan: Taip. Taip. GERAI. Taigi aš galiu turėti iki jūsų telefonas tik akimirkai? Taigi, tikiuosi, jei jūs susipažinimo jis, ji turėtų atrodyti beveik neskaito. Tai still-- Aš turiu galvoje, tai neįskaitomas, nes lotynų kalba. Bet tai taip pat neskaito kokiu kitos priežasties? Kaip, kas nepatinka jums apie tai? AUDITORIJA: Tai mažas. David J. Malan: Tai super, super maža. Taigi, kaip galėtume išspręsti šią problemą? Tai itin, itin mažas apie Victoria telefoną ir, jei jūs iškedentas ji iki sau, tikriausiai mažas telefone, taip pat, nebent jumis turi pritaikytas nustatymų įjungta. Kas tai? Jūs galite tiesiog žiupsnelis ir priartinimas, kuris yra veiksmingas, bet tada jums matyti tik keletą žodžių vienu metu. Taigi palauk. Aš žinau, kaip išspręsti šią problemą. Right? Galėčiau naudoti CSS, ir galėčiau pakeisti šrifto dydis nuo 12 punktų iki 24 taško. Bet šalutinis poveikis, kad, Žinoma, tai bus dabar ant stalo arba nešiojamąjį kompiuterį, dabar tekstas yra dvigubai didesnis. Ir todėl būtų rūšies būti gražus atskirti prietaisų, ir paaiškėja, kad yra būdų, kaip daryti. Yra keli įvairių būdų, iš tiesų, kuriuo, naudojant CSS ir mėgėjas funkcijų kad mes ne eiti į labai išsamiai, galite esmės užklausą naršyklė ir pasakyti, Jei ekranas yra mažesnis nei šis daug taškų, naudoti šią šrifto dydį. Jei ekranas yra didesnis nei šis daug taškų, naudokite šį kitą šrifto dydį. 

Galite būti net mėgėjas dar. Jeigu jūs kada nors lankėsi interneto puslapis, kad ant stalo, turi didelę meniu gal ne į pusė, ir tada visą turinį yra į tą pusę menu-- kad tipo bendros paradigmos. Meniu kairėje turinį dešinėje, arba atvirkščiai. Tikrai ne dirbti Mobile, kai jūsų ekranas yra tik tai daug pikselių pločio. Taigi dažniau ant mobilusis telefonas yra, Jūsų meniu bus staiga gauti žlugo, ir jūs turite spustelėkite mygtuką jį pamatyti, arba svetainė padės meniu virš jo ir įdėti po juo turinį. Ir jūs galite įgyvendinti tai dalykų įvairiais būdais, taip pat. Jūs galite paprašyti savo programuotojų, Ei, komanda, bet kuriuo metu matote HTTP užklausą iš "Android" prietaisas, Microsoft prietaisas, Google prietaisas, Apple įtaisas, naudokite šį šrifto dydis ir naudoti šį meniu išdėstymą arba dar naudoti šį numatytąjį didesnį maketą. 

Dabar, naudojant tai, kas pagrindinis metodas šiandien gali inžinieriai naudoti žinoti, ar tai iPhone, Android telefonas, nešiojamas kompiuteris, stalinis apsilankymą įmonės serveryje? Kuriame jie gauti šią informaciją? 

Auditorija: Header? 

David J. Malan: Taip, HTTP. Taigi kiekvieną HTTP užklausa iš jų klientai į savo serverius apimti, viduje, kad virtualus paketas, visa krūva HTTP antraščių, vienas iš kurių yra naršyklė ir operacinė sistema net, jei jums rūpi kad detalumo lygis. Dabar, tai paslaptingas atrodantis eilutė, bet egzistuoja programa, kuri tiesiog supaprastinti, kad ir jūs galite tiesiog paklausti programavimo code-- PHP, Java, C ++, whatever-- kas telefonas yra this-- ką prietaisas yra šis vartotojas naudojate? Ir tada jūs galite pasakyti, parodyti jiems tai versija svetainę, jei tai telefonas. Parodykite jiems ši versija svetainė, jei tai nešiojamas ar stalinis. Bet jūs net nereikia server-side sudėtingumo. Tai galite padaryti net dalykų paprasčiausias. 

Aš ruošiuosi tai padaryti. Aš ruošiuosi eiti į priekį į mano Cloud9 aplinka, ir aš ruošiuosi pridėti žymę kad matėte Google anksčiau. Tai vadinama meta žymeles. Ir aš niekada prisiminti šį vieną, todėl Aš ruošiuosi jį užrašius čia. Meta name = "peržiūros sritį" ir tada content = "width = prietaisas plotis, intital skalė = 1 "ir viskas. 

Taigi jis gali taip pat būti kaip stebuklinga užkalbėjimas. Tai dar ne viskas, kad aišku, bet tai turi ką daryti su peržiūros, ir peržiūros sritis yra tik kūnas Interneto puslapis, stačiakampio regionas, apibrėžia didžiąją dalį puslapio. Ir tai tik sakau naršyklė, žinote, ką? Padaryti šį puslapį plotį veiksmingai lygus įtaiso plotis. Kitaip tariant, nereikia manyti, kad turite rūšiuoti neribotą erdvę. Tarkime, jūs turite tik tiek, kiek erdvė, kaip ir pats prietaisas yra didelis. Ir todėl dabar, jei aš iš naujo įkelti šį savo naršyklėje, nematau kaita. Bet jei aš šį correctly-- ir leiskite man kirsti mano fingers-- jei jums visiems perkraukite savo telefonus, ar jums pamatyti įtikinamą kaita? Taip, yra that-- 

Auditorija: [NESIGIRDI] David J. Malan: Taip. GERAI. Taigi, be abejo, daugiau skaitymo metu? Vis dar mažas, kad būtų teisinga, bet ne taip maža, kad būtų nevaldomos. Ir aš tikrai galėtų pakeisti šį toliau su CSS ar serverio pusėje, bet vis kas esate matome vis daugiau ir daugiau funkcijų yra įtraukta į kliento pusėje environments-- JavaScript, nes mes aptarsime rytoj, CSS ir HTML-- taip , kad visi šie užklausų gali būti padaryta dėl kliento taip nerimauti serveris daug mažiau ir ne turėti suspėti su, Pavyzdžiui, nuolatinis veržimasis Naujos operacinės sistemos- versijos, naujos naršyklės versijos. Jūs galite tiesiog leisti naršyklei paprašyti įrenginį, kaip didelis yra jums, ir tada šiek tiek logiška sprendimai grindžiami kad. Bet mes pamatyti daugiau galimybių už loginius sprendimus rytoj konteksto iš programavimo kalba. 

Taigi, bet kokie klausimai, tada, apie interneto svetainių kūrimas? Šiandien nėra Web programavimas, už SE, nes beveik viską darėme buvo labai estetiška, jei bus. Nėra sprendimų priėmimas kodas, kad mes parašėme, ir taip, tai kodėl HTML žymėjimo kalba, o ne programavimo kalba. Bet rytoj mes priimsime Žvilgsnis galiausiai ne "JavaScript", kuris yra faktinis programavimas kalba, kuri leidžia mums padaryti šiek tiek daugiau. 

Turite klausimų? Na, leiskite man pasiūlyti du galimybės neprivalomas namų darbus. Vienas is-- šias Cloud9 sąskaitos nebus baigiasi. Jūs esate kviečiame pasinaudoti jiems žaisti su. Tai laisvas paslaugų lygis. Suprantu, kad jei kuriant savo darbo sritį, jūs padarėte tai viešai, kad nereiškia, kad visiems kitiems Internetas gali pamatyti, ką jūs rašote. Taigi gal tiesiog mano ne gėdingai sau jei jūs išleisti savo pirmąjį interneto puslapis iš ten viešai netyčia, bet niekas ketina žinau, kad ten atrodo vistiek. 

Ir two-- leiskite Lobizmas iki URL, taip pat, ypač jei atėjo šiandien tiek mažiau patogus nei kiti, nežinote ką visa ši medžiaga reiškia. Suprantu, kad daug daugiau šio vaizdo, kuris yra ir geras būdas užmigti o taip pat juoktis kol Tokiu būdu, taip pat turi iš societally įdomus daug ir saugumo požiūriu svarbius diskusijos jame John Oliver, nors ir komikas. 

Bet jei nėra kokių klausimų, kad duoda mums registratūroje. Taigi, kodėl ne aš įjungti muzikai. Turėtų būti gėrimai ir užkandžiai ribų. Aš laimingas susilieti tiek Kol žmonės norėtų, atsakyti į klausimus, dar vienas ant vieno. Tačiau, kitaip, jūs laukiami nusiimti bet kuriame taške, ir mes vėl jus matyti rytoj rytą šiek tiek daugiau. Gerai, ačiū.