[Musiikki soi] DAVID J MALAN: Okei, tervetuloa takaisin. Tämä on CS50. Tämä on viikon lopussa seitsemän. Ja se on lopussa, että raadonsyöjä Hunt ongelma asettanut neljä että saatatte muistaa. Toipumisen jälkeen kaikki ne JPEG henkilöstön, olit haastoi, jos haluat, kuvata itseäsi niin monta nämä ihmiset kuin pystyt. Saimme läjän huomautuksia viime viikkoina, todellakin, aivan muutaman juuri ennen puoltapäivää tänään, joista jotkut ovat ne täällä, kiinni täällä in-- näyttää like-- Annenberg Hall virka, yksi täällä Lowell House Nick. Tässä Ramon ollessa kiinni puhelimessa. Tämä oli CS50 lounaan. Tämä oli Jason Skyping kanssa luovempia luokkatoveri, kuka soitti hänelle tällä tavalla. Emme tiedä, mitä tämä oli. 

[Naurua] 

DAVID J MALAN: Mutta että kannattaa gigatavu. Tässä on Chang, joka kirjaimellisesti juoksi lavalta välttää kuvannut yhden päivä, mutta lopulta kiinni. Tässä on Nick. Tässä on Nick. Tässä on Nick. Ja tässä Alison alas kentät. Ja Zamyla jopa löytyi klo juhlasali kilpailua. Joten me menemme läpi näitä kuvia, selvittää Hän jätti eniten pian, ja palkita yksi upea palkinto, kuten luvattiin spec. Ja me myös seurata noin tila, joka oli mukana. 

Pari announcements-- niin lounas on jälleen tänä perjantaina klo 13:15. Jos haluat liittyä meihin, RSVP tuohon URL täällä. Jason ilmestyy jälleen täällä yhdestä jaksoissa pari vuotta takaisin, mikä tapahtui laskevan Halloween. Ja todellakin, hän pukeutunut kurpitsa kyseisenä vuonna. Jos katsot tämän osion hänen vuodesta 2011 osiosta kahdeksan, jos olet utelias, klo CS50.tv, luulen tämä oli vuosi, jolloin Hänen ilmapumppu toimi. 

Jos sitten katsella samantapainen vuonna 2012, näet tämän Jason paljon tyhjennetään koska puku ei enää toimi, joka on vain sanoa perjantaina, jos haluat haluavat raivata kurpitsan kanssa Daven Gabe ja muut, VP päät klo cs50.harvard.edu osoite. Se lupaa olla hauskaa. Daven, meille kerrotaan, on veistetty Pumpkins koko elämänsä. Gabriel Brasiliasta on koskaan veistetty kurpitsan Halloween. Joten olla siellä heidän kanssaan, kun hän oppii. 

Seminaarit, meanwhile-- niin opit pian mitä odotuksemme ovat Insinöörityö, joka pääasiallisesti alkaa kiehua alas suunnittelussa ja toteuttamisessa eniten tahansa hanke kiinnostaa te, vaikkakin se edellyttää hyväksyntää ja ohjausta oman opetuksen kaveri. Loppupuolella lukukausi, esittelemme numero seminaareja, jotka ovat valinnaisia ​​luokat johtama opetus kaverit ja Harvardin henkilökunta, ystävät kurssin poikki kampuksella, eri aiheista, ovat sivuaa Kurssin taustalla oppimäärä mutta kuitenkin sovelletaan, hauskaa, ja eri mahdollisten opinnäytetöiden. 

Esimerkiksi ensin, jos haluat rekisteröityä, pään että URL siellä. Ja tämä on kokoonpanolla Tämän vuoden seminaareja yksin. Mutta ymmärtää, meillä on kymmeniä seminaareja takavuosina, jotka kaikki on linkitetty Seminaarit valikosta mahdollisuus kurssin verkkosivuilla. Joten jos olet ajatellut ylittävät your comfort zone tai piristymisen joitakin uusia taitoja, Esimerkiksi ohjelmointi iPhone apps Swift, uusi kieli Applelta tai Objective-C tai Android apps tai ohjelmointi [? cue?] lamput, tai mitä tahansa aiheita täällä ja enemmän, johtuen tarkastus ulos rekisteröinti-sivulla. 

Joten aloimme ja ne saatiin päätökseen Maanantaina katsot HTTP. Niin nopeasti refresher-- HTTP, HTTP-protokolla. Mutta mitä se oikeastaan ​​tarkoittaa? Mitä se oikeastaan ​​tarkoittaa? Onko tuo käsi? Tiedän, että olet vain naarmuuntumisen pään. Mutta haluat ehdottaa mitä HTTP on? 

Yleisö: Kuinka tietokoneet kommunikoida [kuultavissa]. DAVID J MALAN: missasin viimeisen osan. Kuinka tietokoneet kommunikoivat with-- 

Yleisö: Internet-palvelimissa. DAVID J MALAN: Good-- kanssa internet palvelimet, ja erityisesti web-palvelimia. Koska muistaa, siellä on nippu Internet-palveluja, joista osa käytät todennäköisesti päivittäin välillä chat ja viesti, chat, ja web ja sähköposti, ja vastaavat. Ja HTTP on juuri protokolla selaimet puhua ollessaan yhteydessä web-palvelimet, ja päinvastoin. Ja analoginen vuonna ihmisen maailma voisi olla, Esitän käsi täristä noin muut ihmisen ja hän tunnustaa laajentamalla kädessään samoin. Joten se on vain protokolla, joukko sopimuksia. 

Ja mitä todellakin ovat ne yleissopimukset? No, se vain kuihtuu viestien lähettämistä edestakaisin, kuten me kuvattu täällä. Ja siellä on pari tapoja jonka voit lähettää viestit. Ja ehkä kaikkein yhteinen tunnetaan get. Ja näemme kontrasti Tämän ennen pitkää. 

Mutta GET pyynnön selaimen palvelimeen vain näyttää tältä. Se on joukko tekstin että se asettaa sisällä virtuaalinen kirjekuoren. Ulkopuolella että kirjekuori mennä pari kappaletta yksityiskohtia. Mitä tarvitsee mennä kirjekuori, niin sanotusti, saadakseen pyyntöön kuten tämä minulta web-palvelin? Joo. 

Yleisö: IP-osoitteesi. 

DAVID J MALAN: Oma IP-osoite Alkaen-niin sanotusti, ja tietenkin, vastaanottajan IP-osoite. Mutta kun kyseessä on www-paketin, Tarvitsemme hieman tarkemmin Se ei riitä vain Lähetä kirjekuori palvelimelle, koska palvelin saattaa olla kuuntelee erityyppisille Internet-liikennettä. Joten mitä muuta me tarvitsemme lisäksi vastaanottajan IP? Joo? 

Yleisö: Onko TCP? DAVID J MALAN: Hyvä. TCP-- 

Yleisö: Osoite. 

DAVID J MALAN: Osoite, tai satamaan, kuten sitä kutsutaan. Lähellä, mutta TCP-portin numero. Ja siellä on joukko näitä. Mutta varmasti eniten tuttu pitäisi lopulta 80, joka on oletusarvoisesti jota käytetään Web-liikenteen. Ja toinen tuttu yksi pian on 443, jota käytetään turvallinen web liikenne, URL-osoitteita, jotka alkavat https. 

Joten tämä on mitä tapahtuu sisällä että kirjekuoren. Ja saada / tarkoittaa vain sitä, antaa minulle oletuksena sivun. Anna minulle juuri kovaa ajaa tuo web-palvelin. Ja toivottavasti, web palvelin vastaa kanssa, OK ja numero 200, joka on vain yleissopimuksen sanoen, kyllä, kaikki on todellakin OK. Tässä on sivu. Tyyppi web-sivu on menossa olla tekstiä, mutta tarkemmin, HTML, jonka aiomme sukeltaa takaisin. Ja piste piste piste juuri keinot, tässä on HTML. Ja siitähän me poimia tarinan tänään, itse kirjoittaminen HTML, Hypertext Markup Language, joka on kieli, jolla verkkosivut on kirjoitettu. Se ei ole ohjelmointikieli. Ei ole toimintoja tai silmukoita tai ehtoja. Se on kuvauskieli, sekä jälleen nähdä tänään, jonka avulla voit määrittää miten rakenne ja tyylitellä esteettisesti sivun. 

Joten tämä oli yksi ja vain sivulle olemme todella Katsoin, jos lyhyesti, maanantaina. Ja huomaa muutaman keskeiset ominaisuudet. Siellä on paljon avointa kulmikas pidike ja sulje kulma kiinnike. Välillä ne kulmikas Suluissa olevat sanat. Ja aiomme aloittaa kutsuvan nämä sanat tageja. Joten alkusulkumerkki pää ja suljettu kiinnike päähän ovat avoimia ja suljettuja tunnisteet, tai alku ja loppu tunnisteet vastaavasti, HTML-elementti, kuten me sitä kutsumme, nimeltään pää. Ja sama jargon koskee kehon HTML ja niin edelleen. 

Ja mitä mukavaa on HTML-- ja todellakin, me viettää hirveän vähän aikaa siihen, koska olet lähinnä vain selvittää mitä ominaisuuksia sillä on, kun todella on konkreettinen ongelma jotta solve-- huomaat, että selain on melko tyhmä. Se on juuri menossa do-- ole toisin computer-- mitä kerrot sen tehdä. Ja niin, kun sinulla on auki kiinnike HTML huipulla siellä, että pohjimmiltaan tarkoittaa vain sitä, hei, selain, tässä tulee web-sivun kirjoitettu HTML. 

Kun se näkee alkusulkumerkki pää, joka tarkoittaa vain sitä, hei, selain, tässä tulee pää, tai ylimmän osan Web-sivun. Kun se näkee suljetun kiinnike pää, joka tarkoittaa vain sitä, hei, se on siinä pään. Valmiustila jotain muuta. Ja että jotain muuta on ilmeisesti olemaan elin. Ja kun sinulla ei ole tag, kuten olet juuri Hei, pilkku, maailma, joka on juuri olemaan raaka teksti, lopulta näkyy näytöllä. 

Nyt huomaat liian sisennys täällä. Voit ehkä päätellä miten me stylizing sitä. Joka kerta, kun avaan tunniste, niin sanoakseni, olen sisentää. Ja joka kerta suljen tag, en un-luetelmakohdan, hengeltään samanlainen aaltosulkeita. Ja sen lisäksi olen sellainen käyttää minun tuomioni. Huomaa, että en vaivaudu lyömällä Anna sisällä että otsikko tag. Miksi? No, minä vain päätti, että se näytti pikku siivooja minulle, ihmisen, vain viitsi tehdä niin. Joten jälleen, siellä on jotkut tuomion täytäntöönpano edellyttää vain kuin siellä on C tai millä tahansa kielellä. 

Mutta huomaa myös, että tukiuloke otollisia mentaalinen malli, ei liikaa vaikeuttaminen. Mutta puu, eikö? Jos ajattelet web sivu, ilmeisesti kirjoitettu näin, koska on kauniisti sisennetty että tapa, voi melkein ajatella alkusulkumerkki HTML suljettu kiinnike tag rajaamisesta juureen solmu, sukupuu tyyli solmu tyyliin puiden me katsoimme viime perjantaina. 

Ja todellakin, meillä on täällä mitä me kutsumme DOM, D-O-M, dokumentti objekti malli, hieno tapa sanoa puu, joka edustaa että HTML. Ja huomaa, että HTML on, me sanomme, kuten sukupuu, kaksi lasta. Vasemmalla on pää. Oikealla on elin. 

Ja aivan kuin mieletön ajatus liikunta, pää, tietenkin on, kuinka monta lasta mukaan tämä rakenne? Joten vain yksi, title-- ja siksi meillä on nuoli menee päästä otsikko. Joten se on ikään kuin, että henkilö sukupuu oli vain yksi jälkeläisiä. Ja sitten otsikko voi itse sanoa olevan lapsikin. 

Muista, että HTML oli Hei, pilkku, maailma sen alla. Ja olen yksinkertaisesti vetää sen sisällä soikea sijaan suorakulmion juuri välittää semanttisesti että vaikka se solmu puussa, niin sanotusti, se on tavallaan täysin erilainen. Se ei ole tag. Tai oikeammin, se ei ole elementti. Se on vain tekstiä solmu, jos haluatte. Mutta nämä ovat täysin mielivaltainen ihmisen yleissopimukset. Tämä on juuri nyt minun tapani eli mitä minä will aggregaattina soita asiakirja. 

Ja niin syrjään, asia on Super vasemmassa yläkulmassa, alkusulkumerkki huutomerkki doc tyyppi HTML, tämä näyttää tag, mutta se on tyhmä nurkkaan tapauksessa että on vain siellä, kopioida ja liittää osoittamaan selaimet tämä on HTML-versio 5. Maailma muuttuu, mitä ensimmäisellä rivillä koodia sivun tulee olla. Tämä tarkoittaa vain sitä versiota 5. Joten se ei oikein näyttää muille. 

Okei, niin kyseisen sanoi, voit nyt arvostaa tämä melko tämän typerän tatuointi joku sai. 

[Naurua] 

DAVID J MALAN: Okei, ja nyt Katsotaanpa todella sukellus tulee tehdä jotain tämän. Sinun muistaa, että viime kerralla Olen avannut CS50 Appliance ja tein jotain niin yksinkertaista kuin avautuminen gedit. Ja olen tallentanut tiedoston jopa Oma desktop-- missään special-- kuten hello.html. 

Joten anna minun tehdä sitä again-- hello.html Enter. Ja nyt tämän tiedoston, aion mennä eteenpäin ja jäljitellä mitä me juuri saw-- doc tyyppi html Sitten aion tehdä alkusulkumerkki html suljettu kiinnike. Ja sitten aion preemptively Avaa ja sulje tag. Miksi? Just niin en unohda myöhemmin. Se on vain hyvä käytäntö, kuten aukko ja sulkemalla aaltosulkeita kaikki kerralla. 

Ja sitten mitä tuli seuraavaksi? Voit ajatella tatuointi. 

Yleisö: pää. 

DAVID J MALAN: pää. Ja sitten täällä, olen oli otsikko, luulen. Ja otsikko oli mielivaltaisesti, Hei, maailma lähellä otsikko. Ja sitten täällä, elin, on course-- sitten suljemme body. Ja sitten vain hieman tarpeettomasti, Minulla oli sama juttu täällä. 

Niin Väitän, että tämä on web-sivu. Tämä on jotain, joka voisi nyt elää verkossa, vaikka tietysti se on kirjaimellisesti elävät työpöydälle juuri nyt. Mutta tosiaan, jos minä minimoida gedit, Nähdään työpöydälle sen kuvaketta. Vaikka tämä on laite, Tämän voi tehdä Mac OS ilman TeXturin tai Windows Muistioon vielä. 

Ja vaikka minä menen eteenpäin ja tuplaklikkaa että jopa, ja select-- hyvin, katsotaanpa ei valita, että koska Chrome ei ole avaamista. Mennään eteenpäin ja avaa Chrome. Ja tee sitten Komento-O avoimille Ja navigoida työpöydälle ja avaa tiedoston. Näin selain tulkitsee HTML, ylhäältä alas, vasemmalta oikealle. Hei, selain tässä on HTML. Tässä on pää. Tässä on otsikko. Tässä elin. Ja todellakin, tämä on miten se tekee kyseisen sivun. 

Mutta huomaa URL. Kukaan teistä ei voi vetää tätä erityistä sivulle läppäreissä juuri nyt, jopa sisällä oman laitteen kautta, että URL, koska file: // kertoo, että se todella minun tiedostojärjestelmä, minun kovalevy, ei sinun. Joten tämä ei ole kovin hyödyllinen. 

Katsotaan nyt siirtyä kohti käyttämällä todellista web-palvelin. Ja se osoittautuu CS50 Appliance on enemmän kuin vain ympäristössä, jossa Voit kirjoittaa C-koodia ja koota ja ajaa sitä kuin olet tehnyt. Se on määrittänyt henkilöstö edustaa tyypillinen web palvelin, joka on internetissä, yksi että saatat maksaa tai yksi, joka on on ns pilvi. 

Ja se on käynnissä standardi ilmainen avoimen lähdekoodin ohjelmisto, esimerkiksi jotain nimeltään Apache, joka on ehkä edelleen suosituin web palvelin ohjelmisto maailmassa että tuhannet sivustot käyttävät tänään. Ja se myös on jopa ohjelmistoja, kuten MySQL, joka on tietokantapalvelimen että me lopulta päästä, joka on vain sanoa Voin aloittaa käsittelemällä Oma laite kuin täysivaltaiseksi palvelin että en ole maksaa muualla. Se vain elää omaa laptop kehitys ja mukavuutta varten. 

Joten mene eteenpäin ja hyödyntää tätä. Aion mennä eteenpäin ja avaa terminaali-ikkuna. Ja aion mennä eteenpäin ja move-- itse, ensin olen menossa navigoida työpöydälle. Jos teen ls, siellä hello.html. Ja aion mennä eteenpäin ja alkaa käyttää uusi hakemisto me olet ei ole käytetty ennen tänään. 

hello.html-- Aion siirtyä jotta ../vhosts virtuaalinen hosts-- lisää, että future-- ja sitten hakemistoon nimeltään localhost, joka on lempinimi annetaan lähes mikä tahansa tietokone, onko se Mac, PC, tai Linux-tietokone, ja sitten nimenomaan hakemistoon, että me, Henkilökunta on jo luotu sinua varten, kun latasit laitetta kutsutaan julkinen. Ja kuten nimestäkin voi päätellä, mitä Laitoin tähän kansioon, teoriassa, on menossa nyt julkisia, ainakin ihmisille joilla on suora yhteys tietokoneeseen. 

Joten nyt haluan mennä eteenpäin ja tehdä cd tähän samaan hakemistoon joten en voi nähdä, mitä tekeillä ja LS. Ja todellakin, se on Ainoa asia siellä. Väitän nyt, että koska olen laittanut tämän tiedostoon hello.html sisällä hakemiston sanotun yleisen sisällä hakemiston nimeltään localhost sisällä hakemiston nimeltään vhosts, joka kiitos CS50 henkilöstö on valmiiksi konfiguroitu olemaan juureen web-palvelin, Voin nyt toivottavasti tehdä tätä. 

Aion avata uuden välilehden. Ja aion mennä ei tiedostoon: //. Aion käyttää todellista http / localhost, joka uudelleen, on lempinimi omalle palvelimelle. Ja sitten aion mennä mitä tiedoston nimi, vain olla selvä? Mistä tämä tarina luultavasti menossa? hello.html. 

Eli toisin sanoen, haluan nyt tässä on oma tietokone, oma laite, kuin se olisi todellinen palvelin. Sen lempinimi on localhost. Mutta ajattele localhost samankaltaisina Facebook.com google.com riippumatta. Se on vain minun paikallinen nimi. Ja sitten lopullinen haluan on juureen kiintolevyn, niin sanotusti, tai juuri web-palvelin, ergo vinoviiva ja sen jälkeen tiedostonimi hello.html. 

Saanen loitontaa ja paina Enter. Ja todellakin, nyt on minun verkkosivu. Joten se on hieman erilainen. Ja se on aivan yhtä underwhelming. Tämä on vanha versio. Saanen kutistua fontin takaisin. Tämä on vanha. Tämä on uusi. Mutta mitä pohjimmiltaan tapahtuu Nyt on, että HTTP on käytössä. 

Tehdään tästä vähän enemmän selvää tai, jos haluatte, hieman monimutkaisempi. Anna minun mennä oikeaan alakulmaan yläkulmassa minun laite. Ja huomaa, että kaikki tämä aika, että on ollut useita. Tämä on ainutlaatuinen osoite oman CS50 Appliance. Se on oma osoite, kuten ehdotetun direktiivin 172,16, mikä tarkoittaa vain sitä vain fyysisesti pääsy tähän web-palvelin. Kaikki on palomuurin ja hienosti suojattu muualta maailman tämän vuoksi puuttua. 

Ja nyt huomaa, mutta jos menen tätä osoitetta, ei minun laite, mutta Mac OS-- aion palata tänne. Tämä on minun Mac nyt. Ja nyt aion avata Tämän version Chrome täällä. Ja aion mennä http: //172.16.25 / Ja unohdan rest-- 133. 

Joten aion vierailla minun Mac että IP-osoite /hello.html Enter. Ja nyt näen minun Mac että minun CS50 Appliance, joka on IP-osoite on se, että numero, on todellakin käyttäytyy kuten web-palvelimen internetissä. Se ei ole mukava helppo muistettava nimi kuin Facebook.com, mutta se käyttää HTTP ilmeisesti, vaikka Chrome on eräänlainen yksinkertaistaa maailmaa meille, mutta ei näytä meille HTTP. Mutta tämä on todellakin juuri näin. Chrome on vain säästääkseni näppäinpainallukset näinä päivinä. Ja sitähän me nyt nähdä. 

Niin, että kaikki hyvä ja hieno. Mutta se on melko underwhelming sivulle. Anna minun mennä ja tehdä jotain hieman erilainen nyt. Joten anna minun mennä takaisin gedit. Ja sen sijaan, että hei, maailman, katsotaanpa laittaa kuvan. Ja minä vaatia before-- anna minun mennä minun localhost hakemistoon julkisia. Ja anna minun mennä eteenpäin ja kopioi läjän tiedostoja tänään minun Dropbox kansio täällä. 

Nyt jos kirjoitan ls, katso kaikki nämä tiedostot että olen jakamassa Kurssin verkkosivuilla etukäteen tänään, joista yksi on edelleen hello.html. Joten ei se yksi. Ja muistaa tämä typerä yksi viime time-- cat.jpg. Joten anna minun yrittää upottaa cat.jpg sisällä minun web-sivun. 

Aion mennä eteenpäin ja tehdä cat.jpg, tallenna. Anna minun mennä takaisin Chromeen. Ja haluaisin zoomata fontti ja nyt uudelleen. Oho, jossa esitin tämän? Standby-- Minulla on vielä vanha versio työpöydälle auki. Joten anna minun mennä minun vhost, minun localhost, minun julkinen, ja hello.html. Joten nyt haluan mennä eteenpäin ja sanovat cat.jpg rungon sisältä missä haluan sen olevan näyttöön ja lataa. Tietenkään tämä ei ole oikein. 

Joten minun täytyy kertoa selaimen hieman enemmän tietoisesti, mitä haluan sen tehdä. Yksinkertaisesti kirjoittamalla nimi on ei tietenkään riitä. Niin muistaa, että siellä oli toinen tag, kuva, img lyhyitä. Se on vain koska ihmiset pidä tyyppiä koko sanaa. Ja sitten voimme tehdä source = "cat.jpg". 

Ja nyt aion tehdä yksi asia täällä erilainen. Vaikka kaikki meidän tunnisteet ovat toistaiseksi oli tämä käsite alkutunnisteen ja lopputunniste, joka ei oikeastaan ​​tee järkevää kuvan, eikö? Kuva on joko olemassa tai ei. Ja niin ihmiset ovat tulleet kanssa yksinkertaisempi yleissopimuksen. Kun sinulla on tunniste, joka voi sekä alkavat ja päättyvät samaan time-- se voi olla tyhjä, niin speak-- juuri laittaa vinoviiva sisällä tag aivan lopussa. Nyt anna minun mennä takaisin minun selaimessa. Hit Reload Hitto, jotain on vialla. Olet varmasti nähnyt tämän joskus Webissä, vaikka se ei ollut sinun syysi. Se on web-palvelimen vika. Mikä odes tämä näyttäisi osoittavan? Se on rikki. Siitähän kuva kuuluu. Joo? 

Yleisö: Mutta se ei ole on pääsy kuvan. 

DAVID J MALAN: Se ei on pääsy kuvan. Että, tai vielä pahempaa, ehkä se ei ole edes olemassa. Katsotaan jos emme voi diagnosoida että. Muistan viimeisen kerran, että jos Chrome, että laite, tai jopa Macin tai PC: n, menet Developer valikko ja mene Developer Tools vaihtoehto, joka luultavasti olet ei käytetä paljon tai koskaan. Ja jos menen Verkko ja lataa sivu, Katsotaanpa todella katsoa HTTP pyytää, että tehdään. 

Se näyttää hello.html on todellakin OK, joten 200. Mutta cat.jpg on 403. Joten se ei ole 404. Tiedosto on todennäköisesti olemassa. 403 tarkoittaa kielletty. Joten tämä on hieman sekava. Aion mennä takaisin minun pääteikkunassa. Saanen lähentää tänne. Ja anna minun tehdä ls. On näitä samoja tiedostoja. 

Nyt haluaisin tehdä ls-l, joka olet luultavasti käytetään ennen katsomaan tiedosto koot ehkä tai aikaleimat. Ja näemme koko joukko ylivoimainen tiedot. Mutta huomaa muutamia yksityiskohtia. Tässä hello.html tässä rivi täällä ja täällä on cat.jpg. Ja se on vain laitteen ollessa käyttäjäystävällinen korostamalla JPEG: n violetti näin. Mutta mitä muuta on erilainen vieressä tiedostokoko ja tiedoston nimi? 

Yleisö: [kuulumaton]. DAVID J MALAN: Joo, siellä on kaksi R: n tänne. Huomaa mitä hello.html on tekeillä. Joten käy ilmi, että nimi tähän hakemistoon yleisö on tärkeä. Mitään tässä hakemistossa on tarkoitus olla julkisia. Mutta se ei riitä vain pudottaa tiedostoja sinne. Voit myös joutua muuttamaan moodin tiedostoja, muuttaa käyttöoikeuksia tiedosto ennakoivasti ei vakioasetuksina, mikä on että vain voin lukea ja kirjoittaa sen, minä olin omistaja. Haluan koko maailman kaikki voivat pystyttävä lukemaan tiedostoa, niin sanotusti. Lue tarkoittaa vain katsella sitä. 

Ja todellakin, kuten näet ongelmatilanteissa asettaa seitsemän, sitähän nämä R: n keskiarvon. Nämä kaksi R: n keskiarvo antaa kaikille muualla maailmassa myös lukea se, varsinkin nyt, se on tähän hakemistoon. Niin yksinkertaisin tapa korjata tämä on mene minun nopea ja tehdä chmod muutoksen tila ja tee + R, yhteensä, jokainen, kaikki, plus R lukea, ja sitten cat.jpg Enter. Mikään ei tunnu tapahtuvan, joka tarkoittaa yleensä hyvä asia. Niin ls-l again-- nyt Katsotaanpa cat.jpg. Ja tämä lupa näytä muuttuneen. Sivuhuomautuksena, jos teet virhe ja olet esimerkiksi juuri tehnyt your-- en know-- essee julkisesti saataville vahingossa, voit tehdä päinvastoin, chmod-R. Vaikka rehellisesti sanottuna, sen ei pitäisi olla julkisessa hakemistossa joka tapauksessa, jos se on huolenaihe. 

Joten nyt mennään takaisin selain ja reload. Ja aion napsauta pikku Ghostbusters symboli tyhjentää, että osa ruudulle, niin voimme nähdä uusia pyyntöjä. Ja todellakin, tässä Grump Cat ennen. Mutta mikä tärkeintä, teknisesti, on numero 200, joka tarkoittaa saimme sen OK. Okei, niin se on kaikki hyvä ja hieno. Mutta emme ole tehdä parhaat sivustot, emmekä aio yrittää liian vaikea tehdä hienoimpien sivustoja tänään. Mutta katsotaanpa ainakin tehdä jotain Super tuttu ennen hurja pois muutamia muita tunnisteita. Joten kai en vain halua kissa täällä. Taitaa itse halua tätä kissa linkittää jotain. 

Saatan esimerkiksi tehdä jotain. ankkurinkäsittelylaivojen href varten hyper viite equals-- ja haluan vain tehdä jotain kuten www.google.com sulje Lainaan sulje kiinnike. Ja nyt etsiä kissojen. Sulje ankkuri tag. Joten tämä on vain yhdenlaista perustaltaan uusia yksityiskohtia. Tag on tietysti erilainen. Se nimi on ankkuri href tai hyper viite. 

Mutta mikä tärkeintä, siellä Tämän syntaktisia ominaisuus täällä. Tämä on mitä me aloitamme soittamalla ei tag, mutta määrite. Ja attribuutti on jotain, muuttaa käyttäytymistä tag. Ja tämän ominaisuuden, href, välineet muuttaa käyttäytymistä tämän ankkuri niin, että kun se napsautetaan, se menee tähän URL täällä. Ja tietenkin, että URL-osoite on Google. 

Samaan aikaan, mikä on tämän tekstiä täällä tulee olemaan? No, se tulee olemaan mitä ihmisen oikeastaan näkee alleviivattu linkki, niin yksinkertaista. Joten kokeile tätä. Minäpä tallenna se. Olen yhä hello.html. Mutta versioita verkossa, näet todellinen tiedostojen nimet meillä jo valmiina. Anna minun mennä eteenpäin ja ladata. Ja nyt se on hyvin underwhelming sivu silti. Mutta jos minä hääriä there-- ja se on vähän pieni, but-- näet pohjassa vasemmassa alakulmassa näytön, se todellakin menossa google.com. Ja jos painan, että se tulee vispilä minulle tapa todellinen Google. 

Mutta huomaa tässä mahdollisuuden hyväksikäyttö, aivan kuin syrjään. Ja me palaamme muut turvallisuuskysymyksiin ennen pitkää. Koska siellä on tämä kahtiajako välillä missä mennään ja mitä sanot, voisit tehdä jotain this-- http://www.google.com. OK, ja nyt jos en lataa tallennuksen jälkeen, että sivu, näyttää siltä, ​​aion mennä Google. Mutta ei ole mitään syytä I täytyy mennä Google, eikö? Voisin itse mennä jotain badguy.com, lataa sivu tänne. Ja ilmoitus, se silti näyttää Google. Ja vain jos olen jyrkästi tarpeeksi hääriä täällä En näe sitä edes aio mennä eri paikkaan. 

Joten jos olet joskus saanut sähköposti, erityisesti yksi Paypal, tai näennäisesti Paypal jossa sinua pyydetään kirjautumaan sisään tilillesi, tämä Siksi sinun ei pitäisi koskaan koskaan klikkaa linkkejä sähköpostit, rehellisesti, mitään sähköpostien linkkejä. Jos tiedät on todellinen rahaa Paypal tai pankkisiirrolla Amerikan tai Fidelity tai verkkosivuilla, käsin kirjoita se. Koska näyttää, miten helppoa se on huijata joku tulee esittää mitä näyttää linkin. Mutta tosiasiassa se voisi mennä aivan minne tahansa. 

Ja siellä on paljon enemmän uhkia kuin tämä. Itse asiassa, tämä on vähän on tangentti nyt, mutta yksi paras niistä olen koskaan nähnyt joka on sittemmin suljettu, on joku johtanut ihmisiä to-- joten tässä voisi sanoa, klikkaa tästä kirjautuaksesi huomioon, pankkitili. Ja tämä oli Bank of the West. 

Niin joku osti tämän. Ja se on hieman helpompi nähdä se mono erillään fontin zoomataan sisään 30-jalka projektori. Mutta kun se on pieni fontti sähköpostitse, että olet vastaanottamisesta, tämä näyttää bankofthewest.com, ei bankofthevvest.com, jonka joku oli maksanut 10 dollaria ostaa. Ja sitten tämä johti heidät vastaa noin huonoja verkkosivuilla. 

Ja näet too-- todella voimme tehdä this-- jos menen todellinen verkkosivuilla, bankofthewest.com, jälleen, Recall viime kerran että jos tämä on heidän web-sivun ja olet utelias, miten se toimii, voit varmasti mennä Chromen kehitystyökalut. Ja voit nähdä kaikki HTML muotoiltuja siellä. 

Mutta enemmän siihen pisteeseen, voit cam-- katsotaanpa sulje this-- voit mennä View Kehittäjä View Source. Miksi en vain kopioida kaikki tämä ja sitten minä voi mennä pikku gedit ikkuna täällä ja tehdä oman web-sivun. Säästä tämä hello.html. Ja luultavasti tämä tulee rikkoa, koska se ei ole näin helppoa yleensä. Mutta nyt jos en lataa oma sivu oma CS50 Appliance ja osui reload, OK, joitakin juttuja rikkoi. Mutta olen melko lähellä ottaa oma verkkopankkia, eikö? Kaikki tämän HTML-- 

[Naurua] 

DAVID J MALAN: --I ei actually-- ja sinua tietää siellä on joku siellä joka todella klikkaa näitä linkkejä myös. Niin selvästi, joitakin juttuja rikkoi. Mutta että menee johtaa meidät keskusteluun, tarpeettomasti juuri nyt, niin mitä CSS, Cascading Style Sheets, ovat, ja miten voit itse ladata muut HTML-tiedostot ja JPEG-tiedostoja GIF-tiedostot, sivusto voidaan käyttää. Mutta kaikki tämä on accomplishable. Mutta se todella kuihtuu Näiden hyvin yksinkertainen heuristiikka. 

Joten nyt haluan vain lukaista läpi Pari muita esimerkkejä HTML- vain antaa sinulle tunteen mitä muuta voit tehdä. Esimerkiksi, tämä on list.html. Kai halusin tehdä web-sivun luettelo taloja quad. Saatan käyttää ul tag järjestämättömiä luettelosta ja sitten luettelokohteen lapsi ja sitten kerrata over-- tai lista, rather-- taloa kyseessä. 

Ja jos avaan tämän ylös, tehdään tämä. Mennään eikä hello.html, mutta list.html. Hitto. Miten korjaan tämän? Se on sama asia kuin ennen, eikö? Joten anna minun tehdä chmod-- oops-- chmod + r list.html. Ja nyt jos menen takaisin minun selaimessa ja valitse Päivitä, siellä se on. Joten jos olet koskaan halunnut tehdä luettelomerkeillä, voit tehdä sen. Jos haluat olla super fancy ja tehdä järjestetty lista, ei järjestämättömiä lista, muuttaa niitä, ol, lataa sivu, ja Nyt selain numero sen sinulle. 

Mitä muuta voimme tehdä? No, pari others-- jos sinulla pitkät kohdat text-- Esimerkiksi joissakin Latinankielinen teksti kuten this-- ja haluat sen eri kohdissa, avoin p, sulje p kohta tag. Ja tehdä sen uudestaan ​​ja uudestaan. Ja jos minä nyt avata tätä tiedostoa, paragraphs.html, hyvin, tämä on tulossa ärsyttävää. Joten nyt mennään vain takaisin minun nopea, chmod + r r tähti .html-- mukava pieni villi kortti niin sanotusti. Se pitäisi korjata kaikki näitä ongelmia minulle. Katsotaanpa uudelleen. Siellä on kolme kappaletta. 

Ja nyt mennään eteenpäin ja avata yksi muu. Entä pöytä? Huomaat taulukko näyttää hieman monimutkaisempi. Mutta se on sama idea-- Avaa Tag, avoin tag, auki, auki, auki, kiinni tag, avoin tag. Ja nämä sattuvat seistä pöytä, jonka raja on ilmeisesti olemaan paksuus 1-- tahansa että means-- taulukon rivi, taulukko tietoja, mikä tarkoittaa solua. Ja vaikka minä menen takaisin minun selaimessa täällä ja mene table.html, näet jotain näin, hirveä. Mutta saamme siihen pisteeseen jossa voimme todella tehdä asioita kauniimpi kuin. 

Haluan siis säätää nyt. On risuryppäät lisää tageja. Ja HTML on ihana poimia koska rehellisesti sanottuna, kaikki sinun ei tarvitse tehdä on tarkastella nykyisiä verkkosivuja jonka kanssa olet tuttu. Ja olet kuin, Oh, näin he tekivät tämän esteettisesti. 

Tai voit etsiä minkä tahansa verkossa resurssi, miten HTML toimii, ja näet, että siellä Koko sanasto muut tunnisteet. Mutta yksinkertainen henkinen malli yksin että melkein minkä tahansa tunnisteen avaat on suljettava, se todella ei riitä opettamaan itseään HTML jälkeen ymmärtää nämä perusajatukset tagit ja attribuutteja ja hyvin formedness että olemme puhuneet, sulkeminen mitään, että voisimme avata niin että emme sekoita selainta. Joten nyt viedä tämän mielenkiintoisempi tasolla menemällä todellinen. Ja mennään Macin täällä, google.com. Ja nyt notice-- tehdään tämä. Olen gong mennä Asetukset, Search Settings. Haluan sammuttaa tämä harmittaa hetkessä Tulokset asia jos se heti alkaa vastata kirjoittamista. Tehdään tämä vanhempi koulussa niin me itse nähdä mitä tapahtuu. 

Joten aion pelastaa minun Google asetukset. Ja nyt notice-- aion etsi jotain kissoille. Ja se on silti tekee auto täydellisiä täällä, mutta perustuu asiat ihmiset ovat kirjoitettu aikaisemmin. Mutta huomaa, mitä tulee tapahtumaan. 

URL tällä hetkellä on tämä, vain google.com. Ja teknisesti, se on vinoviiva. Googlen vain säästää merkki eikä osoittaa meille, että. Ne meille osoittavat https, vain olla super rauhoittavaa, että olemme klo turvallinen tai salattua sivua. 

Joten anna minun mennä eteenpäin ja etsiä kissojen. Nyt tämä sai todella ylivoimainen nopeasti. Katsokaa pituudesta tätä URL. Mutta näyttää siltä, ​​että suurin osa tätä tavaraa URL-osoitteessa on oikeastaan ​​aika hyödytön. Aion aloittaa poistamalla asioita, joita en ymmärrä. Näen kissoja. Ymmärrän kissoja. En tiedä, miksi kissat ovat siellä uudelleen. En todellakaan tiedä mitä tämä järjettömyys on. Joten olen juuri menossa pitämään korostamalla ja poistamalla kamaa että en ymmärrä, tislaamalla URL juuri tähän. 

Nyt haluaisin saada tulla uudestaan. Näyttää siltä, ​​Google toimii edelleen. Niin jostain syystä, he lisäämällä paljon tavaraa niiden URL: n oletuksena. Mutta se ei ole ehdottoman välttämätöntä. Joten mikä on mukavaa tästä? No, anna minun mennä eteenpäin ja avata Chromen Inspector. Siellä on pieni hiiri pikakuvakkeen se. 

Siirry Verkko-välilehti. Ja nyt haluan uudelleen Tämän sivun uudelleen. Ja olen Shift. Sivuhuomautuksena, selaimet taipumus välimuistiin tai tallentaa tietoja vain tehokkuuden vuoksi. Mutta yleensä, Shift ja uudelleenlastaus pakottaa kaikki aloittaa uudelleen alusta. Ja se mitä haluan tehdä täällä. 

Ja huomaa kaikki nämä rivit, juuri ilmestynyt. On käynyt ilmi, että jonakin web sivu, siellä saattaa olla vain yksi tiedosto involved-- hello.html-- tai siellä voisi olla 52, kuten tässä tapauksessa. Kun käyn google.com, Ilmeisesti minun selaimessa käynnistymässä 52 erillistä HTTP-pyyntöjä. Miksi näin? 

No, katsokaa mitä sisällä Tämän sivun ylös. Siellä ei ole vain tekstiä, mutta siellä on todellisia kuvia kissojen yli oikealle. On värikäs logo täällä vasemmalla. Siellä on kaikki nämä kuvakkeet ja mikrofoni ja niin edelleen. Siellä on paljon paloja, rakentamiseen lohkot, naarmu kappaletta, jos haluatte, tähän sivuun. Ja mikä selain tekee siitä saada ensimmäinen tiedosto, joka on tämä rivi täällä, se on olennaisesti iteroidessaan yli HTML alkuun alas, vasemmalta oikealle, etsii asioita, kuten kuvan tunnisteet tai muut tunnisteet jotka viittaavat muut tiedostot ja kun se näkee heidät, menee ja hakee niistä HTTP, elinkelpoinen kokonaisuus kirjekuori metafora, ja sitten näyttää ne sopivaan paikkaan Web-sivun. 

Mutta huomaa täällä jos keskityn Ensimmäinen heitto, haku kissat, huomataan, että se todellakin on HTTP 1.1. Ja valitettavasti Google Chrome nyt versiossa 39 on eräänlainen yhdenvertaisuuspyrkimykset asioita alas ja ei näyttää meille todellinen otsikot. Mutta mikä oli todellakin lähettänyt on pyyntö sillä ei leikata, vaan / haku? q = kissoja. 

Nyt miksi se on tärkeää? No, aion päätellä tästä, että jos Google tukee kyselyt tämän lomakkeen, miksi älä otan oman haku moottori CS50, mutta vain edestä pää, vain graafinen käyttöliittymä. Ja me ulkoistaa loppupäätä, varsinaiset hakutulokset Google. 

Joten miten voin tehdä tämän? No, anna minun mennä gedit tänne. Ja anna minun mennä eteenpäin ja avata ylös, sanokaamme, uusi tiedosto. Ja aion tallentaa väliaikaisesti haku-0.html. Ja sitten lopulta, me nopeasti eteenpäin minun esikäsitellyt. 

Ja aion nopeasti lietsoa doc tyyppi html alkusulkumerkki html sulje kiinnike html. Sitten aion tehdä pää sulje pää auki otsikko CS50 Hae sijaan Google-haun. Täällä aion olla elin, täällä lähellä kehoa. Ja nyt minun täytyy CS50 haku. Ja todella, katsotaanpa rakentaa tämän vähitellen. Aion mennä eteenpäin ja sulje tämä ja todella laittaa se minun julkisessa hakemistossa. Joten anna minulle vain yksi hetki. Haku-0.html-- aion ajallisesti kutsuvat sitä search.html. Aion chmod se + r search.html. Ja nyt aion avata sen. Okei, joten se oli nopea. Mutta tavoite oli yksinkertaisesti saada meidät pisteeseen ottaa tämän tekstin tiedosto nimeltä search.html. Niin ei paljon katsomaan vielä. Todellakin, jos menen selaimeen, ja Siirry search.html, että kaikki se on. Mutta tiedätkö mitä? Voin olla hieman hienompaa. Luin kirjan, että siellä on otsikko tag nimeltään H1. Ja aion mennä eteenpäin ja käyttää avattavat H1 ja sulje H1. Päivitä sivu. Ja nyt se on isompi ja rohkeampi, ole kovin kiinnostavaa, mutta ainakin se rakenteellisesti mielenkiintoisempaa. Mutta nyt haluan esitellä toisen tunnisteen. On käynyt ilmi, on olemassa muodossa tag. Ja haluaisin lopettaa kyseisen tag. Ja se osoittautuu siellä input tag, että on määreen tyyppiä, joka on tietojen tyyppi kentän, jos haluatte. Ja tulee olemaan tyyppiä tekstiä. Ja sen arvo on menossa olla CS50 haku. Sulje tag. Ja siellä tulee olla mitään käsitettä avaamalla ja sulkemalla erillisellä tageja. 

Anna minun mennä takaisin tänne ja Katso mitä tapahtuu, reload. Getting mielenkiintoinen. Se näyttää se tekstikenttään. Ja todella, en halua laittaa arvon siellä vielä. Anna minun mennä takaisin tänne ja itse saada eroon tästä arvosta pidettävä yksinkertaisina. Arvon sijasta, mitä halusin antaa tämä asia oli nimi. Ja en tiedä mitä se on, joten palaan siihen. 

Mutta alla, että haluan tehdä input type = lähetä. Ja tämä arvo tulee olemaan CS50 haku. Ja näemme miksi siirretty arvo tähän. Kun minä uudelleen, olen ilmeisesti nyt alkaa oma haku moottori, erittäin vastenmielinen, vaikka rehellisesti, se on ei kaukana heiton päässä mitä Googlen oletuksena sivu näyttää. 

Jos menen tästä nyt, voin kirjoittaa kissoja ja toivottavasti sitten Etsi. Mutta en ole aivan vielä valmis, koska en ole pantu täytäntöön, tietenkin, tietokanta. En ole selattu Web-hakutuloksissa. Joten minun täytyy ulkoistaa, että Google. Joten miten voin tehdä tämän? 

No, ensinnäkin olen täytyy lisätä ja toiminta Yhdistän minun muodossa tag että on http://www.google.com/search. Ja tiedän, että vain ottaa päätellä katsomalla tarkasti niiden URL-osoitteita. Ja nyt yrittää arvata. Mikä tämän tekstin kenttä luultavasti kutsua, joka perustuu mistä tulimme alkaen ennen? 

Yleisö:? Q. 

DAVID J MALAN:? Q. Ja emme oikeastaan ​​tarvitse kysymys merkitse se kääntyy pois, mutta Q on todellakin se, Q kyselyn luultavasti oletus, vain koska se on mitä Larry ja Sergey keksi vuotta sitten. Joten nyt haluaisin päivittää tämän sivun. Se ei näytä kaikkia, jotka eri. Mutta nyt katsoa mitä tapahtuu. 

Jos kirjoitan kissoilla ja napsauta CS50 Etsi ja anna mennä, huomaan pyyhkäistiin pois todellisten Google. Nyt Google on nyt hieman ärsyttävää, että he lisäämällä ylimääräinen parametri, jos haluatte, että URL. Että kaikki tapahtuu automaattisesti Googlen puolelta. 

Tärkeä osa on, että näytän luoneen tämän pyynnön täällä. Ja todellakin, että mitä tapahtuu. Kun sinulla on HTML että näyttää tältä, tämä on eräänlainen web-kehittäjille merkintätapa sanomalla, mennä eteenpäin ja luoda lomakkeen että kun se on toimitettu, se tulee siirry osoitteeseen. Ja kun URL on antanut arvot asioita, kuten Q, älä mene vain tähän URL-osoitteeseen. Oikeastaan, siirry kysymykseen merkki ja sitten q = kissoja. Liitä parametri, HTTP parametri niin. 

Ja vain olla erittäin tarkka, mitä on pääteltävissä here-- mutta otan enemmän explicit-- on että menetelmä haluan käyttää ei saada, eikä jotain virka, joka me lopulta nähdä. Niin lyhyt, yksinkertaisesti ymmärrys HTML ja käyttää joitakin melko yksinkertaisia ​​tunnisteita, voimme nyt alkaa luoda oman etupään käyttäjä käyttöliittymä haku moottorin takana. 

Mutta tämä on tietysti ihan hirveä. Joten haluaisin todella avata hieman parempi versio. Tämä on yksi minun valmistettu etukäteen, että on joitakin kommentteja. Mutta näet, että minä melko paljon rekonstruoida sitä. Joten tämä on jo saatavilla verkossa. Ja en sattuvat preemptively Siirry https vain pitää se yksinkertainen. 

Ja nyt Katsotaanpa avata seuraava iterointia tämän. On versio 1 sijasta 0. Mitä hyppää ulos sinua kuin hieman Eri tässä esimerkissä? 

Yleisö: [kuulumaton]. 

Joo, on tämä teksti align center. Tämä on hieman outo täällä. Mutta tämä on todellakin uusi. Ja ehkä arvaa mitä tulee tapahtumaan. Jos menen selaimeen nyt ja käydä haku-1.html, se on melkein sama asia. Mutta se on askel lähemmäs nyt hieman enemmän kaunis. Se on edelleen ruma, mutta kauniimpi, että ainakin kaikki on nyt keskitetty. 

Joten näyttää siltä, ​​että mitä olen käyttäen jokin toinen kieli kokonaan nimeltään CSS, Cascading Style Sheets. Ja CSS, suoraan sanottuna, on eräänlainen on minun henkilökohtainen mielipiteeni, atrociously suunniteltu kieli. On erittäin ärsyttävää muistaa kaikki erilaisia ​​yksityiskohtia. Mutta se on mitä tyylittelee Koko webbiin tänään. Olen loukkaantunut joku. Selvä. Mennäänpä takaisin tänne ja katso miten me todellisuudessa käyttävät tätä. Ja se kääntyy pois, ainakin se on oikeastaan ​​melko yksinkertaista kieltä. Se on vain avain arvo-pareja, kiinteistöjen ja arvot, ominaisuudet ja niiden arvot. Todellakin, tässä on yksi tällaista omaisuutta ja arvoa. 

Yksinkertaisesti käyttämällä tyyli Yhdistän minun body ja antaa sen arvoa sana paksusuolen ja toinen sana, tai omaisuutta ja arvo, Voin vaikuttaa estetiikka Web-sivun, ei välttämättä rakenne vielä, mutta estetiikka sitä. Ja vain Googling noin, ymmärrän että CSS, CSS, tukee ominaisuus nimeltään text-align, joiden arvoa olla vasemmalle, oikealle tai keskelle, esimerkiksi. 

Joten nyt kun olen uudelleen Tämän sivun, mitä en saa oli keskitetty sivu, mutta silti melko ruma. Mennään eteenpäin ja avata up version 2 hakutulosta. Ja nyt huomaa Olen tehnyt vähän enemmän. Huomaa, että täällä sisällä pään tag, siellä voi olla enemmän kuin otsikon. Itse asiassa siellä on tyyliin tag. Ja tämä on, jos se vain saa hieman sotkuinen seeing CSS joskus. 

Huomaa, että voin näyttää olevan jotain että rakenteellisesti näyttää hyvin erilaiselta. Mutta tässä nimi tag Haluan tyylitelty. Tässä ovat vanhoja ystäviä kihara olkaimet ja suljettu kihara ahdin. Ja sitten tässä on se, että omaisuuden ja sen arvon. 

Jos lataan tämän tiedoston, search2.html, lopputulos on sama. Mutta se on askel kohti parempaa suunnittelua. Factoring tämä CSS, olen ei sekoitu sitä minun HTML. Ja todellakin, kuten tulemme näkemään, saatoin uudelleen näitä ominaisuuksia ja arvoja. Jos halusin tehdä risuryppäät osaa minun sivun keskellä, Minulla ei tarvitse kirjoittaa style = text-align keskus koko paikka. Voin laittaa yhteen paikkaan ehkä pidät ylös yläosassa. 

Mutta vaikka tämä ei ole paras design. Itse asiassa, yksi niistä asioista, opit kun viettää enemmän ja enemmän aikaa Web-ohjelmointi on, että enemmän voit modularize asioita ja kerroin asioita kuten .h tiedostot olkaamme tekijä tavaraa ulos, Pidän helpers.c olkaamme tekijä asioita muutama psets sitten. Samoin voisimme haluavat tämän toteutuvan. 

Niin huomaa versiossa kolme search.html olen siivonnut johtaja sivu ja vain laittaa Tässä on linkki tag, joka toisin kuin nimi, ei anna sinulle linkin. Se yhdistää toiseen tiedostoon Poiketen href jonka arvo on tässä tapauksessa on haku-3.css Joten ymmärrän menemme nopeasti. Mutta kaikki Mulla on sellainen liikkuvat asiat ympäri. Saanen avoin haku-3.css. Siinä se on, ei mitään todella sitä. Minä vain kopioida ja liittää se uuteen tiedostoon, aivan kuten me laskelmiin tavaraa ulos osaksi muita tiedostoja ennen. Ja result-- täysin underwhelming-- tulee olemaan täsmälleen sama. Mutta liikumme toward-- Ei, se ei ole. Voi, tiedän miksi. 

Niin se näyttää olevan bugi. Ja se on jossain mielessä. Mutta haluan avata minun Verkko-välilehti. Saanen lataa sivu. Ah, miksi CSS ei sovelleta? No, CSS-tiedostoa, samoin on olla kaikkien luettavissa, niin sanotusti. Ja sekin on nykyisin kielletty. Joten anna minun tehdä chmod + r Star dot CSS-- whoops-- olemme dot CSS on vain tiedostopääte CSS-tiedostoja. Nyt haluaisin mennä takaisin selain ja reload. OK, hieman paremmin. 

Nyt haluaisin tehdä yhden asian. In search-4.html. Minulla on versio, ajattelin vain oli tapa viileämpi, vaikkakin paljon enemmän monimutkainen. Katsotaanpa tulos ensin. Sulje tämä antaa meille enemmän tilaa. Muuta tämä etsiä-4, Enter. 

Ja nyt joukko asioita ovat rikki. Aion mennä takaisin minun hakemistoon täällä. Ja nyt olen juuri menossa tekemään chmod a + r file-- koska tiedän, että exists-- kutsutaan logo.gif, joka on kuva. Ja nyt uudelleen. Ja wow-- joten nyt olen melko lähellä, rehellisesti, pitävän 1999 version Google, ja rehellisesti, 2014 versio Google, oikeassa? 

Joten se on nyt menossa niiden verkkosivuilla, lopulta, jos etsin kissoille. Ja se todellakin on. Mutta mitä minä teen toisin tässä versiossa 4? Joten emme kovin pitkään täällä. Näet tämän ongelman asettaa seitsemän lopulta. Mutta huomaa tein muutamia asioita. 

Esittelin div tag, joka on jako, hengeltään samanlainen kappaleen tag. Mutta jako on aivan kuten täällä on suorakulmainen näkymätön alue näytön. Annetaan sen ainutlaatuinen tunniste, footer, vain jotta voimme puhua se meidän HTML muualla. Tässä on toinen div sivun jonka tunnus tulee olemaan sisältöä. Se on sivun sisältöä. Ja täällä on otsikossa sivulla. 

Toisin sanoen, olen olennaisesti HTML olen henkisesti Käyttämällä tätä web-sivun kolme komponenttia, otsikko täällä tämän näkymättömän suorakulmion, sisältö keskellä, ja sitten footer alhaalla, jopa vaikka emme näe näitä asioita. Koska haluan minun pään sivu täällä, tai Css-tiedosto, Voin käyttää tätä syntaksia. 

Header ei ole tag. Se on tunnus niin se kääntyy että tekemällä #header, Voin nyt hakea yhtä tai useampaa ominaisuuksia otsikkoa. Voin tehdä sama sisältö, sama sisältö tänne. 

Joten Esimerkiksi footer, ilmoitus kaikki nämä ominaisuudet olen lisäämällä. Ja tiedän, että ne ovat olemassa vain lukemalla ylös asiakirjat CSS. Fonttikoko tulee olemaan smaller-- joten jotkut suhteellinen kirjasinkoko. Paino tulee olemaan rohkea. Margin-- kuinka monta pikseliä noin it-- on 20 pikseliä. Ja se tulee olemaan keskitetty. 

Mutta juuri nyt, sivu näyttää tältä. Jos en ole tyytyväinen Oma kopio oikeassa, Voisin tehdä jotain punaista väriä. Ja sitten voin tallentaa, ladata, ja nyt olen tyylitelty footer. Joten tämä on vain vihjaten teho mitä voit tehdä web-sivun kohentaa tilannetta esityksillään. 

Ja vielä siistimpi kuin tämä, jos haluat penkoa todellisia sivustot, et voi pysyvästi muuttaa niitä. Mutta jos minä avata Chromen Inspector uudelleen ja minä mene vasemmalle puolelle täällä, joka osoittaa Facebookin HTML, mutta näyttää oikealla puolella kaikki sen CSS, voit joko ja muuttaa asioita lennossa. Joten anna minun mennä eteenpäin ja tehdä tätä. 

Anna minun mennä eteenpäin ja ohjaus klikkaa tätä satunnainen sana täällä, allekirjoittaa, ja valitse Tarkista Element. Chrome kätevästi hyppää H1 tag että Facebook käyttää. Ja huomaa täällä Facebook on sellainen laiskasti kovakoodattu kirjasinkokoa kuin omaisuuden täällä. 

Niin cool juttu kuitenkin on että jos minä itse mennä tänne ja sanoa, oh, Facebook, en pidä että 64 pikseliä, voimme nyt muuttaa Facebook. Tietenkin me vain muuttaa sitä minulle henkilökohtaisesti tällä hetkellä. Mutta tämä on vain yksi työkalu meidän työkalusarja että menee jotta voimme nipistää ja selvittää ja myös diagnosoimaan asioita omassa web-sivuja. Ja voisimme samalla mennä yli täällä, mikä on sama asia. Jos todella haluat saada fancy, I Tarkoitan, nyt voit todella muuntua sivu ja tehdä hulluja asioita. 

Miksi tämä kaikki hyödyllinen? No, loppujen lopuksi, me olemme menossa haluavat olla osaa luoda web-sivuja, jotka ohjaavat oman takapäiden, eikä vain Googlen ja ulkoistaminen loppupäätä siellä. Haluammeko todella arvo, esimerkiksi meidän hakukoneen toiminta Yhdistän mennä olemaan joku muu, mutta jotain search.php, jossa search.php on meidän oma palvelin, ei jonkun toisen. 

Ja niin sinne, me oikeastaan otettava käyttöön uusi kieli. Joten olemme jo tutustunut yhden uuden kieli täällä, tai kaksi todella, HTML ja CSS. Mutta ne todella ovat vain rakenteellisia ja esteettisiä kielillä. He eivät ohjelmointi kielet sinänsä. Ja se on suunnilleen yhtä paljon virallisia kun vietämme niitä. Koska alamme nyt siirtyäkseen PHP. 

Joten PHP on todellinen ohjelmointikieli. Se on skriptikieli siinä mielessä, että se on tarkoitus olla kevyempi kuin jotain C. Ja se on tulkittu kieli, mikä tarkoittaa että se ei ole koottu. Joten pähkinänkuoressa, mitä se merkitsi kun käytimme kieltä kuten C ja meidän piti kääntää sen? Mitä tarkoittaa se, että kääntää C-lähdekoodia? Yleisö: [kuulumaton]. DAVID J MALAN: Sano se uudestaan? Yleisö: [kuulumaton]. DAVID J MALAN: Perfect. Se kääntyy binary. Se kääntyy nollia ja ykkösiä varsinaisista Englanti-kuin lähdekoodia. Ja sitten voimme todella ajaa näitä nollia ja ykkösiä viemällä ne läpi CPU tuplaklikkaamalla kuvaketta tai käynnissä komennolla. 

PHP ja Python ja Ruby ja Perl ja JavaScript ja rypäleterttuja muut kielet tulkitaan kielillä, toisin sanoen et kokoamisessa. Pikemminkin olet ruokkia niitä syötteenä ohjelma nimeltä tulkki. Ja että tulkki, jonka joku muu kirjoitti, lukee lähdekoodin ylhäältä alas, vasemmalta oikealle ja vain tulkitsee nämä linjat ja tekee mitä sanot. 

Joten jos törmäät Siinä lukee Print, se ei välttämättä muuntaa Tulosta vastaavaksi nollia ja ykkösiä. Se vain on tämä tulkki kuten iso jos ehto, joka sanoo, jos ohjelmoijan opetusta Tulosta, niin toimi seuraavasti. Niin se tulkitsee sen vain jonka logiikkaa läpi mitä kerrot sen tehdä. 

Ja PHP on yksi näistä kielistä. Ja PHP vuotta sitten oli suunniteltu Juuri web ohjelmointi. Ja se oli alun perin erittäin huolimaton sotkuinen kieltä. Ja todellakin, siellä on valtava määrä huono PHP siellä. Mutta itse kielen on kypsynyt vuosien varrella, niin paljon, että nyt se on todella ihana seuraavaan vaiheeseen pedagogisesti C: ltä, koska se on niin darned tuttu kaiken olet juuri nähneet viime viikkoina. 

Yksi alkuperäisestä erosta näemme ei ole mitään päätehtävä enää. Kun aloitat kirjoittaa koodia, se on vain menossa toteutetaan mitä tahansa, kuten tulemme näkemään hetken. Samaan aikaan, tässä mitä muuttuja näyttää PHP. Se on vähän erilainen, mutta vain hädin tuskin. 

PHP, siellä ei ole vahva tyypitys. On viikko kirjoittamista, mikä tarkoittaa vain sitä, että ovat tietotyyppejä kuten jouset ja numeroita ja muita asioita. Mutta et vaivaudu täsmennetään mitä ne ovat enää. PHP luvut sitä sinulle. Dollarin merkki on vain päätös että PHP ihmiset tekivät vuoden sitten niin, että mikä tahansa muuttujan PHP vain alkaa dollarin merkki. Se on oikeastaan ​​eräänlainen hyödyllinen, se hyppää ulos sinua hieman. 

Mutta sen jälkeen, tämä on edellytys PHP. Mikä on erilaista verrattuna C? Huijata question-- mitään, joka on oikeastaan ​​todella mukavaa. Boolen lausekkeet PHP-- sama. Boolen kanssa ja vastaan tai, kytkimet, silmukat, silmukat, loops-- OK, tämä on erilainen. 

Joten se kääntyy pois siellä pari muita ominaisuuksia PHP. Yksi niistä on itse asiassa tämän, joka on ihanan kätevä. Jos $ numerot on joukko, joka olet julisti aiemmin ohjelmaan, sinulla on tämä fancy kullekin rakenteelle että sen sijaan, että tekee kaiken tuon harmittaa I on yhtä kuin 0, I on vähemmän kuin tämä, [? I ++?] kunkin numerot numero, jossa jokainen Näiden dollarin merkki arvoja on vain muuttuja, ja jälkimmäinen voit ajatella kuin I. Voisit soittaa sitä mitä haluat. Kutsuin sitä määrää. Tämä on menossa kerrata yli array soittanut. Ja jokaisen iteraation, se on menossa päivittää automaattisesti sinulle dollarin merkki numero muuttuvan niin, että olet jatkuvasti pääsevät haluamasi muuttuja ilman tehdä mitään hakasulkeen merkintää tai indeksointivaiheen array. 

Tämän lisäksi meillä on jopa asioita, kuten taulukot, jotka näyttävät lähes sama, paitsi se on hyvin yleinen, kuten tulemme katso, niin PHP ja JavaScript pre alustaa array hakasulkuja käyttämällä. C käyttää aaltosulkeita. Joten se on hieman erilainen, vaikka emme oikeastaan ​​käytä, että temppu paljon. 

Mutta vieläkin voimallisemmin, PHP on assosiatiivinen paneelit, joka on hieno tapa sanoa hash taulukoita. Itse asiassa, jos haluat julistaa hash taulukon PHP, toisin kuin C-- kuinka monta riviä koodia se kestää todella toteuttaa hash taulukon C? Tai kuinka monta riviä koodia on se ottaen toteuttaa hash taulukon C? Joten se on luultavasti paljon, eikö? Se on muutamia kymmeniä, ehkä 100 tai 200. Se on triviaali. Tai se on noin olla, koska sinun pian nähdä, triviaali toteuttaa tiiviste [Kuultavissa] ja myös kokeilla. Mutta PHP--, enkä suoraan sanottuna luultavasti ei pitäisi kertoa tätä kunnes Monday-- PHP, jos Haluatko pöytä, tehty. Se hash table-- niin yhdellä rivillä koodia. Ja 

Paljon kielet tehdä. Hauskaa PSET viisi. Niin paljon kieliä tehdä tämän. Ne antavat sinulle näitä abstraktioita että muut ihmiset, muut ohjelmoijat, luoneet sinulle niin, että voit seistä heidän harteillaan ja alkaa käyttää ideoita, jotka ovat erittäin pakottavia, kuten hash taulukoita ja puita ja yrittää. Mutta sinun ei välttämättä tarvitse toteuttaa näitä asioita itse. 

Ja niin lopulta, mitä aiomme käyttää PHP on mahdollisesti kirjallisesti ohjelmat on ns komentorivi. Voisimme luoda jokainen ohjelma olemme kirjoittanut tämän lukukauden toistaiseksi, paitsi ehkä Breakout, joka käyttää SPL, joka on spesifinen C tällä hetkellä. Mutta joka toinen ongelma asetettu, varmasti Mario ja Caesar ja Vigenere ja [? Crack?] Ja eteenpäin, me voisi uudelleen toteuttaa PHP, ja todennäköisesti hieman helpommin. 

Mutta mitä me loppujen lopuksi menossa käyttää PHP on web-ohjelmointia. Ja aiomme esitellä seuraavalle viikko henkinen malli, paradigma nimeltään MVC, malli näkymä-ohjain, jotka, jos olet tehnyt ohjelmointi ennen Python tai Ruby tai muualla, voit voisi tietää tämän joukkueen kanssa Kiskot ja Django ja vastaavat. Mutta jos olet uusi tämäkin, näet että tämä on itse asiassa hyvin luonnollinen laajentaminen factorization ja tavallaan suunnittelu koodia, että olemme tehnyt C. Menemme nyt soveltaa joitakin niistä oppitunteja PHP niin että loppujen lopuksi olemme täytäntöön omat sivustot. Ja jos olet tavallaan mesmerised tai hämmästynyt että aiomme tehdä kaikki niin nopeasti, ymmärtää, että lähes jokainen lukukausi, lähes 90% opiskelijat CS50, mukaan lukien jotka eivät ole koskaan ohjelmoitu aiemmin, päätyä tekemään lopullinen hankkeita, perustuvat web-ohjelmointia. Ja niin näet, että tuotto ovat korkeat tulevina viikkoina. Joten me nähdään sitten maanantaina. 

SPEAKER 1: Ja nyt, Deep Ajatukset Daven Farnham. Hash taulukoita. 

[Naurua]