[Musiikkia] 

DAVID J MALAN: Tämä on CS50 ja tämä on alku viikolla 7. Joten tervetuloa takaisin. Ja ehkä muistatte, että ongelmatilanteissa asettanut neljä, oli hieman raadonsyöjä metsästää joidenkin mahtavia palkintoja jolloin jälkeen voit palauttaa kuvia henkilökunta sekä täällä että New Haven, olit haastoi löytää niin monta ne tietotekniikan tutkijoita kuin voit. Ja meillä koko nippu huomautuksia. Ajattelin jakaa muutaman kanssanne täällä tänään. 

Ja me post kaikki näistä online. Mutta erityisesti, halusin kiinnittää huomiota to-- hyvin yksi, Sam oli melkoisesti niistä yleensä poseeraa kuin tämä. Mutta näyttää siltä, ​​että vuodesta tänä aamuna, voittaja oli tietty joku nimeltä Ken kanssa 24 henkilöstön kaapattu kamera tai muutama enemmän, kun otetaan tilin useita henkilöstön kuvia. Kuvassa Ken seuraava Mary New Haven. 

Nyt, Ken, vaikka, muuttuu out on hieman kulma tapaus että ei ole vielä tapahtunut ennen. On käynyt ilmi, että se ei tapahtunut minulle laittaa pikkupräntin ongelmatilanteissa asettanut neljä joka sanoo, että henkilöstö ovat voida myöntää mahtavia palkintoja koska Ken on tietenkin yksi valokuvaajat meidän henkilökunta. Nyt, että sanoi, hän alunperin kirjoitti minulle sanoa älä lähetä näitä kuvia verkossa. Mielestäni suuri osa koska useimmat kuvat että Valokuvaajan otti näyttää vähän jotain tällaista. Ja vastaavat. 

Mutta Ken haluaisi minun vakuuttaa sinulle että hän on erittäin hyvä valokuvaaja, hän on ammattilainen, hän ottaa kuvia, jotka eivät ole epäselvä, jotka ovat paremmin keskittyä, ja hän otti melkoisesti oman henkilökunnan. Mutta sen sijaan vain tunnustaa Ken, mitä ajattelimme tehdä on käydä läpi luettelon todellinen opiskelijat, jotka ovat jättäneet. Ja käy ilmi, että Lance kanssa 15 kuvia tästä aamusta oli meidän voittaja. 

Ja Kuvassa on Lance kanssa Colton, kanssa Skaz, itseni kanssa, ja Samin kanssa. Mutta sitten käy ilmi, että vuodesta 11:46, joten vain vähän sitten, Menin takaisin minun email ja löytyi että meillä oli vielä yksi jättämisestä jonka opiskelija nimeltä Bonnie jonka sähköpostien sanoi vain tämä. Aio valehdella, olen Näin tunnilla. Ja sitten vielä liittää vain 14 kuvaa, yksi ujo Lance n 15. 

Mutta Bonnie n valokuvia, se kääntyy out oli useita henkilökunnan jäseniä, Sam heidän joukossaan, joten mitä luulimme tekisi on tunnustaa molemmat. Joten lisäksi saada Dropbox tilaa, että jokainen, joka osallistui vastaanottaa, nämä kaksi osaa tulee myös saada mukava katettu lounas heille ja niiden jakso Mates tulevalla viikolla. Ja niin kuulet meiltä, Lance ja Bonnie, siitä. Niin iso onnittelut heille. Nyt ne teistä, jotka olisi kuten lounas yleisemmin tietää, että CS50 lounas Cambridge ja New Haven on perjantaina. Siirry CS50 verkkosivuilla slash RSVP. Ja nyt sana seminaareista. Lisää curricularly. Joten olemme lähestymässä kohta lukukauden jos sinun pitäisi aloittaa ajatellut lopullinen hankkeita. Ja itse asiassa vain vähän, tulee niin kutsuttua pre ehdotuksia johtua. Joten ennen ehdotusten tarkoitus olla melko vähäinen vaikutus ja todella vain mahdollisuus voit kirjoittaa lyhyen viestin opetukseesi mies voi tuntea hänelle mitä olet ajatellut sinua kannattaa tehdä oman opinnäytetyön. 

Nyt monet opiskelijat päätyvät tekee web-pohjainen opinnäytetöiden. Ja tietysti olemme vain nyt viime viikolla tässä ja sen jälkeen sukeltamalla web ohjelmointi. Joten ei hätää, jos ei ole aavistustakaan siitä, miten voisitte rakentaa ajatuksia saatat olla mielessäsi. Tämä on oikeastaan ​​vain pakottaa toiminto saada sinut ajattelua ja puhuminen kanssa TF siitä. Mutta auttaa sinua siinä, ja lopullinen hankkeiden lopulta, tietävät, että CS50 on perinne tarjota seminaareja. 

Ja nämä ovat valinnaisia, kädet, tai luento perustuu mahdollisuuksiin oppia lisää aiheita, jotka ovat vähän liitännäinen kurssin oppimäärän, mutta silti ihana materiaali ajaa opinnäytetöiden. Ja niin tämä on luettelo, joka on CS50 henkilökunta täällä New Haven ovat keksiä varten tänä vuonna noin iOS ohjelmointi, Android ohjelmointi, pelin kehitys, ja rypäleterttuja enemmän työkaluja ja kieliä ja tekniikoita. 

Joten pitää silmällä CS50 verkkosivuilla. Ja sillä välin, jos haluat rekisteröi kiinnostuksesi missä tahansa näistä, Siirry CS50 n slash rekisteriin. Ja me sitten seurata siitä, päivää ja lentoajat ja paikat ja everything-- useimmat kaikki on siirtää ja myös saatavilla pyynnöstä jälkeen, jos et voi todella tehdä sitä. Joten pitemmittä puheitta, me jäi viime kerralla kanssa GET. 

Ja tämä oli kuin viesti, jonka oli sisällä virtuaalisen kirjekuoren, muistaa, että teimme reitittimeltä reitittimen reitittimen välillä selain ja Web- palvelin. Ja että viesti katsoin vähän jotain tällaista. Tämä oli enemmän mystistä viestin, että oli itse sisällä kirjekuoren kirjoitettu paperille, jonka ensimmäinen rivi sanoo kirjaimellisesti, saada slash. 

Ja aivan kuten järki tarkistaa, mitä slash tarkoittavat? Mitä slash tarkoittaa, kun pyytämällä sivuston? Voit pyytää sitä koko ajan. Useimmat tahansa käyt sivustossa, sinua eivät itse kirjoita tiedoston nimi. Luultavasti vain mennä Facebook.com, syöttää, gmail.com, tai vastaavat. Ja mitä slash edustaa? Mitä tiedosto? Tai mitä sivu, erityisesti? 

Indeksi, joo. Joten oletus sivu. Joten jos et määritä tiedosto nimi alamme nähdä, olet todella vain pyynnön anna minulle oletussivu Facebook tai antaa minulle minun postilaatikkoon tai antaa minulle oletussivu uutiset CNN: n verkkosivuilla tai vastaavaa. Ja palvelin vastaa että viesti jotain näin, sanoa kyllä, minä puhua HTTP-versiota 1.1. 

200, joka on tila koodi että me ihmiset harvoin koskaan nähdä, koska se on hyvä. Koska se tarkoittaa OK, pyyntö vastaanotettiin ja käsiteltävä asianmukaisesti. Ja sisältötyyppi ilmeisesti vastaus on usein, mutta ei aina, tekstiä. Ja erityisesti, HTML. Ja se on todella jossa katsomme tänään. 

Joten itse asiassa, aion mennä eteenpäin ja avata selaimen. Aion käyttää Chrome, voit käyttää eniten tahansa selain tulevina viikkoina. Suosittelemme tavallisesti Chrome koska se on erityisen hyvä ohjelmistokehittäjille. Se sai paljon rakennettu työkaluja, jotka helpottavat kehittää paitsi HTML ja CSS, asiat me alkaa puhua tänään, mutta myös muilla kielillä. 

Ja aion mennä eteenpäin ja mennä to-- Aion valvoa napsautuksella tai oikealle osoittamalla mitä tahansa web-sivulla. Ja aion mennä Tarkasta Element. Ja aion nipistää minun näyttö vain vähän täällä. Siirryn tämä pohjaan. Joten tämä on mitä kutsutaan Chromen tarkastaja. Joten tämä on kuin virheenkorjaus työkalu rakennettu Chrome. 

Kaikki sinulla on jo tämän jos olet käyttänyt Chrome. Ja sen avulla voit nähdä, mitä tapahtuu on alla huppu joidenkin web-sivun. Joten todella ottaa katso tätä seuraavasti. Se on paljon enemmän ominaisuuksia ja välitämme tänään. Mutta on näitä välilehdet täällä. Elementtejä, verkko, lähteet, aikajana, ja joitakin muita juttuja. Aion klikkaa Verkko hetkeksi. 

Ja se on vähän ylivoimainen ensi silmäyksellä täällä. Mutta mitä aion tehdä, on antaa minulle yksinkertaistaa sitä vähän. Aion päälle tallennus valoa niin että se on punainen. Ja aion sanoa säilyttää loki. Ja tämä on vain hieman mitä olen tajunnut ajan mittaan tulee säästää kaikki mikä tapahtuu selaimessa. Ja nyt aion mennä on http://facebook.com. 

Oikeastaan, tehdään www hyvä toimenpide, kauttaviiva. Anna. Niin URL että monet saatat käynyt. Ja nyt Facebookin web sivu nousee yläreunassa. Ja sitten koko joukko tavaraa lensi alareunassa. Ja itse asiassa, se kääntyy pois, että kun käyt Facebook.com, et ole vain tehdä yksi HTTP-pyyntö, käy ilmi, että menossa Facebook.com lähettää 41 näistä kirjekuoria, jokaisella on oma GET-pyynnön, kuten, vaikka takana näytön täällä, alareunassa näytön se osoittaa, että todellakin, minun selain teki 41. pyyntöjä. 

Ja yhteensä, se siirretään 861 kilotavua ja kesti jostain syystä peräti kahdeksan sekuntia ladata kaikki tämä. Niin, että on itse asiassa hieman outo että Facebookin sivusto veisi että pitkä, mutta olkoon se tässä tapauksessa. Nyt kaikki tämä en todellakaan välitä noin lukuun ottamatta ylimmän pyynnöstä. Joten mennään tämä täällä ja haluan loitontaa vain hetken. 

Ja haluan lähentää tässä. Joten mitä olen tehnyt vasemmalla vaikka siellä on paljon meneillään täällä on olen korostanut Facebook.com ja sitten Huomaan, että olen vierittämällä, vierittämällä, vierittämällä, pyytää otsikot. Ja huomaat, että Chrome näyttää minulle olennaisesti sisemmän sisältö pyynnön tein. Se ei muoto aivan samalla tavalla, mutta huomaa siellä mainintaa saada, huomaa siellä mainintaa isäntä, Facebook.com, polku, tai slash, joka on tiedosto pyysin. 

Ja sitten jos selaa varmuuskopioida, käymme oikeastaan nähdä, että mitä Facebook palasi minulle on kaikki nämä otsikot. Niin sisällä että virtuaalinen kirjekuori todellakin olemassa paljon keskeinen arvo-pareja. Sana, paksusuoli, ja sitten arvo. Sana, paksusuoli, ja arvo. Näitä kutsutaan otsikot. Ja siellä on paljon enemmän yksityiskohtia täällä kuin me todella kiinnostaa juuri nyt. 

Mutta tämä on toinen viimeisin siellä, huomata, että Facebook.com palvelin, todellakin sanoi tässä tulee tekstiä HTML. Joten kaikki tämä on sanoa että kun pyydät Web sivun selaimen palvelin, että palvelin vastaa kirjekuori omien jonka sisällä on tekstiä. Toisin sanoen, HTML-. HyperText Markup Language. Joka on toinen kieli että esittelemme tänään että ihmiset tai tietokoneet tuottavat täytäntöönpanemiseksi verkkosivuja. 

Erityisesti katsokaamme tähän. Aion nyt mennä takaisin Facebookin verkkosivuilla. Ja aion vain ohjaus napsautuksella tai oikealla painikkeella ja klikkaa Näytä sivun lähdekoodi. Ja vaikka et käytä Chrome, IE voi tehdä tätä, Firefox voi tehdä tämän, Safari voi tehdä tämän, vaikka valikosta vaihtoehdoista voisi näyttää hieman erilaiselta. Ja tämä on HTML että Mark ja Yhtiö Facebookissa kirjoittanut. 

Ja kollektiivisesti, tällä kielellä täällä toteuttaa sininen ja valkoinen sivu että näimme hetki sitten. Nyt, tämä on vähän ylivoimainen. Mutta jos katsomme ylös vasemmassa yläkulmassa, olemme menossa alkaa nähdä joitakin malleja. Näyttää siltä, ​​että on paljon Näiden avoin kulmasulje ja sitten on tämä avainsanan HTML. Tässä toinen avoin kulmasulkeen ja pää. 

Tässä on, jos me selaa ja alas ja alas, olen menossa mennä eteenpäin ja yrittää etsiä jotain. Siellä tiensä yli oikealla tässä alkusulkumerkki elin. Ja muistaa viime aika ehdotimme että yksinkertaisin sivun että ihmisen voi kirjoittaa saattaa näyttää hieman jotain tällaista. Avaavat HTML tag, avoin pää tag, avoin otsikkokoodi, suljettiin sitten otsikko, suljettu pää, avoin body, tekstiä, suljettu runko, suljettu HTML. 

Mutta tauko täällä vain hetken. Tämä koodi, vaikka olet koskaan kirjoittanut ennen mutta silti eivät oikein ymmärrä mitä tapahtuu, näyttää aika hyvältä. Oikea, se on erittäin puhdasta. Se on erittäin tyylillisesti mukava. Paljon sisennys ja valkoinen tila. Facebook ei ole. Joten miksi on Facebook niin paljon pahempi kuin minä kirjoittamaan HTML? Ilmeisesti. 

Oikea, tämä on kuin yksi viidestä tyyli. On pakottavaa syytä ne leikata nämä kulmat. Selvä, joten he eivät halua helpottaa voit lukea sen. Joten jossain mielessä, he hämärtävät se, tavallaan muokkaamisella se ainakin esteettisesti niin että se on vaikeampi Myspace mennä ja repiä pois niiden kotisivu ja HTML se. On käynyt ilmi, että ohjelmia kuitenkin, kuten Chrome, voimme puhdistaa tämän ylös Super helposti. Joten se ei ole aivan että syyksi. Mitä muuta voisi olla syy. Joo. Joo, valkoinen tila kustannukset tietoja. Mitä sinä tarkoitat? Joo, täsmälleen. Jos osut sarkainnäppäintä paljon tai välilyöntiä, harkitse seurauksia. Joten jokainen näppäimistön on [Kuulumaton] vastaa yksi tavu. 

Niin oletetaan, että Merkitse tai jollekin devs näinä päivinä osuu välilyöntiä vain kerran Tässä HTML-sivu, edustaa Facebookin kotisivu. Ja Facebook on paljon käyttäjistä näinä päivinä. Niin oletetaan, että Facebookin kotisivu on käynyt miljardia ihmistä tänään. Ja joku Facebook on välilyöntiä vain kerran. 

Joten yksi ylimääräinen tavu, miljardia pyyntöjä, kuinka paljon enemmän tietoa on Facebook siirtämällä Internetissä koska joku osuma välinäppäintä hänen näppäimistö? Miljardi tavua, tai yksi gigatavu dataa lähetetään Facebook palvelimet ihmisille ympäri maailma ilman hyvää syytä. Nyt, se on vain yksi tila. 

Kuvitelkaa, jos me todella puhdista jutun ja sisennetty sitä ja lisätään paljon valkoista tilaa ja sarkainmerkeillä ja tilat, voit päätyä menoja gigatavua, jos ei Terra tavua enemmän tilaa. Ja niin Super yleisiä todellisia web-kehitystä on minify koodi. Ja me lopulta nähdä miten voit tehdä tämän. 

Mutta tänään aloitamme kirjoittaa koodia se on todella luettavissa meille ihmisille. On käynyt ilmi, mutta jos menet takaisin Tämän työkalun Chrome Tarkista Element, Aiemmin olimme Verkko-välilehteä. Osoittautuu, että jos menet elementtejä välilehti, mitä itse nähdä on Chromen melko painettu versio saman HTML. Joten olemme deobfuscated sen. Joten se ei ottelu tietokone. Ja nyt voit itse klikkaa ympäri ja aloita nähdä hierarkia joka on web-sivu. Joten itse tehdä tämän. Aion mennä eteenpäin ja avata edelleen Mac ohjelma nimeltä tekstin muokkauksen. Ja muistuttaa, että tämä on vain Super yksinkertainen teksti-ohjelman. Windows on notepad.exe. Ja aion Verbatim kirjoittamalla seuraavan. Doc tyyppi HTML, alkusulkumerkki HTML, suljettu kiinnike HTML, meillä on pää sivu täällä, loppuun pään sivu täällä, otsikko on kuin, Hello World. 

Ja sitten täällä, me tarvitsemme ruumiin sivun. Suljettu elin. Ja sitten täällä, Hei maailma. Selvä. Joten olemme kirjoittanut huippunopea sivun. Aion tallentaa sen hello.html työpöydälle. Maciin on menossa valittaa, ajattelu, että hetkinen, tämä on tekstitiedosto, do haluat soittaa sitä .txt? Mutta ei, haluan käyttää piste HTML. 

Ja sitten mitä mukavaa, jos en tupla klikkaa tätä tiedostoa, hello.html, tässä on minun verkkosivu. Valitettavasti olen vain ihminen maailmassa jotka voivat vierailla tämän sivun juuri nyt. Koska jos se elää ilmeisesti? Se on minun Mac, eikö? Joka on hyödytön. Kuin kukaan tässä huoneessa puhumattakaan Internetissä voi itse käydä sivulla. Joten tänään, meidän on käyttöön toinen elementti. 

Ja tehdä tämän, aion mennä eteenpäin ja avata pilvi 9. Joten pilvi 9 on tietenkin pilvi pohjainen service-- CS50 IDE-- Tämä on meidän kaikkien työtilojen käynnissä jossain internetissä. Ja se tarkoittaa, että kaikki meidän tiedostot ovat julkisesti saatavilla jo. Joten mene eteenpäin ja tehdä tämän. Aion mennä eteenpäin ja Luo uusi tiedosto NCS50IDE. Aion tallentaa sen ennen kuten hello.html ja valitse tallenna. Ja nyt vain säästää aikaa, aion mennä eteenpäin ja kopioi liitä tämä koodi sijaan kirjoita se. Ja tallenna se. Ja nyt minulla on tiedosto nimeltä hello.html. Mutta miten voin itse avaa se Web-sivu? No, se osoittautuu rakennettu sisään CS50 IDE ei ole vain kääntäjä kuten kalahtaa ja debuggeri kuten GDB ja rypäleterttuja muita ohjelmia, siellä oikeastaan ​​täysivaltaiseksi web-palvelin käynnissä sisällä CS50 IDE. 

Kaikki te, toisin sanoen, on oma web-palvelin. Ja web-palvelin on vain pala ohjelmistojen joiden tarkoitus elämässä on palvella jopa web-sivuja. Kuuntelemaan pyyntöjä selaimet ja vastata vähän virtuaalisen kirjekuoret jonka sisällä on sisältöä että olen kirjoittanut. Joten tämä web-palvelin on todella vapaa ja avoimen lähdekoodin. Jos avoimen lähdekoodin vain tarkoittaa ohjelmisto, että joku muu on kirjoittanut, että kaikki voimme itse nähdä ja ladata ja jopa muutoksia lähdekoodiin. Ja sitä kutsutaan Apache. 

Ja teimme sen hieman helpompi käyttää CS50IDE kutsumalla sitä Apache 50. Niin että se voi todella ymmärtämään seuraavat. Aion sanoa Apache 50 alusta. Ja sitten olen juuri menossa sanoa piste. Ja näemme hieman mystistä sanomalla asettamalla Apachen asiakirja [? ryhmä?] kotia, ubuntu, mitä se on, slash työtila. Alkaen web-palvelin Apache 2 onnistuneesti. 

Niin pitkän tarinan lyhyesti, olen juuri työnsi painiketta ja päällä web-palvelin, joka on nyt kuuntelee Internetissä TCP-portti 80 tiettyyn osoitteeseen. Ja tässä sanotaan, ja tämä muuttuu Based on käyttäjätunnuksesi ja muut tekijät, mutta huomaa nyt jos napsautan tämä, IDE50 piste jharvard ja niin ja niin, huomaa että koko tämän ajan jo usean viikkoa, saatat olla huomannut, että oma käyttäjätunnus on upotettu sivun oikeassa nurkassa CS50IDE. 

Ja tosiasiallisesti on ollut koko tämän ajoittaa osoite, johon voit käydä kaikki tiedostot verkon kautta. Tähän asti se ei ole väliä, koska C, te yleensä haluavat asiat käynnissä terminaali, ei verkossa. Mutta tänään, alamme kirjallisesti web-pohjainen koodi että haluamme esteetön pääsy julkinen URL. Joten mitä aion vain klikata URL-osoitteen. 

Ja huomaa, että näen melko ruma indeksi, luokkahakemisto, mutta mitä tiedosto hyppää ulos sinua luultavasti? Hello.html. Että koska olen tallentanut tiedosto minun työtilaan. Ja mitä olen kertonut Apache www-palvelin on katsoa Daavidin työtilassa hakemistoon. Ja anna kenenkään maailman nähdä kyseiset tiedostot. 

Ja todellakin, jos minä nyt klikkaa hello.html, Näen tässä välilehdessä juuri tiedoston. Nyt huomaa, pilvi 9 tekee jotain vähän hyötyä meille. Sisällä CS50 IDE, huomaa siellä yhtäkkiä osoiteriville. Tämä johtuu siitä, vaikka olemme Chromen vierailla CS50IDE, sisällä CS50IDE on oma versio web-selaimen juuri nyt. Ja niin sen sijaan mutkistaa asioita sinänsä, Aion mennä eteenpäin ja vain kopioida URL-osoitteen. Aion mennä eteenpäin ja vain avata oman Chrome-ikkuna. Joten ei ole taikuutta täällä, ei CS50IDE. Olen juuri menossa kirjaimellisesti liittää minun J Harvardin URL ja paina Enter. Ja voila, nyt minä, ja teoriassa, jokainen Internetissä, jos olen määrittänyt käyttöoikeudet asianmukaisesti, voi käydä tätä tiedostoa. Ja nyt, jos sanoin hello.html, voila, siellä on minun uskomattoman underwhelming sivun. Joten tehdä nopeasti järki tarkistaa. Koska kaikki, että on käsitteellinen perustaa. Ja olemme oikeastaan ​​ole oikeastaan opetti, miten kirjoittaa HTML sinänsä. Kysyttävää tähän mennessä siitä, mitä juuri tapahtui? Kyllä. Onko CS50 omistamaan nämä verkkosivut? Missä mielessä? Hyvä kysymys. Joten CS50: n omistaa CS50.io. Olemme todellakin osti että verkkotunnus. Ja luonteen mukaan te kirjautumalla CS50IDE, te kaikki saavat mitä kutsutaan aliverkkotunnus. 

Niin IDE50-Malan, tai IDE50-Rob.CS50.io, se on teidän yksilöllinen osoite sisällä meidän verkkotunnus. Joten varten tietenkin sinulla on oma ainutlaatuinen osoite. Mutta olemme yksinkertaistettu asioita ostaa aluetunnus, CS50 piste I / O ja sitten kaikki muu on sisällä että, niin sanoakseni. Ja me palaamme että pari viikkoa luultavasti, erityisesti opinnäytetyön aika, kun jotkut teistä ehkä saada oman verkkotunnuksia. Se on itse asiassa suhteellisen suoraviivainen. Selvä. Joten nyt tehdä tätä. Aion mennä takaisin CS50IDE, jossa minun tiedosto juuri nyt, hello.html, ei ole kovin kiinnostava. Haluaisin tehdä jotain hieman mukavampaa kuin että. Joten aion tehdä jotain tällaista. Minäpä auki paragraphs.html. Joten tämä on tiedosto kirjoitin etukäteen. Ylimpänä se, kuten aina, meillä on kommentteja. Mutta HTML, kommentteja näyttää hieman erilaiselta. On line kolme ja linja 14, sinua katso syntaksi alkavat kommentti ja päättyy kommenttia. 

Mutta mikään tavaraa välillä asioissa toiminnallisesti. Se on vain merkinnän ihmisen mitä täällä tapahtuu. Ja aivan kuten nopea järki tarkista, jos minä selaa, mitä ilmeinen uusi tag että olemme ottaneet käyttöön? Tunnisteet tähän mennessä olemme nähneet avoinna kiinnike HTML, pää, otsikko, ja runko. Mutta mitä on tietysti uutta nyt? 

Joo, niin s. P tag tai kohta tag. Ja sitten minä vain lainannut oletus Latinankielinen teksti muodostaa minun kappaleita. Koska mitä halusin osoittavat, miten saatat edustavat tekstikappaletta HTML. Ja niin mitä alkaa tapahtua tässä on se, että siellä on jo kuvio kehittää. Ja anna minun mennä eteenpäin ja tehdä tämän. Haluaisin ensin sammuttaa Apache. Ja aion kertoa sen käynnistää itsensä jälleen sisällä nykypäivän lähde seitsemän m hakemistoon. Niin että minulla on pääsy kaikkeen. 

Ja nyt, jos menen takaisin Tämän luokkahakemisto, huomaa näen joka tiedosto tänään. Ja näet vuonna seuraava ongelma asettaa käymme antaa sinulle ohjeita tekemiseen juuri tämän. Jos avaan paragraphs.html, tämä saattaa samoin näyttää ohjelmointikieli sinulle, jos et puhu tai lukea latina. Mutta tämä on vain kolme kohtaa tekstiä, joka on merkitty ylös HTML. 

Ja huomaa kohta tauot niiden välillä. Koska se kääntyy pois, ja vaikka ehkä taipuvaisia ​​tehdä tämän, kun taas todellisessa maailmassa, jos haluat laittaa linja taukoja asioiden välillä, saatat yksinkertaisesti tehdä tämän ja lyödä Tallenna. Ja nyt, jos olen ladata täällä, ilmoitus että kaikki vain sumentaa yhdessä vain yksi möykky tekstiä. Koska HTML on sellainen tyhmä kielen. 

Se on tarkoitettu käytettäväksi tällaisissa siten, että selain vain do selkeästi mitä kerrot sen tehdä. Joten jos et kerro sitä anna minulle uusi kohta, et tule näkemään uusi kohta. Ja itse asiassa, mitä selain aikoo tehdä on vaikka enteriä, sanokaamme uudelleen ja uudelleen ja uudelleen, siirtämällä tämä teksti tavoin alas ruudulla ja tallentaa ja sitten uudelleen, selain on menossa romahtaa kaikki tämä valkoinen tila osaksi vain yksi, näkyvä välilyönnillä. Selvä. Niin, että kohta tag. Ja niin mitä kuvio joka on kehitysmaiden täällä? No, se näyttää olevan niin, että HTML on kyse alkavat tag ja päättyy tag. Ja mikä on tagi? No, se on vain murikka syntaksin. Alkusulkumerkki, avainsana, suljettu kiinnike, on tunniste. Tai aloita tag. Ja sitten kun olet tehty ilmaista itseäsi, kuten olet tehnyt kohdan, teet niin sanotusti vastakohta. Mutta päinvastainen ei ole aivan taaksepäin. 

Sinun tarvitsee vain etuliite sama tagin nimi ja kauttaviivaa näin. Selvä. Joten kaikki niin jännittävää. Ja itse asiassa, emme tehdä Web kaikki että mielenkiintoisempia. Mitä jos haluan tehdä asiat isompi ja rohkea? Joten käy ilmi, että tässä on esimerkki vuonna headings.html, missä ruumiini, Minulla H1 tag, H2, H3, neljä, viisi tai kuusi, jotka kaikki näyttävät melko vaikeaselkoisia. Mutta jos menen avaa tämä Oletetaan esimerkiksi, katsomaan. Headings.html. 

Joten selaimet oletuksena voi antaa sinulle tekstiä se on iso ja rohkea erilaisia ​​kokoja. H1 on iso. H6 on pienempi ja sitten kaikki muu siltä väliltä. Niin, että on mielenkiintoista, mutta silti ei oikeastaan ​​web tiedän. Mitä jos haluamme minulla on jotain lista. . Joten tässä luettelomerkeillä kolme Harvardin taloja. 

Miten te sitten teet tämän? No, vilkaise list.html. Ja tässä näemme hieman funkiness mutta Tarkastellaan mitä tapahtuu. Joten sen perusteella, mitä olet juuri nähnyt, UL tarkoittaa Järjestämätön lista. Järjestämätön lista tarkoittaa vain luettelomerkeillä. Ei ole numeroita. Mukana on myös jotain kutsutaan järjestetty lista, joka on OL klo tunniste. Sitten LI, luettelokohteen on kaikki se tarkoittaa. 

Ja niin se automaattisesti numerot kaiken puolestasi. Mutta jälleen kerran, kaikki minun sisennys ja valkoinen tila on vain minun tähteni. Selain ei ole todella tulee hoitaa. Joten vaikka et voisi tehdä tämän vain olla selkeä, sinun ei pitäisi vaikka selain vielä voi ymmärtää sitä hienosti. Olen lyömällä reload minun selain, olen napsauttamalla reload ja mitään muutosta tapahtuu sillä selain vielä tekee mitä sanon sitä tekemään. 

Selvä. Joten tämä kaikki on vain tekstiä. Nyt tehdään jotain mielenkiintoisempaa. Aion mennä eteenpäin ja lainata tämän HTML. Aion mennä eteenpäin ja Luo uusi tiedosto tästä. Ja me kutsumme tätä rick.html. Meillä on suhteettoman käytetty jotain kutsutaan rick tela tässä luokan tänä vuonna, en tiedä, se vain tapahtui orgaanisesti. 

Ja nyt se sai käsistä. Joten olen juuri menossa mennä sen kanssa. Ja jos menen Google Kuvat ja Rick Astley. Jos et tiedä miksi me teemme tämä, vain lukea siitä Wikipediasta. Joka kerta olet klikannut linkkiä, Joku on nauraa jonnekin. Ja anna minun mennä ahead-- sinne menemme, katsotaanpa nähdäksesi kuva. 

Joten tässä meillä kuvan Google Images. Ja Oletetaan, että tämä on kohtuudella kaikkialla Internetissä. Joten aion olettaa se on OK minulle todella toteuttaa tämä minun verkkosivu. Aion mennä eteenpäin ja kopioi kuvan URL-osoite. Ja nyt jos menen takaisin Cloud 9, katsotaanpa mitä voin tehdä täällä. Joten tässä on vain web-sivun. Tämä on Rick Astley, haha, Aion nyt mennä takaisin minun selain, lataa, ja mielenkiintoinen. 

Missä Rick? Joten haluan nähdä mitä on tapahtunut. Oikeastaan, aion teeskennellä kuten en tee sitä. [Äänetön] pani hänet tänne. Palaamme tähän hetken kuluttua. Joten tässä rick.html. Joten se ei ole Rick Astley. Joten se kääntyy pois voimme itse lisätä hänet täällä. Tämä on Rick Astley. Aion sanoa antaa minulle kuvan, jonka lähde on URL minä vain kopioida, joka ilmeisesti on onnellinen syntymäpäivä jotain tai muuta. 

Ja nyt aion Sulje tag näin. Joten tämä on kääre erittäin pitkä. Mutta huomaan, että kaikki olen tehty on alkusulkumerkki kuva, lähde ominaisuus tämän. Ja se on todella pitkä URL. Ja aivan lopussa, huomaa. Miksi olen tehnyt slash kulma kiinnike sijasta, kuten kaikki muutkin tag, ottaa alkusulkumerkki, IMG, suljettu kiinnike? Vain yrittää arvata, vaikka ei ole perehtyneisyys lainkaan HTML ennen. 

Joten se on, miten se sulkeutuu komento, mutta miksi se ei oikeastaan ​​tee intuitiivinen järkeä tehdä jotain hieman teonsana kuin lähellä kuva? Joo. Joo. Vain semanttisesti, ei ole mitään tunnetta alkaen kuvan ja päättyy kuva, se on joko siellä tai se ei ole. Joten se ei ole järkevää jättää aukon mitään muuta sisällä kuvan. Et vain voi tehdä sitä. Ja niin syntaksin olisi yleensä vain tehdä vinoviiva sisällä avoimen tunnisteen tai alkutunniste ja sitten lyödä Tallenna. 

Jos siis nyt ladata tämä tiedosto, nyt Minulla on hyvä web-sivun ruoanlaitto täällä. Ja voisimme varmasti todella ärsyttää ihmisiä upottamalla sijaan kuten YouTube linkki. Ja itse asiassa, tahansa olet koskaan mennyt YouTubeen, ja haluan todella vahingossa Rick Roll itseäni täällä. Joten Rick Roll. Joten Rick roll-- aion mennä täällä. 

[Musiikkia] 

OK, yksi henkilö pitänyt siitä. Joten huomaat koko tämän ajan, jos Napsauta Jaa linkki, voit tietysti saada URL että voit itse upottaa sähköpostia tai oikeuslääketieteen kuva tai ongelma asetettu tai dia. Ja nyt, jos olen sen sijaan klikkaa upottaa, huomaa, että koko tämän ajan, tätä tavaraa on ollut siellä. Aion mennä eteenpäin ja kopioi tämä. 

Ja vain niin voimme nähdä sen paremmin, olen menossa liitä se minun tekstieditori. Huomaa, että tämä mitä YouTube on kertonut sinulle. Joka kerta kun vierailet YouTube-video, jos haluat upottaa videon web-sivun, yksinkertaisesti tarttua tähän. Joten tämä on vielä toinen HTML-koodi kutsutaan iframe. Tai linjassa runko. Joten se liian näyttää hieman enemmän monimutkainen kuin kaikki muut. Joten käy ilmi, että kuva tag ja ilmeisesti IFRAME ottaa mitä kutsutaan määritteitä. 

Ja tämä on toinen pala syntaksin HTML. Lisäksi tagin nimi, alkusulkumerkki tunnisteen nimi, voit ohjata käyttäytymistä tunnisteen ottaa koko joukko ominaisuus vastaa arvo. Taito vastaa arvo. Ja niin esimerkiksi, YouTube sanoo meille jos haluat leveys tämän videon olla 420 pikseliä ja korkeus olla 315 pikseliä, joka on miten ilmaista se HTML. 

Lähde videon on menossa olla, että pitkä YouTuben URL-osoite ja sitten joitakin muita juttuja kuten runko raja on nolla, joten luultavasti tarkoittaa, että on ei reunus asia. Salli koko näytön luultavasti tarkoittaa, että käyttäjä voi napsauttaa painiketta ja todella koko näytön videon. Joten jos en todellakaan halua olla vaikuttava täällä Rick piste HTML, sijaan käyttää kuvaa tunnistetta, anna minulle poistaa että sen sijaan, liitä tämä. Ja nyt uudelleen. Ja nyt taas mennään. Okei, se riittää. Hyvä niin yritän vaikea ei tehdä sitä uudelleen. Mitkä ovat joitakin noutoruokapaikkoja täällä? Niin HTML, niin ruma kuin näiltä sivuilta ovat, on oikeastaan ​​aika yksinkertainen. Se ei ole ohjelmointikieli. Se ei ole toimintoja. Se ei ole silmukoita. Se ei ole edellytyksiä. Kaikki se on on kymmeniä tunnisteita, joista jokainen on nolla tai useampia ominaisuuksia. Ja itse asiassa, mitä hauskaa siitä HTML kun alkaa sukeltaa on, että se on hyvin itsensä oppivainen. 

Kaikki se kestää on käsitys yleisen kehyksen HTML. Mikä on tunniste, mikä on ominaisuus, miten voit itse määrittää sivun seuraavasti. Ja kaikki muu on todella tulos etsimisessä online viittaus tai googling miten tehdä joitakin tekniikkaa tai kuten olemme nähneet, katsomalla Facebookin lähde koodi, katsot verkkosivuilla että pidät sitä lähdekoodista ja ymmärtää, miten kehittäjät siellä todella säädetyn asioita. 

Joten voimme tehdä kuvia samoin. Ja itse asiassa me teimme sen hetki sitten. Anna minun mennä eteenpäin ja vain näyttää. Seuraavassa joitakin mallikoodia. Jos joskus haluat nähdä jörö kissa. Niin huomaa, että voin on kuva tag täällä. Ja minulla kommentin yläpuolella. Minulla vaihtoehto teksti esteettömyyden. Joten joku on käyttäen näytön lukija syistä näön voi itse sitten heidän näytönlukijaohjelma sanoa jörö kissa. Koska jos he eivät voi katso kuva, ne voi ainakin olla heidän tietokone kertoa heille suullisesti, mikä on. Ja lähde että tiedosto on cat.jpeg. Niin itse asiassa, jos halusin saada fiksu, mitä voisin olla done-- Lupaan ei mennä Rick Astley, joten Aion google kissa sijaan. Ja jos menen Google Images täällä, ja oletamme että tämä on kuva minun kissa. 

Oletetaan, että minulla on ohjaus napsautetaan tai oikealle napsautti tämän, vahingossa kammottava. Ja cat.jpeg aion säästää työpöydälle. Haluaisin nyt palata pilvi 9. Huomaa, että täällä, voin Siirry ladata paikallisia tiedostoja. Ja jos nappaan tämän tiedosto, cat.jpeg, ilmoitus että voin vetää sen ja pudota Cloud 9 ja se tulee huutaa minua täällä. 

Koska olemme jo antanut sinulle cat.jpeg tiedoston, mutta se on erittäin helppo napata kuva että olet otettu Facebook tai Flickr tms ja todella vetää ja pudottaa sen osaksi pilvi 9 ja sitten tehdä se osa oman henkilökohtaisen verkkosivuilla tai ongelma asettaa seitsemän tai kahdeksan kuten tulemme pian nähdä. Ja sitten kun vihdoin käydä että kissa, olettaen olen ladannut että sama kissa, ilmoitusta that-- että oli ihana. 

Mitä näkisitte on jotain tällaista kasvot täällä. Joten tiedostot viittaus web-sivulla voi olla joko paikallinen omassa tili tai kauko muulla palvelimella kuten tapauksessa Rick Astley kuva hieman sitten. Joten jos else-- mitä muuta voimme tehdä täällä? Joten katsomaan seuraavaa. Tiedätkö mikä on eräänlainen jäähtyä? 

Olemme tähän mennessä tehneet hyvin staattisia verkkosivuja. Haluan mausteeksi asioita seuraavasti. Haluan tehdä oman hakukoneen. Joten tehdä hakukoneen, katsotaanpa mennä eteenpäin ja alkaa tehdä tätä. Aion mennä eteenpäin ja luoda uusi tiedosto nimeltä search.html. Ja olemme prefabed versioita verkossa. Oho. Älä liitä pääteikkuna. Valmistalo versiot verkossa. Ja aion aloittaa seuraavasti. Joten tässä on alku tiedosto nimeltä search.html. Aion tallentaa sen päivän lähde hakemistoon. Aion kutsua tätä haku. Oikeastaan ​​me tehdä se paremmin. CS50 Etsi ja todella tuotemerkin sitä. Ja nyt, aion sanoa jotain H1 CS50 Etsi. Ja sitten täällä, H2 tulossa pian. Ja vain kertaus, H1 ja H2 tarkoittaa mitä vastaavasti? 

Joo, niin iso ja rohkea, ja ole niin suuri, mutta silti rohkea. Jos siis tallentaa tämän ja mennä tänne, katsotaanpa tiedosto search.html. Selvä, ja tämä on right-- [äänetön]. Valmiustila. David on sekava. Voi, se on tuolla. Daavidin idiootti. OK. Joten siellä se on. Joten CS50 haku tulossa pian. Joten nyt, nyt koota mitä teimme viime viikolla. 

Jossa puhuimme alemman tason mekaniikka HTTP. Ja nämä uudet ideat HTML, joka on vain tämä markup language missä kertoa selaimen tarkalleen, mitä tehdä ja toteuttaa oman hakukoneen. Joten sen sijaan vain sanomalla tulossa, olen menossa esitellä jotain kutsutaan muodossa tag. Ja tässä muodossa, aion on jotain syöttökentässä. 

Ja nimi tämän tulon kenttä, aion kutsua sitä Q. Ja tyyppi tämän syöttökentän Aion sanoa vain "teksti". Ja tekstikenttään, kuten tulemme katso, on vain tekstikenttään. Ja niin se ei tunnista täällä on mitään sen sisällä tässä vaiheessa. Ja niin olen yksinkertaisesti menossa Sulje tag, että kauttaviiva aivan tag itse. Ja sitten aion on yksi muu tulo. Tulotyypin vastaa esittää. Ja sitten aion Sulje tämäkin. 

Ja nyt aion mennä takaisin tänne. Ja jo näemme, vaikkakin melko ruma, olen sai alkaa oma haku sivu täällä. Itse asiassa, haluaisin yrittää puhdista ylös hieman. On käynyt ilmi, että tulo täällä, voin olla toinen ominaisuus nimeltään paikkamerkki. Ja voisin nähdä jotain avainsanoja, tai tarkemmin, kyselyn q. 

Ja huomaa, nyt minulla on tällainen harmaa teksti että katoaa heti kun alat kirjoittaa, mutta se on luultavasti jotain olet nähnyt muissa web-sivuja. En todellakaan pidä Lähetä-painiketta. Joten olen todella aio antaa Lähetä-painiketta arvon haku. Ja nyt, jos olen ladata, huomaan, että minun painike muuttuu nimeltään haku. Tiedätkö, en oikein kuten logo täällä. Joten Google Font generaattori. 

Haluan piristää tätä entisestään. Niin CS50 haku. Saanen luoda oma logo. Se näyttää hienolta. Joten nyt haluan tallentaa tämän as-- tulla. Jos menee? Siellä. OK. Ohi. Tallenna nimellä. Tyhmä selaimissa. Valmiustila, aiomme korjata lopullisesti. Siellä mennään. Selvä. Anteeksi. Vapaapäivä. Nyt tämä on funky. Poistu koko näytön. Selvä. 

Nyt, kuten normaali henkilö, tallentaa kuvan. Logo.gif. Nyt aion mennä CS50IDE ja Aion yksinkertaisesti napata logo, Aion vedä se minun lähde seitsemän hakemistoon, tiedosto on jo olemassa, olen OK kanssa. Joten aion ohittaa sen koska olen jo ollut se. Ja nyt miten voin päästä eroon tästä? 

Mennään eteenpäin täällä ja tehdä kuvalähde vastaa logo.gif. Sulje tämä. Tallenna. Ja nyt jos menen takaisin minun haku sivu, nyt se näyttänyt aika hyvältä. Selvä, joten se ei ole varsin tehnyt mitään hyödyllistä. Itse asiassa, haluaisin kokeile hakua kissa ja katso mitä tapahtuu. Kissat. Perkele. Se ei vain toimi, ilmeisesti. Niin mitä avain pala että puuttuu täällä? 

Oikea, vaikka et tiedä mitään HTML, Olen alkanut merkintä ylös puhelin lomake ja olen kertonut sen, miten saada tuloa, anna minulle tekstikenttään ja Lähetä-painiketta, mitä pala on ilmeisesti puuttuu? Oletetaan haluamme todella saada tämä asia toimii oikein. Mitä meidän pitää tehdä? Meillä on tarve toteuttaa loppupäätä tietokanta tai hakukoneen itse, ja että tulee viemään paljon aikaa, rehellisesti. 

Joten muistaa, mitä teimme viime kerralla. Joten jos etsit jotain Googlessa ja olet etukäteen estetty, Recall, instant haku. Haluan siis puolestaan, että pois niin, että tämä todella käyttäytyy kuin vanhempi koulu selain, jos en nyt etsiä jotain kissat, muistaa, mitä URL näyttää. Se on aika arvoituksellinen. Mutta upotettu siellä, Recall, on kauttaviiva haku. Kysymysmerkki Q on yhtä kissaa. 

Ja että näyttäisi antaa minulle koko joukko hakutuloksissa. Niin tiedät mitä aion tehdä? Aion lainata Google vain minuutin. Aion mennä yli täällä ja aion sanoa että tämä muodostaa toiminta tai kohde, niin sanoakseni, olisi kirjaimellisesti olla Google. Ja menetelmä halusin käyttötarkoituksen tulee olemaan saada. 

Joten mikä on toimia? Toiminta on outo nimi, mutta se tarkoittaa vain kuka käsittelemään toimia tämän lomakkeen? Kun klikkaa haku, jossa olisi tulos mennä? Ja jos minä nyt mennä takaisin minun muodossa täällä ja lataa Web-sivu ja nyt etsiä jotain kuten koira, huomaa nyt Olen uudelleen toteutettu Google. Oikea? 

Jos haluan etsiä jotain muuten, se toimii ei vain koiria, se toimii myös kissoille. Se toimii myös CS50. Ja OK, tämä on vain alle whelming, eikö olekin? Hyvä on, mutta se todella toimii. Joten mitä todella tapahtuu? Joten olen opettanut selaimen avulla HTML, ottaa panosta käyttäjä ja itse lähettää että panos etäpalvelimeen HTTP. 

Ja koska minun selain ymmärtää HTTP, se todella rakentaa URL niin, että mitä Päädyn yli minun selaimessa, huomaa, mitä tapahtuu kun olen etsinyt koira. Jos minä klikkaa haku, huomaat että URL muuttuu aioin että google.com/search kysely vastaa koira. Ja se johtuu muodossa tietää, koska menetelmä on saada, yksinkertaisesti liittää sen, että URL siellä. 

Nyt nämä sivut ovat vielä ruma. Joten käyttöön yksi muu pala syntaksin jos voimme tänään. Ja tämä on jotain tunnettu kuten CSS-tyylisivuja. Saanen siis katsomaan Tässä esimerkissä täällä ja nähdä jos voimme päätellä, mitä on tekeillä. Tämä on CSS0.html. Ja tämä on silloin, kun asiat saada vähän ruma. Koska valitettavasti, maailmassa rainan, HTML ei voi yksin tehdä kaikkea. Joten jos haluat tyylitellä web-sivun, todella tarvitset keskittyä estetiikka eri tavalla. Joten tässä, minulla on ruumiin minun web sivu jonka sisällä on suuri div. Ja div vain tarkoittaa jako. Joten se on kuin kohta, mutta se ei ole sama semantiikkaa of tekstikappale. 

Tämä vain tarkoittaa selain, tässä tulee iso suorakulmainen alue minun web sivu, haluan käsitellä sitä erityisesti. Nyt, linja 21 on silloin, että div alkaa. Ja ota arvaus. Mikä vaikutus linjan 21 Loput sivun sisältöä? Keskitys se. Siinä kaikki. Joten emme ole nähneet tapa todella keskitys tekstiä. 

Itse asiassa, minun hakukone, toisin kuin todellinen Google, kaikki oli perusteltua yli vasemmalle. Ja niin nyt linjassa 21, sanon, hei selain, luoda jako sivun. Anna minulle iso, näkymätön suorakulmio. Niin haluan ajatella sivun. Ja sitten tyylitellä sen seuraavasti. Sisältä lainausmerkit, nyt on toinen kieli että otimme käyttöön tänään nimeltään CSS. Onneksi, se myös ei ole ohjelmointikieli, joten se on hyvin rajallinen sen syntaksi mutta myös hyvin rajoitettu sen toimivuus katsoo HTML on kyse merkintä ylös tiedot web-sivun ja rakenne Web-sivun. CSS on yleensä noin viimeisen mailin, estetiikka, saada koko ja väri ja sijoitus juuri oikea web-sivulle. Ja todellakin, se muodostuu keskeisten arvoparit. 

Omaisuus näin, teksti kohdista, seuraa kaksoispiste, jota seuraa arvo, joka omaisuus, joka tässä tapauksessa on keskus. Ja nyt huomaa voi pesä nämä asiat. Jos halusin kaiken että Olen korostanut olla keskitetty, siksi minulla on linja 21 ja vastaava rivi 31. Mutta oletetaan nyt halua sanoa John Harvardin, tervetuloa kotisivuilleni. 

Copyright-merkin John Harvard. Ja kai haluan ensin nämä linjat olla aika iso. 36 pikseliä. Niin, että kunnon kokoinen. Ja halusin sen paino olla rohkea. Mutta sitten alle, Haluan pienempi teksti. Ja sen alapuolella, haluan jopa pienempi teksti. Anteeksi. Tänään tuntuu pois päivä. 

Joten nyt, mitä teen ilmaista tämän? Täällä linjalla 22 on upotettu div tai sisäkkäisiä div, jos haluatte. Sekin on oma tyyli tag. Voin määritellä fontin kokoa 36. Voin määritellä fontin paino rohkeita. Alas täällä, vain määrittää 24 pikseliä. Ja lopuksi, linjassa 28, voin määritellä 12. Aivan kuten nopeasti järki tarkistaa ja ihmisenä luet tätä, mitä sanoja ruudulla ovat todella tulee olla rohkea? Jotka linjat ovat todella rohkeita? 

Vain John Harvard. Oikea? Koska aivan kuten linja 22 sanoo hei selain, tässä jako sivun. Tee se fontin koko 36 kohta. Tee fontin paino rohkea. Heti kun saavutat vastaava lopputunniste tai suljettu tag linja 24, että välineet, hei selain, lakata tekemästä mitä se on olet tekemässä. Ja ilmoitus on selkeä, vaikka linja 22 on kaikki nämä ominaisuudet tyyliin, kun Sulje tag linjassa 24, vain mainita tunnisteen nimi. 

Et toista sanaa tyyliä tai jotain, joka on sisällä näitä lainauksia. Joten jos katson tätä nyt minun selaimessa, sallikaa katso lopputulos. Anna minun mennä eteenpäin tähän tiedostoon, joka on CSS 0. Ja se on edelleen melko tavallinen, mutta tulossa melko mielenkiintoinen. Mutta se osoittautuu siellä muita asioita voin tehdä täällä, ja riski tehdä tämä täysin vastenmielinen, huomata tässä, että minun elin minun web-sivun, Voin tehdä jotain hauskaa kuten BG tai taustaväri. 

Ja nopea, mikä on lempivärisi? Green Kuulin. Selvä. Joten nyt, jos osuin reload nyt, meillä on vihreä web-sivun. Selvä, joten se ei ole huono. Ja nyt, jos haluan tehdä tämä todella viileä, voin tehdä väri minun tekstiä jopa punainen. Joten mitä tämä näyttää. Nyt se on näyttänyt aika hyvältä. Ja tänne, jos todella halua sotkea jonkun tai jos haluat olla yksi niistä ihmisistä, jotka yrittää huijata sinua vierailevat web sivu koska he ovat huijasi Google luulemaan siellä koko joukko avainsanoista like-- Katsotaanpa, lataa. Mihin se meni? Ja siellä se meille. Selvä. Joten sanon tämän syrjään, käymme puhua tästä tavaraa muutaman viikon kun puhumme turvallisuus, jos todella upottaa koko rypäleterttuja avainsanoja Web-sivun, vaikka ne eivät näy ihmisen, joku kuten Google, tietenkin, voi vielä itse löytää tämä. Selvä, niin se on aika hirveä melko nopeasti. 

Ja itse asiassa, se ei ole kaikki että paljon toisin kuin oma web sivun perustutkintoa, joka Aloin googling noin löytää menneisyyden versioita vanhoista verkkosivuilla. Se oli melko huono. Itse en löytänyt yksi juuri ennen luokan. Mutta on pahempi siellä. Tämä ilmeisesti oli minun etusivu takaisin vuonna 1996. Ilmeisesti ajattelin, että se oli aiheellista pyytää ihmisiä heidän nimensä ennen tilaisuuden tullen itse nähdä minun verkkosivu. 

Ja sitten näytin heille jotain tyhmää, todennäköisesti. Minä kaivaa enemmän ensi kerralla. Mutta nyt, nyt harkita hieman suunnittelu. Olemme puhuneet tyyliin. Ja tämä sivu toistaiseksi ja lähes kaiken olen kirjoittanut on melko puhdas tyylillisesti. Mutta entä suunnittelu? No, siellä on paljon irtisanomisten mitä olen tehnyt täällä. 

Olen maininnut sanaa väri pari paikkaa. Olen maininnut kirjasinkokoa pari paikkoja ja rohkea pari paikkaa. Ja pohjimmiltaan, olen co sekoittuminen kahdella kielellä. Minulla HTML minun tageja ja minun ominaisuudet ja sitten yhtäkkiä, välillä lainausmerkit, minulla on toinen kieli tänään nimeltään CSS, joka taas on vain nämä keskeinen arvo pareittain tai näitä ominaisuuksia kaksoispisteellä erotettuja. 

On käynyt ilmi, että paljon kuten C jossa voi alkaa tekijä ulos jotkut koodi header-tiedostot, joten voimme tehdä saman HTML. Ja askel kohti, joka on seuraava. Huomaa, että tämä versio, CSS1.html on Rakenteellisesti täsmälleen sama sivun. Joten minulla koko joukko on divs, mutta tällä kertaa, olen päässyt eroon kääreen div kuten näet. 

Ja olen antanut nämä kolme divs ylä-, keski- ja pohja, ainutlaatuinen tunnukset. Tämä on mukavaa, koska mukaan antaa näiden toimialojen Sivun yksilölliset tunnisteet, Voin viitata niitä muualta. Missä? No, minäpä selaamalla ylöspäin. Ja tähän mennessä, milloin teimme kärjessä web-sivun, mitä ainoa tag meillä on ollut pään sivun? Vähän kovempaa. Vain otsikko toistaiseksi. Mutta se osoittautuu siellä muutamia muita asioita voit laittaa sinne, yksi joka sitä kutsutaan tyyliin tag. Niin hetki sitten, me katsoimme klo tyyliattribuutti. Osoittautuu siellä tyyliin tag. Se kuuluu sisällä pään sivun. Ja nyt huomaa, mitä olen tekemässä. Minulla on sisällä tämän tyyli tag seuraavat. Olen kirjaimellisesti viittaavat linjalla 20 nimeksi tag mikä haluan tyylitellä. 

Sitten minulla on auki kihara ahdin ja suljettu kihara ahdin. Niin samanlaisia ​​hengeltään C, mutta jälleen, tämä ei ole funktio, tämä on vain syntaktinen tässä yksityiskohtaisesti. Ja sitten tietysti, minä kerron selain, hei selain, tehdä koko kehon sivun on teksti yhdenmukaistaminen keskustasta. Ja sitten tämä sanoo seuraavaa. Hei selain, jos näet HTML elementti tai tag tulevalla sivulla on yksilöllinen tunniste alkuun, joten hash symboli täällä vain sitä, ainutlaatuinen idea alkuun, mennä eteenpäin ja tehdä sen fontin kokoa 36 ja sen fontti paino rohkea. 

Hei selain, elementti jonka ID on keskellä, jotta se 24 pikseliä. Ja hei selain, jos näet Ajatus pohja, jotta se 12 pikseliä. Vaikutus lopulta on täsmälleen sam. Jos menen CSS 1, sivu näyttää samalta. Mutta olemme askeleen kohti hieman parempi suunnittelu. Haluaisin nyt palata tänne CSS2 ja katso, mitä muuta olen tehnyt. 

Nyt sivu on todella, todella puhdas. Itse en mahtuu kaikki sisällön sivu täällä. Mutta mitä uusi tunniste on I käyttöön, ilmeisesti? Link. Ja se ei ole paras nimeä tag, koska se ei ole linkkiä mielessä että me tiedämme sen, mutta tämä tarkoittaa, linkki jonkin muun tiedoston. Tämä on ikään kuin terävä sisältävät C. 

Tämä on tapa HTML sanoa hei selain, hae sisältöä tiedosto nimeltä css2.css. Suhde, minulle, on, että se on tyylisivu. Ja todellakin, sitähän yksi S: n CSS keinoin. Tämä on tyylisivu. Se on vain tekstitiedosto, joka sisältää koko joukko omaisuutta. Se on koko joukko tyylejä että haluat hakea sivulle. 

Ja niin tämä ilmeisesti on viittaa toiseen tiedostoon. Ja jos avaan, että CSS2.css, huomaa että kaikki olen tehnyt on kopioida ja liittää kaikki Tämän tähän tiedostoon. Ja nyt, vaikka et ole koskaan koodattu tätä kamaa ennen, vain pohtimaan sananlaskun konetekniikka hattu on, miksi tämä parempi suunnittelu luultavasti? Factoring pois ne CSS-ominaisuuksia, laittamalla heidät omaan tiedostoon. Vaikka me ratkaisseet tämän ongelma kuin viisi minuuttia sitten aivan ensimmäinen versio. 

Olemme ei parantunut sivu tyylillisesti, tämä on vain parempi suunnittelu jossain mielessä. Miksi luulet? Joo. Joustavampi miten? Joo. Joten jos haluat mennä takaisin ja muuttaa asioita, nyt, sinulla on yksi paikka jossa voit muuttaa asioita. Ja itse asiassa jotain kuten ongelma asettaa seitsemän, jossa me toteuttaa varastossa kaupankäynnin verkkosivuilla, joka on menossa on koko joukko sivuja. Ja se olisi todella harmittaa jos päätät, hm, En todellakaan pidä 24 pikseliä, haluan sen olevan 28 pikseliä tai hieman suurempi. Ja sitten täytyy tehdä maailmanlaajuinen etsiä ja korvata tai avaa kaikki sivuston tiedostot yksinkertaisesti todella muuttaa yksi arvo. Factoring nämä tyylit yhdeksi keskeinen paikka, voit nyt avata yhden tekstitiedosto vuonna CS50IDE mihin tahansa ohjelmaan, muuttaa sitä, tallentaa sen, ja tehty. Olet levittävät ne muutoksia kaikkialla. Ja että olisi sama dot h tiedosto samoin. Joten kysyttävää näin mennessä tätä syntaksia? Hyvä on, joten olemme tehnyt kaiken näyttää paitsi todella toteuttaa hyperlinkkejä. Ja niin mennään eteenpäin ja tehdä tämän. Anna minun mennä eteenpäin ja Luo uusi tiedosto tästä. Aion kutsua sitä link.html, laita nykypäivän koodi. 

Ja aion tehdä avoin kiinnike asiak tyyppi html. Sivuhuomautuksena, tämä asia on top, tämä doc tyyppi julistuksen, se on ainoa, joka on outoa kanssa huutomerkki. Sinun täytyy vain tehdä se siellä ja se tarkoittaa käytämme HTML-versio 5. Vanhemmat versiot kieli oli paljon kauemmin jouset että sinun piti laittaa sinne. Joten tässä on esimerkki nimeltään linkin. 

Tarvitsen elin minun web sivu täällä. Ja täällä, href tasavertaiseen sanokaamme HTTP://www.disney.com ja suosikkini verkkosivuilla, me sanomme. Selvä, niin hyvin harmittomia, käyttäjäystävällinen sivu. Jos minä nyt mennä minun hakemistoon listalle täällä ja avata link.html, meillä on hyper teksti. 

Ja todellakin, tämä on silloin, H HTTP tulee. Hypertext Transfer Protocol on noin siirtämällä teksti että on linkkejä muihin resursseihin. Ja todellakin, tässä on tuttu, jos retro, sininen linkki, jos napsautetaan, todella saavat minut Disney.com. Nyt, oi, että on tulossa pian. Selvä, joten nyt, mitkä ovat seurauksista tämän? 

Ja rehellisesti, maailma alkaa saada hieman tutumpi ja myös hieman scarier mutta myös hieman itse puolustettavissa kun aloitat ymmärtää näitä asioita. Koska kertoimet ovat, jotkut teistä, jos menet kautta Gmail roskapostikansioon tai jopa postilaatikkoon, olet luultavasti saanut jonkinlaisen sähköpostin että kysyy voit muuttaa salasana ehkä tai ehkä tarkistaa PayPal tunnistetiedot tai vaikka mitä. 

Ja itse asiassa, olet ehkä saanut jotain, joka sanoo esimerkiksi täältä nollata PayPal salasana. Ja nyt, huomaa, jos Tämä ei ole Disney.com mutta kuten badplace.com ja reload, huomaa, että teksti tähän voisi sanoa mitään lainkaan. Ja itse asiassa tämä on vain sanoja. Miksi en oikeastaan ​​super ilkeä ja sanoa http://www.paypal.com. 

Klikkaa tästä palauttaa PayPal salasana ja nyt uudelleen. Tämä näyttää melko laillista, eikö? Tarkoitan, en klikkaa sähköpostia että vain sanoo. Mutta huomaa kahtiajako täällä. Siinä sanotaan www.paypal.com, ja itse asiassa, odota minuutti, me tiedämme, että haluat n turvallisuutta. Joten nyt, mene www.paypal.com HTTPS, mutta jos et ole koskaan tehnyt tätä ennen, älä päästä tapana leijuu vähän linkkejä täällä. Ja on vaikea nähdä ruudulla siellä, ja se ei ole kaikki, että helpompaa täällä. Mutta alas täällä pikku nurkassa ei selaimen todella kertoa teille, että olemme menossa ja badplace.com sijasta Paypal.com. Nyt, minne olemme menossa tähän? Kaikki esimerkit olemme tehneet tänään, olemme kova koodattu ja kirjoitetaan käsin. Internet on uskomattoman mielenkiinnoton kun kova koodia Web-sivuja niin, että sisältö on staattinen ja koskaan muuttuvat. Tietenkin, kaikki meidän lempisivustot tänään, onko se Gmailin tai Twitter tai Facebook tai jokin monet muut ovat dynaamisia. He muuttumassa vasteena käyttäjän syöttää aivan kuten Googlen hakutuloksissa. 

Ja niin keskiviikkona, mitä teemme, on jätämme HTML ja CSS käyttöönotto takanamme ja otamme selvänä, että me nyt tietävät sen ja esittelemme uusi ohjelmointikieli nimeltään PHP, joka kuten C, aikoo antaa meille valta itse luoda ohjelmia että itse tuottaa tuotos. Tässä tapauksessa Käytämme PHP tuottaa dynaamisesti web sivuja käyttämällä tätä uutta kieltä. Niin siitä lisää keskiviikkona. Nähdään silloin. 

[Musiikkia]