DAVID J. MALAN: Selvä. Olemme palanneet. Joten tavoitteena viimeisen istunnon on ottaa käyttöön muutamia käsitteitä mutta myös antaa kaikille mahdollisuus sellaista venyttää sormilla ja todella tehdä jotain vähän käytännön. Tavoitteena ei ole kääntää meidät kaikki web-kehittäjille millään tavalla, mutta oikeastaan ​​vain antaa sinulle maistaa perustavaa laatua konstruktioita mitä menee Web-ohjelmointi ja tänään web kehitys, joten staattinen puoli things-- mitään logiikkaa, ei ohjelmointia kieli, vain staattista sisältöä. Ja se antaa meille mahdollisuuden todella nähdä, mitä web-palvelin on, Katso, mitä HTML-tiedoston on, mitä se on HTTP on todella palvelevat. Mutta ennen kuin sukeltaa, takautuvan kysymyksiä cloud computing tai turvallisuuden tai jotain siltä väliltä? Ei? Selvä, no, sanotaan tehdä tämän kaiken varalta prosessi rekisteröitymisestä jotain vie vain muutaman minuutin. Annamme sen tekee taustalla. Mennä eteenpäin, jos voisit, Tämän URL here-- c9.io. Tämä on kolmannen osapuolen service-- platform palveluna, jos will-- joka on menossa kutsuvat rekisteröityä tilin, ja se tulee antaa jokaiselle teistä tilin ns pilvi jonkun toisen infrastruktuuri, nimisen yhtiön Cloud9. Mutta mikä on mukavaa noin tämä on, että ne antavat sinulle lähentämistä sellaisen Varsinainen reaalimaailman kehittäminen ympäristö, vaikkakin pilvi ja selaimella, ja käytämme tätä todella kokeilun hieman tänään. Ja sitten mennä eteenpäin ja vain navigoida tiesi rekisteröitymisprosessissa jos voisit. Joten meidän satu käyttämään tätä luokassa Opetan kaikille meidän opiskelijoiden, sekä kampuksella ja pois nyt, ja se korvasi mitä historiallisesti oli muuten ladattava ohjelmisto. Joten mitä olit päästä on yksi näistä virtuaalikoneita, lähinnä, että olen kuvattu aiemmin. Joten tämä yritys Cloud9 luultavasti vuokraa kolmannelta Party-- todellakin Tässä tapauksessa Google-- kokonaisuutena nippu virtuaalikoneiden että he jotenkin pilkkoa ylös illuusion yksittäisten palvelimien että jokainen meistä on täysin valvoa. Se ei ole aivan oikein sanoa että he virtuaalikoneita, kuitenkin, koska mitä Cloud9 tosiasiallisesti käyttää on hieman uudemman tekniikan nimeltään konttikuljetukset. Ja anna minun napata tämä kuva tässä maalata tämän kuvan. 

Säiliö on, jos muistatte kuva aiemmista, hieman kevyempi paino kuin virtuaalikoneen. Itse asiassa, kun viime aika puhuimme siellä että toiminta järjestelmä ja hypervisor ja sitten vieras käyttöjärjestelmä, vieras käyttöjärjestelmä, vieras käyttöjärjestelmä järjestelmä, päälle saat fyysinen laitteisto, ero tämä uudempi teknologia, konttikuljetukset, on se, että ne kaikki jotenkin jakavat sama käyttöjärjestelmä. Mutta he silti luoda illuusion kaikille ottaa oman yksinoikeudella hallinto- oikeudet ja tiedostojen palvelimelle. Mutta on vähemmän ohjelmiston sinun ja laitteisto. Tulos, joka on in Teoriassa paremman suorituskyvyn, koska käytät tai tuhlata vähemmän resursseja on, että niin sanotut virtualisointikerros. Joten tätä kutsutaan containerization luonteeltaan Poiketen tekniikkaa kutsutaan Docker, joka on hyvin tulossa omaan. Ja tämä on jotain, että insinöörit yrityksen voisi tavallaan eräänlainen alkaa puhua noin pian, jos ne eivät ole jo, vaikka siellä varmasti ole syy hypätä tahansa bandwagons. 

Niin, että sanoi, mitä te todennäköisesti nähdä nyt on näyttö, joka näyttää hieman tätä. OK. Ja vain soittaa minulle yli, jos ei. Ja jos so-- Tulen ohi, jos ei. Siirry eteenpäin ja valitse että iso plus luoda työtilan, ja näet seuraavanlaisen näytön. Voit soittaa työtilan nimetä mitä haluat nyt. Ja vain todella yksinkertaisuuden, go and-- hyvin, jotkut teistä jo työtilat. Kutsu sitä mitä want-- liiketoimintaa, Harvard, torstaina mitä haluat. Et tarvitse kuvausta. Voit jättää sen yksityisiä, ellet jo nippu työtiloja. Jos olet pakotettu tekemään sen julkiseksi, se sopii nykypäivän tarkoituksiin. Tässäkin on yksi upsells. Saat yksi yksityinen työtila oletuksena. Mutta jos haluat enemmän, joudut maksamaan enemmän. Muussa tapauksessa ne pakottavat teitä tehdä työtä julkisia. Mutta se on hienoa, koska ne myös kohdistaa tähän at avoimen lähdekoodin yhteisöt kannustaa ihmisiä todella yhteistyötä. 

Ja viimeinen asia, että on tärkeää, vaikka on, kun valitset nimen ja kun olet valinnut yksityisen tai julkisen, valitse HTML5, iso oranssi ikoni toinen vasemmalta, ja sitten Luo työtila. Ja se luultavasti kestää minuutin tai niin, mutta sinun sitten on ympäristö, kun tehdä, joka näyttää muistuttaa mitä olen ruudulla täällä nyt. Mutta jälleen kerran, se saattaa kestää hetken tai enemmän saada tähän näyttöön kun klikkaat Luo työtila. Mutta lippu minua jos haluat minut ja katsomaan jotain tai neuvoja. Selvä. Joten aion tausta tätä nyt. Soita minulle yli, jos näytätte mitään teknisiä ongelmia. Mutta jälleen kerran, se saattaa kestää Hieman siitä avata. Ja mennään eteenpäin ja puhua mitä se oikeastaan ​​tarkoittaa tehdä web-sivun, mitä HTML on, ja miten kaikki tämä Nyt yhdistää kun olemme alkaneet itse käyttää joitakin tekniikkaa. Joten käy ilmi, että voin mennä pikku Mac täällä, Avaa yksinkertainen ohjelma nimeltä TeXturi tai Windows pystyin avoin jotain kutsutaan Notepad.exe. Ja voisin vain yksinkertaisesti tehdä jotain tämän kaltaisia ​​osia "Hei, maailma." Ja sitten voisi tallentaa tämän hello.txt Joten ei magic siellä. Tällä ei ole mitään tekemistä sen kanssa web ohjelmointi, mitään tekemistä HTML. Vain luomalla yksinkertainen tekstitiedosto. Mutta näyttää siltä, ​​että web- sivu on kirjaimellisesti juuri sitä. Se on yksinkertainen tekstitiedosto, joka sisältää tekstiä että saatat kirjoitat näppäimistön, mutta se yleensä, mutta ei aina päättyy ei .txt mutta .html tai .htm. Ja et vain kirjoita sanat tiedostoon. Sinun todella täytyy käyttää asioita nimeltään tunnisteet tai yleisemmin jotain nimeltään markup language. 

Joten aion hyvin nopeasti kirjoittaa ja sitten selittää seuraavaa. Aion ensin kirjoitan tätä, jossa sanotaan, hei, selain, tässä tulee Web-sivun kirjoitettu HTML. Ja nämä kaksi asiaa yhteen sanoa, hei, selaimen, seuraava on todella HTML. Hei, selain, tässä tulee pään tai alkuun minun sivun. Hei, selain, sisäpuolella yläosassa sivuni laittaa otsikko eli "hei, maailman." Hei, selain, kun esimies sivu, tässä tulee kehon sivuni. Ja hei, selain, kehon minun tulisi myös sanoa "Hello World". Mitkä ovat keskeisiä yksityiskohtia täällä? Tämä on mitä yleensä kutsutaan doc-tyyppinen ilmoitus, ja rehellisesti, se on hieman vaikea muistaa tämä ensin. Kyllä sellainen kopioi-liitä se. Tämä on muodollisesti sanoa, hei, selain, Käytän HTML-versio 5, joka tuli ulos hieman viime aikoina. Se on maaginen loitsu, että jotkut ihmisillä on huono tunne suunnittelu päätti laittaa klo hyvin alkuun tiedoston. Vaikka se on vähän mystistä, siinä kaikki se means-- hei, selain, tässä tulee versio 5 HTML. 

Loput tämä on ollut meille jo jonkin aikaa, historiallisesti, mutta se on ollut kehittyvä, ja se on luultavasti saada vähän yksinkertaisempi. Huomata muutamia ominaisuuksia mitä olen korostanut. On näitä asioita kulmapohjan brackets-- vasen kannatin ja oikea kiinnike. Ja huomaa symmetria täällä. Ja symmetrisesti, tarkoitan, niin kuin minä on tämä alkutunniste tässä tai avoimen tunnisteen jos haluatte, täällä olen sulje tagi tai lopputagiin joka on Eri vain siltä osin kuin se on tämän leikata alussa sanan HTML. Ja voit ajatella tätä olin ohimennen ehdottaa ennen, hei, selain, tässä tulee joitakin HTML. Ja päinvastoin, hei, selain, joka on se, että HTML-- alun ja lopun. 

Samaan aikaan hei, selain, tässä tulee esimies sivun. Hei, selain, se on siinä päähän. Hei, selain, tässä ruumis sivuni. Hei, selain, se on siinä elin. Ja sisällä, joka on noin mielivaltainen teksti nyt. Ja sisällä pään puolestaan on jonkin verran mielivaltainen, mutta koodattu, niin sanotusti, jossa lukee, otsikko sivuni on "Hei, maailma." Nyt, nyt, voit olettaa, että selaimet on only-- tai pikemminkin web-sivuja on vain kaksi parts-- pään ja rungon. Ja pää on yleensä vain kuten valikkorivi, tavaraa oikeastaan ​​vain huipulla. Ja keho on rohkeutta sivun, kaikki, että iso suorakaide että täyttää ruudun. Joten aion mennä eteenpäin ja tehdä tätä. En aio mennä eteenpäin ja valitse Tallenna, Tiedosto Tallenna. Ja aion säästää tätä hello.html, ja olen juuri menossa laita se työpöydälle. Ja aion mennä eteenpäin ja valitse Tallenna. Ja notice-- Mac at Ainakin on huutaa minulle. Oletko varma, että haluat tehdä tämän? Ja aion sanoa, kyllä, käyttää HTML. Tiedän paremmin tässä tapauksessa. Ja nyt aion mennä työpöydälle jossa olen tämän tiedoston yhtäkkiä. Ja aion kaksoisnapsauttaa sitä. Ja huomaat, että vuoteen Oletuksena Chrome avannut. Tämä johtuu se oletusselain. Ja se vain sanoo "hei, maailma." Mutta se sanoo "hei, maailma "kahdessa paikassa. Huomaa, vasemmassa yläkulmassa. Melko vaikea olla huomaamatta sitä. Se on iso ja rohkea. Ja missä muualla se näyttää sanoa, "hei, maailma"? 

YLEISÖ: välilehti. 

DAVID J. MALAN: Joo, välilehti itse. Joten kun sanoin pää sivu on kaiken ylös top-- ja todellakin tämä on otsikko. Se on vain välilehden täällä. Ja voin vetää tämän välilehden out jotta ei sekoita. Tämä on vain yksi välilehti nyt, ja todellakin näemme "hei, maailma" tänne ja "Hello, World" täällä. Joten melko suoraviivaista. Mutta se on myös melko yksinkertainen. Ja itse asiassa, minä zoomata. Voin muuttaa fontin kokoa vain suurentaa esteettömyyden. Mutta katsotaan nyt tehdä jotain hieman mielenkiintoisempi. 

Aion jää tänne oho, anna minua saamaan takaisin minun tekstitiedosto. Aion takaisin minun tekstitiedosto, ja aion muuttaa ja sano "Hei, Disney World." Tallentaa. Ja palata my selain ja valitse Päivitä. Ja nyt, tietenkin, se sanoo "Disney World." Ja aion keinotekoisesti zoomata vain niin se on helpompi nähdä. Nyt valitettavasti olen sellainen haluavat to-- todella, että on Mac-ominaisuus. Haluan klikkaa Disney World ja mennä jonnekin kuten disney.com, mutta se ei toimi. Joten perusperiaate raina hyperlinkkejä, linkkejä, jotka menevät muualle. Joten miten teen sen? Voisin vain sanoa, "Hei, http://www.disney.com." Tallenna tämä. Päivitä. Mutta tämäkin, ei toimi. Ja mikä on mukavaa täällä, vaikka tämä ei toimi vielä, on, että näyttää siltä, ​​että selain kirjaimellisesti tekee vain mitä kerron sitä tekemään. Joten jos vain kirjoittamalla URL näin, se vain menee näyttämään minulle URL. Minun täytyy käyttää tunnisteita tai markup kieli todella kertoa selaimen tehdä vieläkin enemmän. Joten aion mennä eteenpäin ja poistaa tämän hetken. Ja aion sanoa, hei, selaimen, aloita ankkuri täällä, linkki niin sanotusti. Ja hyper-viite, määränpää Kyseisen ankkuri, pitäisi olla tätä URL. Ja huomaa minun lainausmerkkejä. Voisin käyttää heittomerkkejä, myös mutta sinun täytyy olla johdonmukainen, ja haluaisin yleensä vain käyttää kokolainausmerkkien pidettävä yksinkertaisina. Huomaa, Aion sulkea tag. Ja sitten täällä aion sanoa, "Disney World." Ja nyt minä tarvitsen symmetry-- alkusulkumerkki, / a, suljettu kiinnike. 

Joten mitä olen otettu käyttöön? Meillä oli muutama tunnisteita jo. HTML, Head, Otsikko, Body, ovat kaikki tagit, niin sanotusti, avoimet ja suljetut kollegansa. Mutta ilmoitus, tämä on tavallaan perustavanlaatuisesti erilaisia. Tämä on mitä me kutsumme HTML määrite. Ja attribuutti on vain avainarvoparin. Tämä on yhteinen asia tietokone science-- avainarvoparin. Se on tavallaan työkalun kaupan. Keskeinen ja arvon. Sana ja sitten jotkut muuta sanaa tai sanoja. Ja tässä tapauksessa, avain on href, ja arvo on se, että koko URL-osoitetta. Ja mitä attribuutti ei se vaikuttaa käyttäytymiseen tag. Ja tässä tapauksessa, meidän täytyy vaikuttaa käyttäytymistä ankkuri tag, koska meidän täytyy ankkuroida linkki jonnekin. Ja miten teet sen on Poiketen määrite. 

Joten aion mennä eteenpäin ja tallenna tiedosto nyt. Mene takaisin selain ja reload. Ja voila, meillä on nyt alkuja laillinen sivun. Super-yksinkertainen, mutta jos en vie hiiri this-- ilmoituksen vasemmassa alakulmassa, se on super-pieni. Mutta sinä näet www.disney.com. Ja jos minä klikkaa sitä tosiaankin tämä kiidättää minut pois disney.com. Nyt omituista tässä on se, että se ei ole best-- eniten myyntikelpoisia URL, mutta se on hieno koska tiedostoa ei olemassa World Wide Web. Se on olemassa paikallisena tiedostona ilmeisesti minun Käyttäjät directory-- / jharvard-- John Harvard-- / työpöydälle. Mutta se on URL-osoite. Se vain sattuu olemaan paikallinen. Valitettavasti kukaan voi vierailla tätä, koska jos kirjoitat tämän URL-osoitteen, olisit kertoa selaimen, etsi tiedosto nimeltä hello.html kiintolevyllä. Ja tietenkin, ellet ole seurannut pitkin manuaalisesti, se ei tule olla siellä. 

Niin se käy hyvin. Tarvitsemme edelleen tavalla, lopulta, saat tämän tiedoston verkossa, mutta katsotaan kiusaa erilleen pari turvallisuusvaikutuksia mitä me juuri näki ja sitoa sen takaisin aikaisempaan keskustelun tänä aamuna. Osoittautuu, että jos selain kirjaimellisesti vain ei mitä kerron sen tehdä, ja näyttää siltä, olevan näin, että ankkuri tag on vaikuttaa arvo tätä ominaisuutta kutsutaan href mutta se näyttää tämä tekstiä, tämä näyttäisi vihjata, että voisin laittaa URL molemmissa paikoissa ja aseta ja nyt nähdä URL ja siirry URL. Ilmoitus, jos en viemällä hiiren alhaalta vasemmalle, Olen todellakin menossa vielä disney.com. 

Joten jos olet joskus ollut phished-- P-H-I-S-H-E-D-- yksi niistä vääriä sähköposteja alkaen, kuten PayPal pankista, olet todennäköisesti saanut linkkejä sisällä Sähköpostiviestin että luet että käskee klikkaudu confirm salasana tai vahvista syntymäajan tai sosiaaliset tai jotain sosiaalisesti engineering voit paljastaa tiedot. No, voisin tavallaan toteuttaa Etuna tässä, ei voinut I? Voisin sanoa jotain kuten, www.paypal.com. Ja sen sijaan disney.com, I voisi mennä, kuten, badguy.com. Päivitä. Ja kuinka helppoa on huiputtaa, erityisesti ei-tekninen lukija tai pintapuolisesti lukeminen lukija kuin napsauttaa linkki näin, jotka, jos napsautan it-- En oikeastaan ​​halua mennä badguy.com. En tiedä mitä todella olemassa. Joten paypal.com, ilmoitus, on mitä se sanoo se tulee, mutta tietenkin, jos katson alas olemattoman vähän, se on hieman epäselvä, mutta se sanoo badguy.com. Se on vain kertoa juuri nyt että aion väärään paikkaan. Ja kun sanoin aiemmin, että pankit ei todellakaan pitäisi rohkaista tai junan käyttäjät klikkaamaan linkkejä, tämä on vain yksi ilmentymä siitä. Ja se on niin yksinkertaista. Nyt olet vastustaja jos teet jotain tällaista ja yrittää huijata käyttäjää osaksi vierailevat sivustolla. Mutta nyt, pidämme asiat mukava ja puhdas. Aiomme mennä eteenpäin ja taaksepäin näitä muutoksia. Lataa sivu uudelleen. Ja menen takaisin disney.com. 

Katsotaan jos emme voi kiusata Tämän lisäksi hieman. Joten "Hei, Disney World." Aion sanoa täällä. Ehkä aion tehdä jonkin verran. "Toivottavasti viihdyt!" Tallentaa. Päivitä. Se ei rea-- että ei ole mitä aioin, eikö? Siis, jos en hoitoon tekstini tiedosto kuten tekstinkäsittely, mitä toivotte tapahtuisi täällä? Joo, minusta tuntuu siellä pitäisi olla rivinvaihdon täällä, joten se tuntuu viallisista jollakin tavalla. Mutta se on todella tahallinen, koska kuten ennenkin, selain tulee vain do mitä kerrot sitä tekemään. En ole kertonut sitä rikkoa linjat. En ole kertonut sitä liikkua alaspäin, vaikka vaikka intuitiivisesti, minusta tuntuu tein. Joten se kääntyy pois tarvitsemme hieman markup, ja aion korjata tämän seuraavasti. Aion esipuhe tähän ensimmäiseen hei mitä kutsutaan kappaleen tag. Ja sitten aion mennä eteenpäin ja kääri tämä toinen lause toisessa kohdassa tag, vaikka he super-lyhyitä kappaleita. Nyt aion säästää. Päivitä. Nyt meillä on, että tilaa, ja me tavallaan on semantiikan kahtena erillisenä kappaleena. 

Siinä kaikki hyvä ja hieno, mutta se olisi kiva lisätä kuvan tälle sivulle, joten aion mennä etsimään Mikki Hiiri Google Images. Ja vain huvin vuoksi, olen menossa napata tämän kuvan. Aion mennä eteenpäin nyt ja napata URL tämän kuvan, vaikka siellä on erilainen tapoja tehdä tätä. Nyt olen juuri menossa kopioida URL. Aion mennä takaisin tekstini tiedosto, ja aion sanoa täällä, img src = quote unquote että URL, super-pitkä. Ja sitten käsitteenkin kuva on hieman erilainen. Ei todellakaan ole käsitettä lähtö- kuvan ja päättyy kuva, kuten alkutunniste lopputagiin. Joten se tuntuu hieman outo minut semanttisesti tehdä tämän, on sulkeutuvaa kuva tag. Se ei ole virheellinen. Se on täysin oikein, ja se kannusti, mutta on pikakirjoitusmuoto. Voin sellainen samanaikaisesti avaamaan ja sulkemaan sama tunniste, ja joka tekee selaimen onnellinen. Joten se on vain hieman lyhyempiä asioita että käsitteellisesti todellakaan ole järkeä alku ja loppu. He vain ovat olemassa, tai ne eivät ole. 

Joten aion tallentaa ja palata minun "hei, maailma" sivulla ja reload. Ja se on vähän käsistä, koska kuva on todella hieman suuri, mutta se on OK. Voisin muuttaa sen kokoa ohjelmassa. Tai tiedät mitä. Vain osoittaa, olen menossa oikeastaan ​​sanoa että leveys tämä asia olisi vain 200 kuvapistettä, 200 pistettä. Anna minun mennä eteenpäin ja tallenna ja lataa, ja nyt sivun näyttää hieman järkevämpi. Mutta huomaa kuvio. No, olen tavallaan opettanut teille kaikille HTML jossain mielessä, ainakin käsitteellisesti, koska kaikki HTML on on Näiden tags-- auki tunnisteet, suljettu tunnisteet, ja attribuutteja, että muuttamaan käyttäytymistään. Ja ilmeisesti, joka tag voi olla nolla tai yksi tai kaksi tai useampia ominaisuuksia, kukin joka tekee jotain hieman erilaista. Nyt, mistä tiedät mitä on olemassa? Sinä vain kuunnella joku kuten minä kertoa teille, mitä on olemassa, tai et vain Google noin opetusohjelma HTML, ja se on todellakin näin yksinkertainen. 

Todellakin, kun olin undergrad vuotta sitten ja oppinut HTML, eräs matematiikan opetuksen avustajat juuri viettänyt vähän aikaa tutorointi minua samankaltaisille puoli tuntia, tunti, ja sitten olin matkalla. Olin matkalla kohti tekeminen kauheinta sivustot koskaan, joka ilmeisesti en ole todella edennyt pidemmälle. Mutta kohta on, että kun ymmärtää näitä yksinkertaisia ​​ideas-- jos arcane text-- mutta nämä yksinkertaiset ideoita alkaa ajatus ja sulkeminen ajatus, pitäen kaikki hienosti tasapainottavat, etsii jotain, muokkaamista käyttäytyminen että tag, se on todella kaikki on sitä. Ja itse asiassa, jos me nyt mennä jotain google.com-- todella, mennään paikkaan hieman reasonable-- stanford.edu. Ja aion mennä View, Developer, View Source. Se on ruma, mutta notice-- ja minä zoomata huomautus joitakin juttuja se tuttu jo. On yksi täällä, joka on selain. Täältä tulee HTML5. Ei HTML. Ilmeisesti on olemassa ominaisuus, että en Käytä joka määrittää kieli sivun, ja tämä voi auttaa automaattisella käännös ja tavaraa niin. Tässä pään sivulla. Tässä otsikko Stanfordin sivulla. On tag en puhua yet-- Sisällönkuvauskenttä. Se on vain eräänlainen taustatieto. Se auttaa SEO, tai Hakukoneoptimointi, tai Google-hakutulosten tai vastaavaa. Mutta jos me etsimme, pitää näköinen, tässä body. Ja siellä kimppua muiden tunnisteet olemme ole puhuneet vielä. Mutta Div on yksi varten jako sivun. Se on kuin näkymätön suorakulmio jos sellainen halutaan henkisesti jakaa sivusi eri yksiköiden verkossa. Ja sitten paljon divs I katso, jota kutsutaan luokan, mutta palaamme siihen. 

Tämä on interesting-- Forms. Lomakkeet ovat koko web. Jokainen hakukenttä olet koskaan käytetty on muotoa. Ja niin, katsotaanpa itse nähdä. Form. Toiminta. Toimia tämän lomakkeen, jostain historiallisista syistä, on se, että URL-osoite. Menetelmä on "post". Osoittautuu, että HTTP-pyyntöjä voi käyttää verbi "saada", kuten näimme aikaisemmin, tai "post". Ja näkevät eron Tämän hetken. Katsotaan itse nähdä, mitä tämä on. Saanen palata Stanfordin sivulle. Missä muodossa he puhuvat noin, luulet? Mitä hyppää ulos sinua? 

Yleisö: Search ruutuun. 

DAVID J. MALAN: Joo. Joten ylös oikeassa yläkulmassa tässä tämä haku ruutuun. Ja se, miten ne toteutetaan it-- tunniste, joka on kirjaimellisesti auki-kiinnike muodossa. Ja sitten nyt etsiä jotain. Oletetaan etsiä kaveri of mine-- "Nick Parlante." Tulla sisään. Ja tietenkin, se meni hieman eri URL. Päästä minut tänne. Oletetaan etsi "kursseja." Perkele. Meni eri URL. Joten, Stanfordin lisäämällä joitakin taika että he eivät vei minut URL että näimme toiminta määrite siellä. Mutta tämä lomake tästä toteutetaan puhtaasti Poiketen tämän markup täällä, nämä tunnisteet. Itse asiassa tässä on tulo tyypin haun, että haluat. Tässä on tulo toisentyyppistä haun. Tässä on tulo merkkijono itse. Ja niin tavoitteena ei ole kääriä mielemme ympärille kaikki nämä tunnisteet mutta vain nähdä. Se on vain avaamalla ja sulkemalla tunnisteet ja etsivät asioita. Joo? Victoria? 

Yleisö: [tahtiimme] DAVID J. MALAN: Se on hyvä kysymys. Se on hieman hankalampaa nähdä. Palaan tähän kysymys vain muutaman minuutin kun katsomme jotain kutsutaan CSS tai CSS, ja voimme yrittää päätellä niin paljon sivulta. Jos siis nyt katsomaan google.com, Katsotaan, mitä heidän sivu näyttää. Olisit they're-- se söpö tänään. OK. Kaikki valmista. Selvä, niin View Source. Luulisi Google on todella mukavaa lähdekoodia. Joten, ilmeisesti, mitä täällä tapahtuu? Ja itse asiassa, tämä ei ole edes HTML. Tämä on jotain kutsutaan JavaScript. Ja nyt pitää käynnissä ja menee. En edes tiedä, missä sivun alkaa. Aion käyttää Command F, alkusulkumerkki HTML. Selvä, siellä se on. Löysin alkua sivun, ja on niin paljon tavaraa täällä. 

Mitä todella tapahtuu? No, tiedätkö mitä, Voimme puhdistaa tämän ylös. Jos minä sen sijaan mennä tähän Tarkasta työkalupalkin, tämä erityinen diagnostinen työkalu, ja mennä eikä verkkoon, jossa pidämme menossa tänään, mutta jos menen Elements, mikä on todella mukavaa on, että selain on paljon paljon parempi silmät kuin minä. Ja selain voi lukea että sotku Web-sivun, että HTML-postia me vain katsoi, ja se voi jäsentää sitä tai lukea ja analysoida ja alustaa sen mukava ihmisille sopivalla tavalla. Joten mitä näen nyt Tässä näytössä täällä elementeissä, täsmälleen sama sisältö, mutta he ovat sisennetty kaiken, he colorized sen, mutta se on täsmälleen sama teksti että olen ladannut palvelimelta. 

Ja mitä mukavaa nyt näen kehossa, sillä instance-- ilmoitusta, sivu on edelleen muodostuu vain pää ja vartalo, ja voin hierarkkisesti sukeltaa täällä. Huomaa, että Google näyttää että divs-- tämä ja tämä. Voin laajentaa tuota. Siellä on koko joukko muita divs. Joten se on vähän monimutkainen. Mutta odota. Tämä vaikuttaa niin paljon enemmän luettavissa, suhteellisen, kuin tämä. Miksi Google kiusallista itsensä vain lähettämällä tämä valtava sotku koodin joidenkin sort juuri toteuttaa jotain joka näyttää niin yksinkertainen ensi silmäyksellä? Kuten, miksi he eivät lisää tiloja? Miksi he eivät paina Enter kuin minä? Katso kuinka hyvä olin kirjoittamaan web-sivulla. Löin Enter niin ahkerasti. Olen sisennetty joten kaikki on niin kaunis ja luettavissa. Miksi Google ei käytännössä sama? 

Yleisö: [tahtiimme] DAVID J. MALAN: Hyvä. Erittäin oikeudenmukainen. Heillä ei ole joitakin henkilö Google manuaalisesti päivittäminen kotisivu enää. Se ei ole 1999 enää. Joten ne ovat ohjelmistoja. Heillä on muita työkaluja, jotka tuottaa dynaamisesti he HTML. Tietenkin, että koodista kirjoittaneet ihmiset, mutta todellisuus on, se on melko reilua sanoa, selain ei tietenkään välitä kuinka sotkuinen koodi on. Mutta on vieläkin pakottava tekninen syy että Google jakaa niiden HTML koodia niin huolimaton, näennäisesti ylivoimainen tapa kaikki pakattu yhteen hyvin vähän way-- hyvin vähän tiellä muotoiluja kuten tein. 

Yleisö: [tahtiimme] 

DAVID J. MALAN: Nopeampi? Miksi? Ja mitä sanoit, Lydia? Nopeampi? Miksi nopeammin? Yleisö: [tahtiimme] DAVID J. MALAN: Ei ole tilaa lukea. Joo. Joten miettiä, mitä tilaa on. Joten jokainen merkki näppäimistöllä kestää jonkin verran tilaa edustaa, joko fyysisesti, kuin se vie niin paljon tilaa, tai jotenkin alla huppu, joka vaatii muistia. Ja kuin aside-- ja me puhua enemmän tästä tomorrow-- jokainen merkki näppäimistöllä vaatii tyypillisesti 8 bittiä, tai yksi tavu. Niinpä kuvio 8 nollia tai niitä, tai vain 1 tavu, kun me ihmisillä tyypillisesti sanoa. Niin, että pienet, mutta se on edelleen nollasta. Se on edelleen jonkin verran tilaa. Joten jos insinööri tai Google osumia välilyöntiä vain kerran, ja olettaa Google-- se super-popular-- Oletetaan, että miljardi ihmistä vierailla heidän kotisivun päivässä, tai jotkut joukko ihmisiä käy kotisivulla miljardia kertaa päivässä, montako tavua on, että ohjelmistosuunnittelija vain maksaa Google lyömällä hänen välilyöntiä kerran? 

Yleisö: [tahtiimme] DAVID J. MALAN: Ei aivan niin paha. Vain yksi tavu kertaa miljardi. joten A-- Yleisö: 8 miljardia gigatavua. DAVID J. MALAN: Ei 8 miljardia. 8 miljardia tavua. Mutta 1 gigatavu. 1 gigatavu olisi mittayksikkö. Jos hän tekee kaksi tilat, 2 gigatavua. Kolme gigatavua. Oikea? Se skaalaa kalliisti. Ja niin siinä tapauksessa, kuten Google, joka myönsi, ovat ääritapauksessa on olemassa muita asioita, jotka syntyvät vain tekemällä hyvin järkeviä päätöksiä tai ottamalla hyvin yksinkertainen ihmisen toiminnasta, koska sillä on tämä suurennettu vaikutusta. Joten yksi syy Tämä näyttää niin pakattuja Juuri Victoria said-- se oli vain syntyy tietokoneet muutenkin. Joten ei ole iso juttu. Anna selain tajuta se. Mutta se myös tarkoituksella ei ole paljon tilaa, koska tila ei ole tarpeen. Ja tila todella maksaa. 

Se joko maksaa aika, koska vain työntää että paljon enemmän tietoa ulos google.com pääkonttori vain on saanut kestää jonkin määrän aika, vaikka se on millisekuntia tai mikrosekuntia, mutta siinä on järkeä yli niin monet käyttäjät, tai todennäköisemmin, se luultavasti maksaa. Google todennäköisesti muodostaa yhteyden joku muu maailmassa, yksi Näiden peering pistettä, ja jos heillä on jonkinlainen taloudellinen suhde jolloin niiden tietojen maksaa, ne saattavat yhtä hyvin minimoida kuinka paljon tietoa he sylkeminen ulos niiden Internet-yhteys. 

Joten Hassua, vaikka viime kädessä tai ehkä rauhoittavaa asia, on, että vaikka tämä näyttää pahalta ylivoimainen, lopussa päivä, se on edelleen täsmälleen samoja periaatteita kuin tämä hyvin yksinkertainen sivu täällä HTML sivu. Joten vain yhteen ja jotta te on ensisijainen versio, jos et olisi Seuraavat mukanaan valinta täällä, täällä saattaisi olla kaikkein yksinkertainen web-sivuja, niin jotain leikkiä ehkä myöhemmin. 

No, käyttöön Pari muita ideoita nyt. Olemme ottamassa käyttöön jotain kutsutaan tyyli tag. Voimme tyylitellä tämä sivu useammalla mielenkiintoisella tavalla. Joten taas HTML email on kyse merkkauksen data, eräänlainen täsmennetään on selaimen miten rakenne tiedot, mihin se, CSS, tai CSS, on toinen kieli, joka yleensä saa sekoitettu HTML koska me see-- mutta voimme puhdistaa että jopa joka moment-- joka vie se viimeinen maili, ja se tyylittelee sitä. Se saa värit juuri oikea, fontin kokoa juuri sopiva, paikannus juuri oikea. Kyse estetiikka tai alustat, ei siitä perustavanlaatuinen tiedot itse. Ja helpoin tapa osoittaa tämä on ehkä esimerkkiä. Joten aion mennä yli minun yksinkertaisen tekstitiedoston. Ja aivan hetken kuluttua, minä kävellä meidät läpi prosessin tehdä tämä itse. 

Aion mennä takaisin minun tiedosto täällä ja lataa sivu juuri vahvistaa sen, mitä se näyttää. Se missä me olemme nyt. Tunnen lapset nauttisivat ottaa väriä tähän sivuun. Joten aion mennä täällä osaksi pään sivulla. Ja aion tehdä tyyli, / tyyli. Ja sitten sisällä tämän, aion kertomaan ruumiin minun page-- ja tämä muotoilu on kello ensisilmäyksellä, ehkä hieman outo mutta tavanomainen. Aion sanoa, että taustalla väri Tämän sivun pitäisi olla vihreä. Ja tämä on valitettavasti tavallaan ole paras design. Huomaa, että aiemmin maailmassa HTML, Sanoin, että attribuutteja nämä Avainarvoparit. Jotain yhtä kuin lainaus lainaus "jotain." Kun maailma CSS, joka oli suunnitellut joitakin erilaisia ​​ihmisiä, he päättivät, että niiden maailma, Avainarvoparit Olisi sana paksusuolen jotain. Joten se on sama idea, tosin. Se liittämällä arvo joidenkin keskeisten että jotenkin vaikuttaa käyttäytymiseen tällä sivulla. 

Ja arvata. Mikä on tämä luultavasti tehdä vaikka olet koskaan nähnyt HTML tai CSS ennen? Yleisö: Muuta taustaväri. DAVID J. MALAN: Joo, vaihtaa taustavärin. Ja erityisesti taustaväri kehon. Mutta sikäli kuin elin on nyt verkossa page-- se on ainoa asia, alapuolella otsikkopalkissa really-- se luultavasti vaikuttaa sama asia. Katsotaanpa. Säästetään tätä. Mene tänne ja lataa. Se on aika vastenmielinen. Ja mitä tapahtuu tässä sivuvaikutus. Olen juuri valinnut tämän kuvan sattumanvaraisesti. Miksi vihreä ei leviämässä takana Mickey? Yleisö: [tahtiimme] DAVID J. MALAN: Aivan. Käy ilmi, että kuvien, melko paljon kaikki kuvat, joita voisimme käyttää, ovat kaikki rectangles-- suorakulmioita. Vaikka Mickey on joitakin käyrät itsekseen ja on tausta, Tätä taustaa on jotain. Sen täytyy olla valkoinen. Sen on oltava mustia tai jotain muuta. Se voi olla läpinäkyvä. Ja itse asiassa, voisin avaa Mikki Hiiri täällä in ohjelma nimeltä Photoshop tai jotain vastaavaa ja muuttaa kaikki tuon valkoisen tausta läpinäkyväksi, niin, että vihreä voisi paistaa läpi. Mutta se on jotain, mitä olisi pyytää itsestäni tai graafikko tai suunnittelija minun yritys, esimerkiksi, tehdä, varsinkin kun minä vain lainattu tämä Internetistä. Mutta se, miksi tämä tapahtuu. 

Mitä muuta voisi haluamme tehdä? No, me haluta sanoa me todella toivon viihdyt. Ja korostetaan, haluan jotta tämä vahva, ja niin minä sanon auki vahva ja Sulje vahva ja lataa sitten. Ja se on hieman vaikea nähdä projektorilla mutta ehkä todella nyt hyppää ulos sinua hieman. Joten voit lisätä kursiivilla tässä tavalla, rohkea puolella tällä tavalla. Voisimme muuttaa väriä. Itse asiassa vain huvin, olen menossa mennä eteenpäin ja tehdä tätä. En todellakaan pidä siitä, miten minun kohdat ovat tässä lähellä toisiaan, joten voisin tehdä jotain tällaista. Aion kertoa selaimen, muuttua joka kohdassa tag on, Katsotaanpa say-- todella, tiedätkö mitä, katsotaanpa yhdenmukaistamiseksi text-align, keskus. Ja vielä, tiedän tämän vain koska joku opetti sen minulle tai Katsoin sitä ylös online viittaus. Joten anna minun pelastaa tämän. Ja ah, nyt olen keskitetty kuva siellä. Ja itse asiassa, tiedätkö mitä, jos Voin siirtää kuvan kappaleen tag-- joten kolmas kappale, vaikka se ei ole tekstiä. Säästetään että ja ladata. Nyt sivu alkaa näyttää laatuaan soita näin Siis, se on edelleen melko ruma, mutta ainakin se näyttää vietin Kahden minuutin sijasta yhden minuutin tehden. 

Ja niin, vähitellen, voimme tehdä nämä esteettisiä muutokset nyt sivulle? Olen oikeastaan ​​muuttanut tiedot sivu muuta kuin lisäämällä sana todella. Olen lisännyt metatietoja, jos haluatte. Hei, selain, tee Sana "todella" rohkea. Mutta tiedot eivät ole vahva. Se metadata. Tiedot on "todella". Joten meillä on vielä joitakin samoja käsitteitä kuin ennen. Nythän tämä ei ole verkossa, joten aion tehdä yksi viimeinen vaihe tässä. 

Aion mennä hello.html ja juuri esiin ja kopioi tähän. Ja nyt aion mennä Cloud9, joka Minä opastaa aivan hetken. Ja kertoimet ovat voit pian, jos ei jo kello seuraavanlaisen näytön. Ja haluan vain antaa sinulle nopean kierros mikä Cloud9 todellisuudessa on. Joten jälleen pilvi 9 on Tämä pilvi-pohjainen palvelu joka antaa sinulle ja minulle illuusion joilla on omia virtuaalikone pilvessä, teknisesti kontti pilvessä, että meillä on täysi järjestelmänvalvojan oikeudet. Joten teoriassa, kukaan muualla maailmassa on pääsy näytön olen katsomalla juuri nyt, paitsi ehkä ihmiset jotka pyörittävät sivustolla, koska teknisesti ne ovat fyysinen pääsy ja niin edelleen. 

Joten mitä me näemme tässä ympäristössä? Aion loitontaa koska se on vähän pieni. Ja haluaisin vielä sanoa yli täällä vain hetken. Vasemmalla puolella minun ja sinun näyttö, siellä on tiedostoselain vasemmalla. Joten samanhenkinen Mac OS ja Windows. Nämä ovat kaikki tiedostoja tililläni. Ja oletuksena, jos tili on kuin minun, näet tai pian nähdä helloworld.html ja readme.md. Tänne oikealla, tämä on missä minun tekstitiedostoja eivät mene. Jos olet koskaan käytetty Microsoft Word tai Notepad tai TeXturi, tämä on sana minun muokkausta Tiedostojen ei mene. Ja sitten kaikkein mystistä piirre tässä ympäristössä että emme todellakaan tarvitse käyttää on täällä kutsutaan Terminal Window. Jos olet käyttänyt DOS menneen, tämä on Linux tai Linuxin vastine DOS. Se on tekstipohjainen interface-- no hiiren napsautuksella, ei vetämällä. Kaikki mitä voi tehdä on kirjoittaa komentoja, mutta ne komennot voi luoda tiedostoja, siirtää tiedostoja, avoin hakemistoja, lähellä hakemistoja, tehdä mitään monia asioita. Mutta nyt, me vain aikaamme täällä. 

Ja niin tehdään tämä. Jos olet tässä ympäristö, joka sinun pitäisi olla, jos luonut työtilan jo, mennä eteenpäin ja vain mennä ylös tiedostoon, New hetkeksi. Ja joka antaa sinulle uuden välilehti täällä keskellä. Ja minä just-- ja lähdetään mennä eteenpäin ja tehdä tätä. Mennään eteenpäin ja nyt eivät File, Save ja mennä eteenpäin ja kutsua sitä hello.html, ei pidä sekoittaa helloworld.html, joka mukana uusi ilmainen tili, joka on vain näyte tiedosto. Näet sen yhtäkkiä, todennäköisimmin vasemmalla puolella, ja välilehti on edelleen auki. Ja haluaisin rohkaista teitä nyt luoda tämä tiedosto tai jokin variantit. Ja jos oikein näe sitä on näyttö, tämä on sama kuin liukuu että olet todennäköisesti toisessa välilehdessä. 

Joten lyhyt, tee ensimmäinen web-sivun, tallentaa sen, ja sitten vain hetken, Näytän sinulle, kuinka voi todella tarkastella tätä. Mutta muuttaa ainakin yksi asia. Muuta helloworld kohteeseen jotain oman valinnan, niin että olet varma, että se on sinun tiedosto eikä minun juuri luotu. Selvä. Ja kun olet ready-- no rush-- kun olet valmis, mennä eteenpäin ja tallenna tiedosto Kun olet tehnyt nämä muutokset. Ja jos klikkaat Suorita painikkeen ylös, tämä pitäisi avata uuden välilehden, joka kertoo mitä URL voivat käydä tiedoston, mutta se saattaa kestää hetken lainaus lainaus "aloittaa Apache", joka on nimi web-palvelimelle. Joten ole varovainen tekemään juuri mitä tiedostoon lopulta. Joten juuri nyt, minä suurentaa. Jos minä alkaa kirjoittaa open-kiinnike HTML, ilmoitus se kehotukset minua päätän ajatus. Ja jos päätin ajatus, se automaattisesti antaa minulle sulkeminen tag. Mutta odotus on sitten minä lyödä Anna, ja sitten siirtyä sisälle sinne ja tehdä pää sisälle ja sitten teen kehon sisälle. Ja se on vähän outo aluksi, koska se tekee työtä sinulle, mutta ymmärtää, että viime kädessä se säästää painalluksia. Ja itse asiassa hyvin yleinen piirre ohjelmointiympäristöjä näinä päivinä sekä web-kehitys, kuten Tämän ja ohjelmointia, joka me puhumme huomenna, nämä automaattinen täydennys ominaisuuksia, asioita, jotka vain sallivat ohjelmoija tai suunnittelija kirjoittaa vähemmän näppäinpainalluksia tehdä saman asian. Joskus se on hyvä, vaikka. Joskus se on vain ärsyttävää. Ja jälleen, kun olet puhtaaksi dia tai jonkin sen variantti, voit valita Suorita ylös. Ja sitten pohjaan ikkunassa, sinun on ilmoitettava mitä URL voit käydä web-sivulle. Mine, esimerkiksi, on business-daharvard.c9users.io ja niin edelleen. Selvä, niin, anna me-- kysyttävää? Muita kysymyksiä vain saada tämä toimi ennen lisäämme ominaisuuksia? Ja haluan ehdottaa, vain saada ihmiset comfortable-- koska se on yksi asia vain copy-paste sokeasti, mitä olen tehnyt. Mutta juuri niin, että ihmiset painivat jossa on ainakin yksi tehtävälistan Aion päälle musiikkia. Aion ehdottaa luetteloa mitä voi mahdollisesti lisätä. Ja voit varmasti käyttää Google. Ja miksi emme vain ehdottaa, että yrität ratkaista ainakin yksi erityinen ongelma täällä. Joten kannalta tunnisteet, haluan uudelleen täällä. 

Oikeastaan ​​Sanon sitä tekstimuodossa. Oletetaan, että joukossa tunnisteet voisimme käyttää tässä on joitakin tunnisteita täällä. Olemme nähneet kappaleen tag. Nyt se tulee automaattinen täydennys. Edellä tag, ankkuri tag. Sanotaan haluat tehdä jotain suurempaa, joten voisi like-- span tag voi auttaa. No, saatat tarvita apua että vain hetken. Olemme nähneet div. Näet siellä taulukossa. Siellä jotain kutsutaan tr, td. Th, td. Palata siihen hetken kuluttua. Mitä muuta voisi olla kätevä? On vahva. On korostettava, tai pikemminkin em. There's-- mitä muuta ehkä haluatte täällä? No, otamme katsokaa että yhdessä. Muoto, jonka olemme nähneet. On muodossa. On tulo ja muutama muu. Selvä, joten tehdään tämä. Vastata Victorian kysymys, haluaisin ensin vain varmista, että jokainen on pysty hankkimaan hei työ. Sitten haluan esitellä pari muita ideoita. Sitten kerromme ihmiset ratkaista joitakin ongelmia omasta. Sitten me todella tulla takaisin tätä käsitystä lomakkeen, ja me todella uudestaan ​​toteuttaa yhdessä front-end käyttöliittymä, niin sanotusti, Google itse. Käytämme Googlen loppupäätä ja anna ne tekevät kovaa työtä, etsimistä, mutta me uudelleen etupään Googlen ja hakulomake että niillä on omat kotisivun. Ja niin me palaamme nämä tagit vain hetken. 

Joten tämä oli mitä ehdotti juuri äsken. Voimme lisätä stylization on sivu sisällä tätä tyyliä tag, ja voimme stylize taustalla väri, tekstin tasausta, onko se keskelle tai vasemmalle tai oikealle. Mutta hyvin nopeasti olisit löytää tai web-suunnittelija huomata, että tämä on hieman kankea, koska teet mitä nimeltään sekoittamalla sisältöä kanssa esittämismuodosta. Sinä miksaamisessa tiedot ja estetiikka viipymättä. Ja itse asiassa, jos otetaan huomioon mitä tulee tapahtumaan yli time-- tämä on hyvin pieni Web-sivun, tietenkin. Mutta jos voin lisätä sisältöä tälle sivulle ja lisään tyyli tälle sivulle, Sivun hyvin nopeasti saa pidempään ja pidempään. Ja olettaa, että haluan on toinen Web-sivu, jakaa joitakin näistä ominaisuuksista. Oletetaan toinen sivun omalle site-- myös, haluan kaiken keskus, ja olen myös haluavat kaiken vihreä tausta. Olen aika paljon täytyy kopioi ja liitä joitakin näistä linjat tuohon toinen tiedosto, joka tuntuu hieno. Se ratkaisee ongelman. 

Mutta mitä jos haluan kolmas sivu tai 30 sivun tai 40 sivun? Nyt aion olla kopiointi ja liittämällä paljon päällekkäisiä koodin useita tiedostoja. Ja niin oletetaan, että Päätän tai olen kertonut, hei, emme käyttämällä vihreä tausta enää. Aiomme alkaa käyttää oranssi. Mitä sinun täytyy vaihtaa? No, sinun täytyy vaihtaa että tyyli vihreästä oranssiin, montako? Kuten 30 tai 40 paikkaa. Se on ikävä. On virhealtista. On useita syitä jossa et halua houkutella tällaista kipua itse. Ja niin eikö olisi mukavaa jos voisimme ottaa mitä juuri laittaa näiden kahden keltaisen tunnisteet, nämä tyyli tunnisteet, tekijä sen pois, ja laittaa kaikki minun stylization yhdeksi keskeinen tiedostoon että kaikki 30 tai 40 minun muita tiedostoja lainata tai jotenkin viittaus, ei toisin verkottumisen kaaviot teemme ennen? 

Joten jos menen tänne, olen menossa todella ehdottaa että korvaamme tyyli tag jotain nimeltään link tag, joka on hirvittävän, kauhistuttavan nimeltään, koska et käytä link tag luoda mitä me ihmiset tiedämme linkkinä web-sivulle. Siihen käytät joka tunnistetta? Miten luodaan linkki web-sivulle? Yleisö: A. DAVID J. MALAN: A-, tai ankkuri tag, joka meni Disney ennen. Linkin tunniste täällä sanoo this-- linkki tiedostoon styles.css, suhde, joka tulee olemaan, että se on minun stylesheet. Joten tämä on yksi S: n CSS-- CSS. Style sheet-- kaksi S: n CSS. CSS tyylisivu. Tämä tarkoittaa vain sitä, hei, selain, siirry löytää styles.css paikallisen palvelimen ja käyttää sitä tyylitaulukko, mikä tarkoittaa sisällä tiedoston tulee olemaan kaikki stylizations että olemme juuri tehneet. Ja mitä sitten, että tiedosto voisi näyttää tämä. Ja minä vain tehdä tämä lyhyesti Esimerkiksi koska emme tarvitse päästä liikaa rikkaruohoja täällä. Mutta jos voin kopioida tämän, mitä olen ehdottanut että ohjelmoija luoda uuden tiedoston, liitä ne lines-- whoops-- liitä nämä rivit, tallentaa se styles.css, ja sitten, vuonna toinen tiedosto, poista kaikki tämä ja korvata se sen sijaan Tämän link tag. Niin että jos liitän href = "styles.css", suhde on "stylesheet" sulje tag. Tallenna se. Mene takaisin minun helloworld. Päivitä. 

Kirjaimellisesti mitään ei ole tapahtunut. Se on hyvä asia, koska se tarkoittaa sitä oikeastaan ​​kaikki työ. Todistaakseen niin paljon, kai tehdä typo, ja Kutsun tätä "styles.css" isolla S, joka on virheellinen, ja sitten uudelleen. Nyt voit nähdä se vain ei toimi. Nyt miksi? No, käytä tekniikka aiemmista. Anna minun mennä eteenpäin, ja selaimessa, Chrome, olen avaakaan että erityistä verkko-välilehti kuten ennenkin, ja anna minun lataa sivu. Mitä et ole yllättynyt nyt? Tai ehkä olet yllättynyt nähdä sen. Joko niin, mitä näet nyt? Yleisö: [tahtiimme] DAVID J. MALAN: Se ei ole löytynyt. Miksi se ei löytynyt? No, Styles.css-- pääoman S-- ei ole olemassa. En väärin nimetty sen. Yksinkertainen kirjoitusvirhe. Mutta Saan ymmärrettävästi nyt 404, koska palvelin sanoo, hei, se ei ole löytynyt. Kirjaimellisesti, en tiedä jos tämä tiedosto on. Niin tuloksena selain näyttää, mitä se voi, raaka sivun sisältöä, joka oli 200 HTML-, mutta stilisointi voi lisätään sen jälkeen. Ja tämä on mitä tarkoitetaan CSS. Voit tavallaan lisätä sen jälkeen, ja se tavallaan jalostaa estetiikka sivun. Ja voit jopa ohittavat tyylejä vielä muissa tyylitaulukkotiedostot jos haluat. Se ei ole löytynyt, mutta tässä tapauksessa, koska tietenkin olen väärin nimetty sen. Joten olisin korjata, että ensin. 

Joten mene eteenpäin ja ehdottaa seuraavaa. Mennään eteenpäin ja tehdä tätä. Alkaen ehkä sinun helloworld tiedosto, haluan vain kutsua pari of ominaisuus ehdotuksia. Joten, Victoria, halusitte tehdä tekstiä suurempi, eikö? Selvä, niin voimme do suurentaa tekstiä. Ja me jokainen nyppiä pois vain yksi ongelma ratkaista. Suurentaa tekstiä. En aio vaivata kirjallisesti tämän, kun on luoti teknologia oikeus tänne. Joten joitakin ongelmia. Joten aiomme kokeilla tehdä tekstistä isompi. Selvä. Mitä muuta voisi joku ehdottaa? Mitä muuta voisi haluamme tehdä web-sivulle? Oletetaan keksiä lyhyt lista asioista ja sitten siirtää ryhmä kuva tästä. 

Yleisö: [tahtiimme] 

DAVID J. MALAN: OK, kannan tekstissä eri puolille? Selvä. Jotain muuta. 

Yleisö: [tahtiimme] DAVID J. MALAN: On. Joten gif on vain eri tiedostomuodossa. Olemme juuri käytetty, mitä, joka on png tai jpg todennäköisesti? Käytimme jpg. Jos haluat tietää, liiallinen vastaus kysymykseesi on jpg käytetään yleensä valokuvia, koska se tukee miljoonia värejä tai 24-bittinen väri. GIF käytetään yleensä, kuten, internet-ilmiö nämä days-- animaatiot, kuten animoituja gif. Mutta se tapahtuu käyttää pienempää väri paletti, vain 256 mahdolliset värit, mutta se tukee läpinäkyvyyttä ja animaatiota. Ja sitten on png, joka tukee avoimuutta ja enemmän värejä mutta ei animaatiota. Joten se kompromissi. Joten lisäämällä gif, vaikka, olisi toiminnallisesti vastaa lisäämällä png tai jpg. Joo. Kuvan lähde on yhtä. Joten jotain muuta. Oletetaan keksiä jotain lähetimme Victoria tehdä täällä. 

Yleisö: Lisää painikkeet lomakkeen. DAVID J. MALAN: OK. Joten lisätä painikkeet lomakkeen. Ja teemme että yksi yhteen. Niin, että tulee olemaan täydellinen segue heti tämän haasteen. Mitään muuta? Mikä voisi haluat tehdä? Raina tuntuu erittäin underwhelming jos tämä on kaikki, mitä voimme tehdä. Yleisö: Muuta tekstin väriä. DAVID J. MALAN: Muuta mitä? Yleisö: Color tekstin. DAVID J. MALAN: Muuta tekstin väriä. Selvä. Joten, tehdään tämä. Juuri uudelleen niin, että et ole, vain ulkoa, tekee täsmälleen mitä teen, Aion päälle musiikkia for ehkä viisi minuuttia täällä. Olet tervetullut käyttämään Google. Olet tervetullut kysyä minulta, ja Minä kuiskata vihje korvaan. Olet tervetullut katsomaan yli muiden olkapäiden. Mutta ratkaista vain yksi näistä ongelmista. Mutta me teemme viimeinen, muodostaa yhden, jos voisimme yhdessä. Joten viisi minuuttia ratkaista Jonkin näistä ongelmista Google, intuitio, tai muita keinoja käytettävissä. 

[MUSIIKKIA] Selvä. Ei hätää, jos haluat pitää puuhastelun, mutta minä pilata pari näistä vastauksista. Joten ensimmäinen vihjannut Victoria oli tehdä tekstistä isompi. Joten siellä on muutamia tapoja tehdä tämä. Olen tällä hetkellä palautettu näytössä tähän kokoon, vaikka olen zoomataan keinotekoisesti vain nähdä asiat. Ja tehdään tämä. Anna minun mennä eteenpäin ja napata joitakin yleisiä Latin text juuri niin meidän täytyy jotain työtä. Joten anna minulle vain hetken ajan. Teen kolme kappaletta. OK. Tämä tulee olemaan parempi esimerkki. Joten utelias, vuonna minun hello.html, minä vain liitetty kolme järjetön Latin kohdat juuri niin meillä on joitakin tekstiä työskennellä. Ja Victoria tavoitteena oli tehdä osa tekstistä isompi. Niin voisin, kuten ennenkin, mene tänne. Ja anna minun tehdä se oikealla tavalla. Aion olla linkki tunniste, joka osoittaa tiedostoon nimeltään "styles.css," suhdetta joista on jälleen "stylesheet." Ja sitten aion paitsi että ja avata tämä "styles.css." 

Joten, kuten ennenkin, olen pätevyydestään tällä CSS-tiedosto todella ohittaa oletuksena estetiikka web-sivun, ja oletuksena estetiikka, tietenkin, ovat melko tylsä. Se on tavallaan normaali fontin kokoa, musta teksti, valkoisella taustalla, ja niin edelleen. Joten kai halua tehdä kaikki tämän tekstin isompi. Voisin tehdä muutamia asioita. Minun styles.css tiedosto, I Voisi sanoa, tiedätkö mitä, sovelletaan seuraavaa ruumis sivuni. Mene eteenpäin ja tehdä kirjasinkokoa 24 pistettä, joka on määrä voisin käyttävät Microsoft Word. Anna minun mennä takaisin minun web sivu täällä ja lataa, ja voit nähdä, että se on jo paljon suurempi. Ja voimme saada hieman hullu, aivan kuten voimme on desktop-- tekevät 96 pistettä. Päivitä. Ja se alkaa hieman kankea tässä vaiheessa. 

Mutta en voisi olla hieman tarkempi. Asemesta soveltaa tyylitaulukkoa ruumiin sivuni mitä muuta voisi Haen sitä sen sijaan, mitä muut tunniste, joka voisi edelleen toimivat samalla tavalla? 

Yleisö: p tag? DAVID J. MALAN: P tag. Joten pää ei olisi oikea, koska pää, et voi oikeastaan ohjata estetiikkaa. On joko tekstiä siellä tai ei. Mutta p tag-- voin sukeltaa hieman syvemmälle, niin sanotusti, että kappale tunnisteita. Ja vaikka on kolme, se täysin kunnossa, koska CSS, kun minä vain sanoa "p", tämä tarkoitetaan sovelletaan seuraavia tahansa tunniste, joka vastaa tätä , valitsimen vain on nimi tunnisteen. Joten missä näet "P", sovelletaan fontin kokoa, ja tehkäämme siitä kohtuullinen again-- 24 kohta. Ja tiedätkö mitä, vain hyvä toimenpide, Tehdään väri punainen juuri tällä hetkellä. Ja nyt jos minä ladata, nyt nähdä kolme ruma kohdat. 

Mutta nyt olettaa, että olen tavallaan soita näin Haluan ensimmäisessä kohdassa hypätä ulos käyttäjä. En halua vain kasvaa fonttikokoa kaiken. Ja niin minä todella haluavat tunnistaa tai erotella nämä kohdat. Joten päästä eroon punainen, koska se on juuri sellainen tahmea, ja mennään eteenpäin ja tehdä font size 12 pisteen oletuksena, niin että olemme takaisin jotain hieman järkevämpi. Ja nyt haluan vain lisätä fonttikokoa ensimmäisen kohdan. Voin tehdä tämän muutaman tavalla, mutta tavalla, joka on ehkä kaikkein neuvonta klo hetki on tehdä seuraavaa. Anna minun mennä eteenpäin ja sanoa, tämä kohta on yksilöllinen tunnus on "ensin." Voisin kutsua tätä mitä haluan. Voisin kutsua tätä "foo" tai mikä tahansa muu sana, mutta aion antaa sille semanttisesti mielekkäitä nimi kuten "ensimmäinen". Tämä on yksilöllinen tunniste, ID, minun ensimmäinen kohta. 

Mitä voin nyt tehdä minun tyylitiedoston on olla hieman tarkempi. Sen sijaan, että sanonta, sovelletaan seuraavat p tag, Voin sanoa following-- sovelletaan seuraavaa, tai valita, HTML-elementti että on yksilöllinen tunnus on "ensin." Mitä haluan soveltaa sitä? Kirjasinkokoa 24-pisteen. Olen siis kaksi valitsinta nyt. Yksi tekee kaikki kohta 12 pisteen. Mutta tämä yksi, varsinkin kun se tulee second-- se tulee viimeiseksi file-- tämä on CSS vaikutus. Olen juuri tehnyt kaikki omat kappalemerkkaukset 12 pisteen, mutta tämä nyt kaskadeja ja ohittaa että kaikkien elementtien sivulla, mikä tahansa tag sivun, jonka yksilöllinen tunnus on lainaus lainaus "ensin." Ja hashtagin tässä yhteydessä tarkoittaa vain "yksilöllinen tunniste." En laita sitä HTML-tiedoston. I, tänne, sano lainaus lainaus "ensin." 

Joten anna minun ladata. Nyt näen, ah, OK. Siis, se ei ole niin kaunis, mutta se on eräänlainen samankaltaisten esipuheessa on kirjan tai jotain, jossa ensimmäinen kappale on suurempi. Voisi olla vielä tarkempi kanssa vain ensimmäiset kirjaimet, mutta ainakin Olen käyttänyt enemmän valvontaa. Nyt maybe-- ehkä halua tehdä tätä joskus jostain syystä, joten en halua tätä koske vain HTML-tunnisteen. Pikemminkin nyt say-- katsotaanpa myös toimi seuraavasti. Class = "tuonti". Kun taas ID käytetään yksilöllisesti tunnistaa yksi asia, yksi tunniste, Web-sivun, luokan on tarkoitus olla käyttää missä tahansa useita osia tai tunnisteita Web-sivulla. Joten se käyttää uudelleen. ID ei voida käyttää uudelleen. Luokka on uudelleenkäytettäviä. 

Ja tiedätkö mitä, mistä tahansa filosofinen reasons-- En päätän thought-- aion sanoa että ensimmäisessä kohdassa ja toinen kohta ovat tärkeitä. Joten aion soveltaa luokan nimeltä "Tärkeää", että jos voin tallentaa tiedoston ja lataa ei toiminnallinen vaikutus vielä. Mutta olen lisännyt metatiedot tiedostoon, tavallaan jotain erillisten ytimestä tiedoston tiedot, niin että nyt minun tyylitiedoston, jos olen sen sijaan sanoa ".important" - tiedätte, mitään, on tärkeää, olen aikoo tehdä fontin värin, red-- tai pikemminkin ei fontin väriä, vain väri. On epäjohdonmukaisuuksia CSS valitettavasti. Ja uudelleen. Huomaa nyt ensimmäistä kaksi kohtaa ovat punaisia mutta ei kolmannella, koska olen vain sovelsi luokka "tärkeä" kahteen ensimmäiseen näistä asioista. 

Joten tunnukset, sinulla on kyky määritellä hyvin tarkasti. Luokat, olet uudelleenkäytettävyys. Mutta kummassakin tapauksessa, huomaa eräänlainen hyvän suojan periaatteen jossa olen laskelmiin pois kaikki estetiikka minun styles.css tiedostoon. Joten mitään messiness täällä. Ei ole mainintaa punaisia ​​tai lihavoitu päin tai kirjasinkokoa tähän tiedostoon. Pikemminkin Minulla on semanttisesti, mielekkäästi tunnettu tietoni niin, tässä on joitakin tärkeitä tietoja. Tässä on lisää tärkeitä tietoja. Lisäksi tässä on "Ensimmäinen" minun tärkeitä tietoja. Joten HTML on kyse tavallaan koodaus, kirjaimellisesti, sanat ja kohdat ja konstruktioita omassa sivun näitä pikku vihjeitä, jos tulee, että voit jotenkin hyödyntää käyttämällä muita tekniikoita kuten CSS tällä tavalla. 

Joten vastauksena Victorian kysymykseen, Voimme suurentaa tekstiä tällä tavoin. On niin monia muitakin tapoja, mutta fontin tag-- alkusulkumerkki "font" - on itse asiassa useita vuosia vanha. Ja tämä on ongelma, liian kanssa luottaen vain online resources-- niillä on taipumus olla vanhentunutta. Ja todellakin, joka on poistettu käytöstä, koska maailma toteutuu, Mitä "font-size = 7" tarkoittaa? Se ei ole. Ja niin monta vuotta ja Tämän day-- yksi puoli huomauttaa tässä, että se on todella erittäin tuskallinen vielä joskus kehittää sivustoja Web, koska Microsoft ja Google ja Mozilla ja toiset usein eri mieltä siitä, miten tulkita erittely kuten HTML. 

On sääntökirjaa HTML että yleensä kertoo mitä kukin tag tarkoittaa. Mutta joskus se jätetään täytäntöönpano harkinnan mukaan Microsoftin harkinnan ja Google. Ja joten sinun usein katso verkkosivuilla jotain näyttää erilaiselta PC kuin se Macissa ja se on todella koska, päivän päätteeksi, he eivät koe sitä hyvin molemmilla alustoilla. Mutta se on myös siksi kohtuullista, älykkäät ihmiset ovat eri mieltä ja yritykset ovat eri mieltä, ja niin yksi haasteista ohjelmoinnin web tai suunnittelu asioita verkossa kirjoittaa sivuston tavalla joka toimii jokaisessa verkkoselain. Mutta vaikka se on kohtuutonta, eikö? On niin monia versioita niin paljon selaimet siellä, että jossain vaiheessa, sinun on myös tehdä arvostele ja sinun on päätettävä yrityksenä, erityisesti sähköistä kaupankäyntiä-style sivustot, joissa olet yrittää käyttää uusin ja suurin teknologioita antaa todella hyvä käyttäjä kokea. Mutta jotkut prosenttiosuus käyttäjät saattavat silti käyttää Internet Explorer 6 tai 7 tai 8, erityisesti riippuen maa, että he tulevat. 

Ja niin hyvin yleisesti keskusteltuja on jotain kuten "web-selaimen tilastot." Ja jos mennään to-- katsotaanpa Wikipedia ja nähdä kuinka ajan tasalla tätä taulukkoa on jos on yksi. Joten tässä näette selainten todella ovat, mukaan joulukuuta 2015 mukaan Yhdysvaltain hallituksen. Chrome on 42%: n markkinaosuus, jota seuraa IE pitkälti yritysten asetuksista tai PC-asetukset, tietenkin, jonka jälkeen Firefox, Sitten Safari ja Opera ei Kartan saa täällä jostain syystä, ja sitten ym. Ehkä se on alle Muut. Mutta ongelmallisempaa kuin is-- Katsotaan, jos Wikipedia on myös versiot selaimista version-- 

Mennään selaimen tilastoihin. IE. Edes tämä ei riitä. Selain tilastot. Omat versio. Se ei tule olemaan oikeassa. Katsotaan versioita. Selaimen markkinaosuus. Katsotaan tämä tulee esiin. OK. Nyt tämä on tulossa hieman enemmän hyötyä. Joten tässä, huomaa, että meillä on kaikki eri versioita selaimista. Ja luoja, jos look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45. Siis, selaimet yhä päivitetty, ja joskus jotkut näistä muutoksista ovat merkittäviä kannalta toiminnallisuus. Ja niin jossain vaiheessa, tuotepäälliköt tai insinöörien täytyy tehdä decision-- teille tiedä mitä vain 1% maailman on edelleen käytössä IE 7. Helvettiin niiden. Me vain aio tukevat tätä selainta. Ja mitä se tarkoittaa ei tukea? Se saattaa tarkoittaa, että napit eivät toimi Web-sivulla, tai se voisi merkitä alustus on täysin pois päältä. Tai ehkä täytyy tehdä että sama arvostele mobiili näinä päivinä, jossa olemme aio tukea IOS 5 enää. Joten ihmiset vain täytyy päivittää. Tai emme aio tukea Cupcake Android OS Android-laitteille, koska sillä world-- kuin tech maailma haluaa siirtyä eteenpäin, se tavallaan haluaa vetää maailma sen kanssa niin, että ne eivät on edelleen taaksepäin yhteensopiva niin ne voi tarjota uusia ja hyviä ominaisuuksia. Tämä on todellakin yksi syy miksi niin monet yritykset ovat tuloaan automaattiset päivitykset ja tavallaan pakottaa uusimmat versiot ohjelmisto meille. Ja jopa yritykset kuten Apple tavallaan pakota melkein tai pakottaa sinulle kannalta markkinavoimien ostaa uuden puhelimen, koska ne vain ei päivittää vanhan puhelimen enää. Joten te missaa uusin ja suurin ominaisuuksia, koska se on kallista heille kuin Yhtiö säilyttää vanhempia, luultavasti huonompi ohjelmistoversioita. Mutta nettovaikutus on, että Kärsimme tästä. 

Joten katsomaan juuri Muutaman lopullinen asioita täällä. Oletetaan pölliä todella nopeasti joidenkin nämä muut luodit, jos utelias. Joten jos yritit, Esimerkiksi asema Tekstin eri puolille sivu, aion tehdä yksi nopea tapa, mutta on eri tapoja tehdä tätä. Anna minun mennä eteenpäin ja eliminate-- yksinkertaistamiseksi seuraavasti. Anna minun vain mennä takaisin minun yksinkertainen, yksinkertainen kohdat. Anna minun mennä takaisin minun styles.css. Ja olen juuri menossa käyttää simple-- jotka ehkä nähnyt Googlessa tai muistamme earlier-- text-align oikeassa. Ja lataa tämä sivu. Nyt kaikki näyttää olla oikeassa linjassa, kuten ehkä nähdä sen yläpuolella täällä. 

Voimme tehdä se näyttää hieman kirjan kaltainen, ja voimme sanoa "oikeuttaa" ja lataa. Nyt on mukava yleinen molemmin puolta, joka on tavallaan mukavaa. Toinen tavoite, joka meillä oli täällä oli muutos tekstin väri. Joten näimme, että minun punaisella tekstillä. Ja nyt lisätä painikkeita muodossa. Joten miksi emme yritä tehdä juuri näin? Ensin kuitenkin mennä sivuston, joka useimmat meistä käyttävät joka day-- Google. Ja lähdetään katsomaan miten Google todella toimii. Mutta aion tehdä tämän. Ensinnäkin haluan tehdä sen in-- juu, anna minun mennä ensin Googlessa. Aion mennä Google-asetukset, koska haluan poistaa jotain kutsutaan Instant tulokset. 

Joten ehkä huomannut Google nämä days-- anna minun mennä takaisin ja kääntää tämän päälle. Jos siis aloittaa for "kissat" näin, huomata, että eivät ainoastaan Saan automaattinen täydennys up top, yhtäkkiä, itse sivu näyttää muuttuvan melko nopeasti myös, ja se Google käyttää kieltä kutsuttu JavaScript yrittää olla avuksi. Mutta valitettavasti se laji of sotkee ​​keskustelumme siitä, mitä todella tapahtuu alla huppu täällä. Olen siis juuri sellainen nopeasti Sammuta instant tuloksia. Ja aion valitse Tallenna. Ja nyt aion avata että diagnostiset työkalurivi että minä pitää aukko alle Verkko-välilehteä. Joten tehdään tämä. Let me-- whoops-- selaa tämä alas hieman. Ja haluaisin etsiä "kissoille." 

Ja nyt notice-- todella, Tämä on hyvä tilaisuus keskustelemaan hetkeksi. Huomaa hetkellä olen type-- lopettaa sen. Lopeta. OK. Huomaa hetkellä olen kirjoittaa kirjeen C, katsella näytön alareunaan. A- T- S. Mitä pohjaan Tämän näytön, minun Verkko-välilehti, ehdottaa tapahtuu jokaisen aika kirjoitan kirjeen? Valitettavasti sammakko on hyvin häiritseviä tänään tai Shamrock tai mikä hän on. Mitä tapahtuu joka kerta olen kirjoittanut? Ja haluan tyhjentää puskuri ja kirjoita se uudelleen. So-- oho. Joka kerta kun kirjoitat kirjeen, C- A- T-- joten uusi rivi tietenkin pitää näkymisen. Mitä kukin näistä rivit edustavat, sen perusteella, mitä olemme nähneet ja keskustellaan tähän mennessä? Yleisö: Haku? DAVID J. MALAN: Haku, tai enemmän yleisesti, HTTP-pyynnön minun selaimen palvelimelle. No, miksi selain tekee HTTP pyytää joka kerta kun kirjoittaa kirjeen? 

Yleisö: [tahtiimme] DAVID J. MALAN: Joo, se antaa minulle nämä automaattinen täydennys tuloksia. Kuten, jos nämä hakutulokset tulevat? No, joka kerta kun kirjoitat kirjain, Google lähettää enemmän ja yhä enemmän sana Olen kirjoittamalla. Miksi? Koska he haluavat antaa minulle paremmin ja paremmin, parempi ehdotus, ehdotusluettelon, mitä sana Yritän todella valmis. Joten tämä on sanoa kirjaimellisesti jokaisen merkki kirjoitettaessa Google lähetetään, lopulta irtotavarana, mutta myös joskus yksi kerrallaan, jotta voidaan toteuttaa Näiden automaattinen täydennys biometrisiä data on tietenkin verkossa. 

Nyt, katsomaan mitä todellisuudessa tapahdu, kun osoitan Google Search. Ja sitten me hyödyntää sitä itse. Jos siis selaa nyt hyvin Ensimmäinen pyyntö, että juuri tapahtunut. Huomaa seuraava. Se lähetettiin melko pitkä URL-- https://www.google.com/search? ja sitten koko nippu tavaraa. Katsotaan tämä todella nyt selaimen välilehti itse. Lähdetään eroon työkalupalkin täällä. Tässä sivun hakutulosten. Ja ilmoitus tässä on URL. Nyt arvata mitä täällä tapahtuu osittain. Joten ensiksi määritelmä. Tämä ilmeisesti on määränpää jos lomake lähetetään. Kun siis kirjoitetaan ilmaisu "kissat" ja paina Enter, ilmeisesti Google lähetetty minun tekstinsyöttöä tähän URL että olen korostanut siellä, slash haku. Osoittautuu, joka URL, mitään, tapahtuu sen jälkeen, kysymysmerkki on, kun pidämme sanomalla, joka on avainarvoparin joka oli kirjoitettu muotoon tai jotenkin lähetetään selaimen palvelimelle. 

Joten tahansa kirjoitat syöttää muotoon Webissä ja se lähetetään olemme keskustelleet kautta get, yksi näistä virtuaalisista kirjekuoret, sisältö Kyseisen envelope-- kyllä, pidä saada täytetyt fyysisesti kuoreen luokassa tänään, mutta teknisesti se tosiasiallisesti URL. Joten itse asiassa haluaisin käydä läpi tätä. Missä näet käyttäjä syöttää? Missä näet jotain että olen itse kirjoittanut tänne? Niin, niin "kissat." Oikea? Joten anna minun tislata tämän joksikin yksinkertaisempi. Aion poistaa kaiken Tämän URL-osoitteen, että en ymmärrä, ja olen juuri menossa lähteä se this-- / search? q = kissoja. Näemme missä q tulee hetken, mutta joka tuntuu pienin määrä tietoa, että olen säädetty. Ja nyt aion Enter. Ja huomaa se toimii edelleen. Olemme silti saada takaisin koko joukko kissoja. Joten Google on hienompaa kuin tämä näinä päivinä. Se 2016 ei 1999. Joten ei muuta tavaraa, että minun selain lähettää palvelimelle. Mutta tämä on minimaalisesti kaikki se tarvittava. 

Joten mitä tapahtuu? No, haluan ensin mennä eteenpäin ja mennä takaisin Cloud9 ja anna minun mennä eteenpäin ja sulje välilehtiäni aikaisemmin. Ja Teen tämän minun omistavat vain hetken. Aion mennä eteenpäin ja luo uusi tiedosto. Ja aion tallentaa sen google.html. Ja aion hyvin quickly-- Aion varastaa, itse asiassa, osa tästä tekstistä vain säästää aikaa. Aion liittää tämän tänne. En aio vaivata tahansa stylization tällä kertaa. Aiomme kutsua tätä "My Google." Ja aion päästä eroon kaiken kehossa. Ja aion tehdä seuraavaa. Saanen suurentaa. Lomake action-- ja kun mainitaan lyhyesti earlier-- whoops-- kuten olen lyhyesti aikaisemmin mainittiin, toiminta on lomake on, jos lähettää tiedot. Niin google.com/search. Ja menetelmä Haluan käyttää voi olla yksi kaksi asiaa. Se voi olla joko "saada", kun pidämme keskustella, tai se voi olla "post". Nyt, perustavanlaatuinen Erona on, jos käytät "get" kaikki tiedot, jotka käyttäjä antaa saa lähettää URL. 

Se on hyvä asioita, kuten hakuun moottorit ja muutamia muita sovelluksia, mutta missä olosuhteissa et halua täyttää lomakkeen ja ovat tiedot päätyä URL, kuten selaimen osoiteriville? Millainen muotojen do sinä-- Yleisö: [tahtiimme] DAVID J. MALAN: Joo, kuten mitä? Yleisö: Salasanat. DAVID J. MALAN: Joo, niin kirjaudut Facebookiin tai joitakin verkkosivuilla. Se käyttäjien palautteen lomake, tekstiruutu, mutta luultavasti halua sitä näy selaimen URL. Miksi? Siis, ehkä on olemassa joitakin turvallisuusvaikutuksia verkossa, mutta more-- haluavat, yksinkertaisemmin, mitä jos kämppäkaveri, muita huomattavia, lapsesi, puolisosi näyttää selaimen kautta historian? On salasana oikea siellä selaimen historia. Se ei tunnu hyvältä muotoilu. Tai jopa enemmän teknisesti, Oletetaan yrität ladata kuvan Flickr tai Facebook tai wherever-- eli käyttäjä syöttää, vaikka se on hieman enemmän interesting-- miten voin ahtaa kuvan osoitepalkkiin? Tavallaan sellaista ei. Tavallaan voi. Mutta oikeasti, olen ahtaalla kuvitella näin. Joten minun on toinen tapa valokuvien lähettämistä nettisivulle, ja että muut menetelmä on nimeltään "post". Mutta nyt, me vain puhua "Saada", joka on yksinkertaisempi kaksi. Se vain tuo kaikki Käyttäjä syöttää URL. 

Joten tässä muodossa Luon. Haluan tulo. Ja tiedätkö mitä? Aion yrittää arvata täällä. Aion muistaa minun input "q" for "kyselyn." Ja mielestäni tämä on yksi niistä alkuperäisiä malleja, ehkä vuodesta 1999. Ja sitten tyypin tämän tulon on vain olemaan "tekstiä." Ja sitten aion olla toinen tulo joka ei tarvitse nimeä, kuten tulemme pian katso, jonka tyyppi on "lähetä". Ja tämä tulee antaa minulle erityinen painiketta. Ja siinä se. 

Joten anna minun mennä eteenpäin ja tallenna tiedosto. Aion mennä takaisin minun selain ja siirry google.html. Tulla sisään. Ja se on eräänlainen harva liioittelematta. Mutta anna minun mennä eteenpäin ja etsi "kissoille." Ja huomaavat Olen tällä hetkellä Tämän Cloud9 URL. Mutta nyt olen sitten tästä, missä sinä toivottavasti päätyä? 

Yleisö: Google. 

DAVID J. MALAN: Google. Joten valitse Lähetä. Ja todellakin olen uudelleen toteutettu Google. Oikea? Se on yksinkertaisempi. Se on kevyempi. Siis, minun koodi on selvästi parempi kuin omaansa siitä sotkua näimme aiemmin. Ja tiedätkö mitä? Aion mausteen tähän asti vähän. En maininnut tätä aikaisemmin. On tageja kuten H1, otsakkeen 1, tärkein otsikon sivun. "Minun Google," Soitan tätä. Saanen uudelleen. Se etsii hieman paremmin jo. Ja itse asiassa, tiedätkö mitä? Olen already-- valehtelin. Sanoin en aio tyyli tähän, mutta aion tyyli tätä kuin ennen. Ja kehoni tulee olemaan, sanokaamme, text-align keskus. Se etsii enemmän kuin Google jo. 

Tarvitsen rivinvaihdon, vaikka, kyseiselle Lähetä-painiketta. Ja se kääntyy pois, te voi käyttää kohdissa tai voit enemmän kirjaimellisesti vain sanoa, anna minulle rivinvaihdon here-- BR tag. Ja jos minä ladata tämä, nyt se menee sinne. Se on vähän ruma, niin minä voisi tehdä useita rivinvaihdot, mutta älkäämme liian ahne täällä. Nyt katsotaanpas jos se toimii "koiria." Se näyttää toimivan "koirille," samoin. Mikä siis pakottavia takeaway täällä? One-- ollut valtava harppaus käyttöön muutama tunnisteita, kuten lomake tag input tag. Mutta enemmän pohjimmiltaan on, kaikki teemme on hyödyntämällä ymmärrystämme HTTP ja se että lomakkeet lopulta muuttavat mitä URL selaimen, ja niin sen vuoksi voimme mekaanisesti antaa panoksensa palvelimeen tekemällä HTML-lomakkeen ja tietäen että palvelin ymmärtää HTTP, aivan kuten meidän elin ymmärtää, kuten, ravistamalla käteni, että sama protokolla, ja niin saamme takaisin vastauksen että me lopulta odottaa. 

Joten yrittää tehdä yhden viimeinen asia nyt mobiili, ja minä make-- Laitan tämä koodi dioja. Joten jos haluat korjailla, voit voi varmasti ottaa sen sieltä. Mutta aion mennä eteenpäin ja tehdä yksi asia. Aion mennä eteenpäin ja avata index page-- minun hei sivun ennen, mikä on paljon tätä faux-Latin tekstiä, tai merkityksetön Latinalaisen tekstiä, ja has-- se näyttää tältä tässä fontin kokoa. Mutta anna minun mennä eteenpäin ja tehdä tätä. Aion mennä Cloud9. Ja sinun ei tarvitse tehdä tätä vaihetta. Minä vain tehdä se itse. Aion valitse Jaa. Ja tämä on ominaisuus juuri of Cloud9, jolloin Voin tehdä minun ympäristössä julkista. 

Ja juuri vuoksi esittely, anna minun tehdä tätä. Aion tehdä hakemukseni julkista. Huomaa, se varoittaa minua, olen Olen varma haluanko tehdä tätä, koska tämä aikoo tehdä kaikille maailmassa, olivatpa he täällä nyt tai katsella videota myöhemmin Internet nähdä, mitä näen. Mutta se on OK. Aion sanoa "Valmis." Ja haluan rohkaista teitä, jos en Tämän correctly-- haluan testata sitä ensin. Mennä eteenpäin, jos et mind-- selaimeen tietokoneessa, siirry osoitteeseen, ja toivottavasti näet minun latinankielinen teksti. Ja tehtävä selväksi, se on käynnissä ei minun laptop. Se on pilvessä. Se on Cloud9, kirjaimellisesti, mutta Olen tehnyt työtilassa julkisia niin että kuka tahansa internetissä voi kirjautua Latinalaisessa kotisivulla. 

Mene samaan URL puhelimeen, jos voisi. Jos se tulee maksaa, vaikka, et voi vain katsoa yli olkapään. Yleisö: [tahtiimme] DAVID J. MALAN: Anteeksi? Yleisö: [tahtiimme] DAVID J. MALAN: Vain latinan sanoista. Siinä kaikki. Mutta se mitä sinun pitäisi nähdä. 

Yleisö: Kyllä. DAVID J. MALAN: Joo. Joo. OK. Joten voin pitää oman puhelin vain hetken? Joten toivottavasti jos olet päästä sen, se pitäisi näyttää melkein lukea. Se still-- Siis, se on lukukelvoton koska Latinalaisen. Mutta se on myös lukukelvoton mitä muu syy? Kuten, mitä displeases teille tästä? Yleisö: Se on pieni. DAVID J. MALAN: Se on super, super pieni. Joten miten voisimme korjata? Se on erittäin, erittäin pieni Victoria puhelimeen ja jos olet vetänyt sen itse, luultavasti pieni puhelimen samoin, ellet on saavutettavuus asetukset käytössä. Mikä tuo on? Voisit vain nipistää ja zoom, joka on käyttökelpoinen, mutta sitten vain nähdä muutama sana kerrallaan. Joten odota hetki. En tiedä, miten korjata tämä. Oikea? Voisin käyttää CSS, ja voisin vaihtaa font size 12 pisteen 24-pisteen. Mutta sivuvaikutus, että tietenkin tulee olemaan nyt, pöytäkoneen tai kannettavan tietokoneen, Nyt teksti on kaksi kertaa niin suuri. Ja niin se olisi eräänlainen mukavaa erottamaan laitteiden, ja se osoittautuu siellä ovat tapoja tehdä niin. On useita eri tavalla, itse asiassa, jolloin CSS ja hienompaa ominaisuudet että emme aio mennä hyvin yksityiskohtaisesti, voit olennaisesti kyselyn selain ja sanoa, Jos näyttö on pienempi kuin tämä monta pikseliä, käytä tätä kirjasinkokoa. Jos näyttö on isompi kuin tämä monta pikseliä, käytä tätä muuta kirjasinkokoa. 

Voit olla jopa harrastaja edelleen. Jos olet koskaan käynyt Web-sivu, joka, pöydälle, on iso valikon ehkä pois puolella, ja sitten kaikki sisältö on puolelle, joka menu-- se on eräänlainen yhteinen paradigman. Menu vasemmalla, sisältöön oikealla, tai päinvastoin. Ei oikein toimi mobiililaitteissa, kun näyttö on vain tämä monta pikseliä leveä. Joten yleisempää mobiililaitteissa on, valikon yhtäkkiä saa romahti, ja sinun on napsauttaa painiketta nähdä se, tai verkkosivuilla laittaa valikon yläpuolella ja laittaa sisältöä sen alla. Ja voit toteuttaa nämä asioita monin tavoin, myös. Voit kysyä ohjelmoijat, hei, joukkue, milloin tahansa näet HTTP pyynnön Android laite, Microsoft laite, Google laite, Apple-laitteella, käytä tätä fontin kokoa ja käyttää tätä valikkoasettelun, tai muuten käyttää tätä oletuksena suurempi layout. 

Nyt käyttäen mitä perustavanlaatuinen tekniikka tänään voisi insinöörit käyttää tietää onko se iPhone, Android puhelin, kannettava tietokone, työpöydän vierailevat yrityksen palvelimelle? Jolloin he saavat nämä tiedot? 

YLEISÖ: header? 

DAVID J. MALAN: Joo, HTTP header. Joten jokainen HTTP-pyynnön lähtöisin asiakkaitaan niiden palvelimet sisältävät sisällä että virtuaalinen kirjekuori, läjän HTTP-otsikoita, joista yksi on selain ja käyttöjärjestelmä vaikka, jos välität että taso. Nyt se on arvoituksellinen näköinen merkkijono, mutta on olemassa ohjelmisto, joka vain yksinkertaistaa niin, ja voit vain kysyä Ohjelmoinnin code-- PHP, Java, C ++, whatever-- mikä puhelin on this-- mikä laite on tämän käyttäjän käyttää? Ja sitten voit sanoa, näyttää heille tämä version verkkosivuilla, jos se on puhelin. Näytä heille tämä versio verkkosivuilla, jos se on tietokoneen ääressä. Mutta et edes tarvitse palvelinpuolen monimutkaisuus. Voit tehdä edes yksinkertaisimpia asioita. 

Aion tehdä tämän. Aion mennä eteenpäin osaksi minun Cloud9 ympäristö, ja aion lisätä tunnisteen että näit Google ennen. Sitä kutsutaan sisällönkuvauskenttä. Ja en koskaan muista tämän yhden, niin Aion laatia se täällä. Meta name = "viewport" ja sitten content = "width = laite leveys, intital asteikko = 1 "ja se on siinä. 

Joten se voisi yhtä hyvin olla kuten maaginen loitsu. Se ei ole kaikki, että selvä, mutta tämä on jotain tekemistä viewport, ja viewport on vain ruumis web-sivun, suorakulmainen alue, joka määrittelee suurimman osan sivun. Ja tämä on vain kertoa selaimen, tiedätkö mitä? Tee leveys tämän sivun tehokkaasti yhtä suuri kuin laitteen leveys. Toisin sanoen, älä oleta että olet eräänlainen rajattomasti tilaa. Oletetaan, että olet vain niin paljon tilaa kuin itse laite on suuri. Ja niin nyt, jos en lataa tämä selaimessa, en näe mitään muutosta. Mutta jos tein tämän correctly-- ja anna minun ylittää minun sormityöskentelyineen jos kaikki lataa puhelimet, sinä katso pakottavia muutos? Joo, on that-- 

Yleisö: [tahtiimme] DAVID J. MALAN: Kyllä. OK. Joten luultavasti enemmän luettavissa nyt? Vielä pieni, olla oikeudenmukainen, mutta ei niin pieni, että se on hallitsemattomaksi. Ja minä voisi varmasti ohittaa edelleen CSS tai palvelimen puolella, mutta yhä mitä olet näkeminen on yhä enemmän ominaisuuksia lisätään client-side environments-- JavaScript, kun kerromme mielellämme huomenna, CSS, ja HTML-- niin että kaikki nämä kyselyt voidaan tehdä asiakkaan jotta vaivata palvelin paljon vähemmän eikä täytyy pysyä, sillä Esimerkiksi jatkuva hyökkäys Uusien käyttöjärjestelmän versioita, selainten uusilla versioilla. Voit vain antaa selaimen kysyä laite, kuinka suuri olet, ja sitten tehdä hieman loogista päätöksiä sen perusteella. Mutta näemme enemmän mahdollisuuksia looginen päätökset huomenna yhteydessä ohjelmointikielen. 

Joten, kysyttävää, niin, Web-kehitys? Tänään ei ole Web-ohjelmointi, per se, koska useimmat kaikki teimme oli hyvin esteettinen, jos haluatte. Ei ole päätöksenteosta koodia että olemme kirjoittaneet, ja niin siksi HTML on markup kieli, ei ole ohjelmointikieli. Mutta huomenna otamme vilkaista lopulta at JavaScript, joka on todellinen ohjelmointi kieli, jonka avulla voimme tehdä hieman enemmän. 

Kysymyksiä? No, minäpä ehdottaa kahden mahdollisuuksia vapaaehtoista kotitehtäviä. Yksi is-- nämä Cloud9 tilejä ei vanhene. Olet tervetullut käyttämään niitä korjailla. Se on ilmainen palvelun taso. Ymmärrettävä, että jos luodessaan työtilan, teit sen julkista, joka ei tarkoita, että ketään Internetissä voi nähdä mitä kirjoitat. Joten ehkä vain harkita ei noloa itse jos olet laskemisesta ensimmäinen web sivu siellä julkisesti vahingossa, mutta kukaan menee tietävät etsiä siellä joka tapauksessa. 

Ja two-- haluan nakata tätä URL samoin, varsinkin jos tuli tänään hieman vähemmän mukava kuin toiset, epävarma mitä kaikki jutut tarkoittaa. Ymmärrettävä, että paljon enemmän tämän videon, joka on sekä hyvä tapa nukahtaa ja myös nauraa taas Näin on myös paljon yhteiskunnallisesti mielenkiintoisia ja turvallisuutta koskevat keskustelut siinä John Oliver, vaikkakin koomikko. 

Mutta jos ei ole muita kysymyksiä, joka tuo meidät vastaanoton. Joten miksi en päälle musiikkia. Pitäisi olla juomia ja välipaloja ulkopuolella. Olen iloinen jutella niin kunhan ihmiset haluaisivat, kysymyksiin enemmän one-on-one. Mutta muuten olet tervetullut ottaa pois milloin tahansa, ja Nähdään taas huomenna aamulla hieman. Selvä, kiitos.