[Musiikki soi] ALLISON Buchholtz-AU: Okei, kaikille. Tervetuloa takaisin osiosta. Joten meidän asialistalla tänään on menossa yli paljon enemmän web dev kamaa. En tiedä, kuinka moni olet nähnyt psets koska se julkaistiin aiemmin tänä aamuna. Haluaisin niin kuinka monta ihmiset lukenut spec, mutta kun huomataan miten olet ollut kaikki on, kuten, seitsemän tuntia katsomaan sitä ja se on maanantaina ja olet todennäköisesti ollut luokassa, Aion olettaa, että useimmat teistä eivät ole. Jos sinulla on ylimääräisiä Kudos. Olet periaatteessa auttaa toteuttaa yksinkertaisen web palvelin C, joka on upouusi PSET, joten te saada olla marsuja. Se tulee olemaan hauskaa, villi viikko, mutta mielestäni se tulee olemaan hauskaa ja se tulee olemaan todella hyvä kokemus itse. Joten voit valmistautua että osassa tänään, aiomme mennä chmod, TCP / IP, ja sitten hieman HTML ja CSS. 

Lopussa, me oikeastaan ​​koodi jopa yksinkertainen verkkosivu yhdessä auttaa te sellaista saada enemmän perehtynyt siihen. Ja sitten jos et ole kyytiin tietokilpailuja, he edessä, mutta olen melko varma, että jokainen tässä on heidän tietokilpailu. Ja myös tämän muistion, ratkaisut eivät ole vielä liittynyt, mutta heti kun me finish-- haluavat, Viime ihmiset ottavat quizzes-- ne ylös. Jos sinulla on kysyttävää sillä välin, rohkeasti sähköpostia minulle henkilökohtaisesti. Vastaan ​​kanssa yksilöllisen kysymyksiä, kuten aina. 

Niin Komitea suosittelee, että chmod. Joten periaatteessa kaikki mitä täytyy tietää chmod on, että sitä käytetään muuttamaan tiedostojen oikeudet, eikö? Joten se on vain joissakin järjestelmissä kutsuvat sitä muuttaa käyttöoikeuksia, koska tässä sanotaan. Ja jos joskus haluat nähdä mitkä käyttöoikeudet tiedosto on, sijaan juuri tekemässä ls, voisit tehdä ls -l. l tarkoittaa pitkiä. 

Joten voit tehdä pitkiä listoja kaiken, ja se antaa sinulle paljon yksityiskohtaisempia tietoa jokaisesta tiedostoja. Ja näet something-- olen menossa ohittaa eteenpäin second-- mutta näet jotain vastaavaa että ylin rivi on jokaisen tiedoston. Ja käymme läpi, mitä se tarkoittaa. 

Joten periaatteessa, muuttaa tiedostojen oikeuksien, haluat vain käyttää chmod. Voit ajatella sitä muuta UNIX soittaa kuten ls tai CD tai vaikka mitä. Se on vain sellainen toinen, kuten puhelun. 

Joten teemme chmod ja sitten me on kolme numeroa yleensä. On olemassa pari tapaa tehdä se, joista me mennä yli. Mutta yleensä, sinulla on kolme numerot vaihtelevat 0-7 kerta. 

Niin yksi asia on, että on olemassa kolme eri käyttöoikeuksia että voimme antaa jokaisen tiedoston. Ja se on luettavissa, mikä on edustaa R, joka on järkeä vuonna hieman; w, joka on kirjoitettavissa; ja suoritettavan, joka on x. Tiedän, että e yksi, suoritettavan, ehkä ole mielekästä, mutta me edustaa sitä X. 

Ja mitä sitten tapahtuu, on kukin näistä on myös numero edustus. Joten meillä on 1, 2, ja 4. Ja periaatteessa mitä tapahtuu, on kukin näistä kolmesta numerosta tässä vastaa eri joukko käyttäjiä että nämä oikeudet koskevat. 

Voit siis ajatella, että ensin numero vastaa todellista käyttäjä tai tiedoston omistaja, toinen numero vastaavat ryhmään, ja viimeinen viittaa maailmalle, OK? Mitä tapahtuu, on muistettava, ne numbers-- r on 4, w on 2, x on 1, eikö? This-- Jos sanottuna nämä ylös, joka antaa sinulle, että ensimmäinen numero että meillä voi syöttää meidän chmod. 

Joten tässä tapauksessa, mitä olisi tämä numero on? Se olis 4 plus 2 plus 1, joka on 7, eikö? Ja tässä tapauksessa, nämä ei ole mitään, joten tämä täällä olisi kääntää chmod 700, OK? Ja mitä se tekee, on se myöntää kaikille Näiden oikeudet käyttäjätunnuksesi. 

Joten tämä tarkoittaa meidän käyttäjältä voivat tehdä mitä haluavat. Ne voi lukea tätä tiedostoa. He voivat suorittaa tämän tiedoston. He voivat kirjoittaa tähän tiedostoon. Mutta ryhmä ja maailman, ei käyttöoikeudet mitään, OK? 

Joten toinen tapa kirjoittaa, että voimme tehdä chmod kolmesta numerosta, joista kukin vastaa mitä tahansa summaa tai että erityinen ryhmä on erityinen osajoukko. Tai voimme tehdä oikeastaan ​​toinen juttu. Pidä kiinni. Me voimme tehdä jotain näillä täällä. 

Kuinka moni näit esimerkki missä se oli kuin chmod plus x? Näitkö luennossa, luulen? Niin seisoo kaikille. Se tarkoittaa antaa sen kaikille käyttäjille, jonka unohdin laittaa tänne. 

Mutta plus x, jos me huomaa täällä, jos teemme jotta chmod-- mitä ryhmässä olemme puhumme plus käyttöoikeudet haluamme antaa heille. Joten tämä voi olla plus tai miinus. Plus lisää lupaa. Miinus vie lupaa. Melko intuitiivinen, luulen. 

Joten plus x tarkoittaa chmod. Joten muuttaa oikeuksia kaikkien ihmisten jos tämä on a-- add käyttöoikeudet. Ja x-- se tarkoittaa mitä lupaa me myöntämistä kaikille. Lukea, kirjoittaa tai suorittaa? 

Yleisö: Suorita. 

ALLISON Buchholtz-AU: Suorita. Joten annamme kaikille käyttäjille oikeuksia suorittaa tämän tiedoston, OK? Joten mitä jos halusimme tehdä että numeerinen muodossa? Joten muistakaa numeronäppäimillä, haluamme kolme numeroa. 

Yleisö: 4. ALLISON Buchholtz-AU: Mikä se oli? Yleisö: 4. ALLISON Buchholtz-AU: Ei 4. Yleisö: 0, 0, 4. ALLISON Buchholtz-AU: No, me haluamme antaa sen kaikille käyttäjille, eikö? Joten aiomme olla määrä kussakin välissä. Tämä tulee olemaan sama määrä kussakin välissä koska emme halua antaa jokainen suoritettavan käyttöoikeudet. Joten suoritettavan on 1, mutta oikealla tiellä. 

Joten jos emme chmod 111, joka olla vastaava chmod plus x. Onko järkeä kaikille? Aiomme käydä läpi pari esimerkkiä. 

Joten iso takeaway tässä ei ole täällä, mutta tarkoittaa vain antaa sen kaikille käyttäjille. U on jos vain haluat antaa tai ottaa pois erityistä lupaa käyttäjälle tai omistajalle. g on ryhmä, niin että keskimmäinen numero. Ja sitten toiset voit ajatella maailman, että viimeisen numeron. 

Niin, että, menemme esimerkiksi koska minusta tuntuu esimerkkejä aina nämä asiat on helpompi ymmärtää. Joten rwx-- kävimme läpi this-- voisi olla myös edustaa 700. Se on esimerkki me katsoimme lisää kuvan. Niin chmod 444 joitakin tiedosto antaisi mitä oikeuksia? Olit todella lähellä. Yleisö: Luettavissa kaikille. ALLISON Buchholtz-AU: luettavissa. Joten luettavissa kaikille, eikö? Ja mitä sitten on toinen tapa tehdä se? Jos haluamme tehdä chmod joko R: n tai w: n, plus ja miinuksia, Mikä se puhelu näyttää? Olisi chmod mitä? 

Yleisö: plus r. 

ALLISON Buchholtz-AU: plus R 5. OK, joten tämä on sama kuin tämä, vain kaksi eri käännökset sama asia. Niin, että meillä on nämä. Joten haluan sinun kaverit yrittää kirjoittaa tällaisia ​​heidän päinvastoin. 

Joten chmod 555, mikä se on? Olisiko plus tai u plus tai vaikka mitä? U plus x, anna minulle kolme numeroa. Ja sitten kertoa mitä oikeuksia olemme todella myöntämisestä ja kuka? 

Niin minä annan teille kaverit kaksi minuuttia työtä, että. Voit vapaasti puhua toistensa kanssa. Niille teistä, jotka tulivat hieman myöhään, on karkkia ja paitoja. Meillä on kolme paitoja jäljellä, ja meillä Kit Kats ja starbursts. Joten rohkeasti tulemaan napata jotkut tässä vähän välisoitto. 

Myös viimeinen on hankalaa. Se on kaksi chmods varten viimeinen. Oikeastaan ​​haluaisin sulkea ovea kun te olette työskennellyt sen. Candy on aina tarpeen maanantaina iltapäivällä. 

OK, niin chmod 555. Mikä on toinen tapa, jolla voimme kirjoittaa, että? Onko ideoita? Kyllä. 

Yleisö: plus rx. 

ALLISON Buchholtz-AU: R plus rx. Haluatko selittää, miksi se olis rx? 

Yleisö: Koska sinä olet 5, niin se on 4 plus 1, niin, että on lukenut plus suoritettavan, ja se on kaikille. ALLISON Buchholtz-AU: Right. Joten vain toistaa, 5 täällä Tiedämme summana 4 ja 1, koska jokainen numero meidän trio on summa käyttöoikeudet että osajoukko, oikeassa? Joko käyttäjä, ryhmä, tai maailma. Joten tässä tapauksessa, me tiedämme, että 5 on muodostettu 4 ja 1. 

Ja 4 ja 1 vastaavat luettava ja suoritettavan. Annamme sitä kaikille, jotta voimme tehdä chmod plus rx. Ja tietenkin, me vain meni läpi kysymyksiä siellä, joten nyt tämä tiedosto on suoritettavissa ja luettavissa kaikille. 

Entä toinen? Mikä mahtaa numero että yksi olla? Onko ideoita? Menkää. 

Yleisö: 100 [kuulumaton]. 

ALLISON Buchholtz-AU: 100. Täsmälleen. Joten haluat selittää, miksi 100? Yleisö: Koska se on käyttäjä, joten se on ensimmäisellä sijalla. Ja sitten x suoritettavan on 1. ALLISON Buchholtz-AU: Aivan. Joten me myöntämistä suoritettavaa oikeudet vain käyttäjälle. Joten tässä tapauksessa, se olisi 100. Ja minulla on kaikki vastaukset ylös seuraava dia tapauksessa kirjoitat paljon asioita alas. 

OK, joten tämä seuraava on todella tehneet kaksi chmods, voit tehdä sen. Joten ei kellään mitään käsitystä miten voisit saada chmod 640 kirjoitettiin uudelleen vuonna toisinpäin? Voit muuttaa käyttäjän ensin ja sitten Voit muuttaa ryhmän on minun vihje. 

Joten jos me vain muuttamalla Käyttäjä, joka on tämä ensimmäinen täällä, mitä voisi meidän soittaa olla? Joten käyttäjän on u, eikö? Joten chmod u plus mitä? Mmhmm? 

Yleisö: rw. ALLISON Buchholtz-AU: rw. Oikea, lukea ja kirjoittaa, koska luku- on 4, w on 2, ne summaa yhteen 6. Joten saamme chmod u plus rw, ja saamme ensimmäiset 6 siellä. 

Niin sitten saat 4, haluamme nyt muuttaa ryhmämme asetuksia. Niin me aiomme tehdä chmod g plus mitä? Mikä on 4? 

Yleisö: r. ALLISON Buchholtz-AU: r. Täsmällisesti. Niin me annamme omistaja luku- ja kirjoitusoikeudet ja me annamme ryhmä Read käyttöoikeudet, jotka olemme kaikki täällä. Mmhmm? 

Yleisö: Jos voit kirjoittaa jotain, se tarkoita, voit suorittaa sen? 

ALLISON Buchholtz-AU: You voi kirjoittaa something-- En usko, että se merkitsee voit suorittaa sen. Cool. Niin, että kaikki, mitä me vain meni läpi. Joten tämä seuraava, se on vain sellainen yhteinen tapauksia jotka haluat säilyttää mieleen ongelman asetettu. Nämä ovat tyypillisesti käyttöoikeudet että haluamme voit käyttää. 

Joten 711, joka antaa Meille tietysti käyttäjän kaikki oikeudet, jotka taipumus järkeä. Ja sitten se on suoritettavissa ryhmä maailmassa, jossa on järkeä jos sinulla on, saat haluavat pystyä kulkemaan osaksi sitä. Ihmisten tulee saada. 

Mistään ei-PHP-tiedosto, olet menossa käyttää 644, joka tekisi mitä? Mitä tämä tarkoita, tai mitä käyttöoikeudet Tekeekö se? Joten omistaja voi mitä? Yleisö: lukemaan ja kirjoittamaan. ALLISON Buchholtz-AU: lukemaan ja kirjoittamaan. Ja sitten ryhmä ja muut voi vain lukea, eikö? Ja sitten chmod 600 mistään PHP-tiedostot, joita käytät, Omistajan, jälleen, voi lukea ja kirjoittaa sille mutta kaikki muu on juuri sellainen suljettu. 

Joten tämä todella olla enemmän hyötyä, kun saat ongelman asettaa ensi viikolla, jos olet todella rakentaa verkkosivuilla. Joten jos olet koskaan joutunut outoja pulmia jos se ei lataudu oikein, ehkä tarvitse lisätä suoritettavan lupaa, tai ehkä sinun lukea tai kirjoitusoikeudet. Pikku asioita, jotka yleensä laukea ihmisiä ylös, mutta se on sellainen kuin go-to kun alkaa ensi viikolla PSET. Ja haluaisin antaa sinulle enemmän vihjeitä tämän viikon PSET, mutta en ole vielä katsomaan sitä, koska se julkaistiin tänä aamuna. Mutta sinulle sähköpostia minulle, minä katselin sitä kun olen vastata huomenna. 

Joten nyt, on kaikki hyvä chmod? Kaikki jäljellä olevat kysymykset? Melko suoraviivaista. Juuri sellainen pitää kirjaa siitä, mitä lukea, kirjoittaa ja suorittaa numerot ovat on luultavasti vaikein osa. 

Joten TCP / IP, kaikki nämä protokollat sellainen kuin teidän tietorakenteita viime viikolla, se on paljon enemmän tärkeää sellaista saada korkeampaa intuitio niistä. Tämä ei ole CS143 minne olemme menossa pyytää teitä toteuttaa verkko, joten sinun on hieno, jos et ymmärrä pikkuseikoista kaikkien protokollia. Mikä on tärkeää ymmärtää, sellainen kuin mitä ne edustavat ja miksi ne ovat tärkeitä. 

Joten TCP / IP, tietenkin, se on Transmission Control Protocol tai Internet Protocol, joka on pohjimmiltaan vain joukko lakeja pohjimmiltaan tai standardeja, jotka kertovat tiedot miten se tulisi hoitaa, miten se pitäisi paketoidaan lähetetään ja vastaanotetaan. Niin se periaatteessa, aivan kuten Tässä lukee, lisää mahdollisuuksia että tiedot saa, jos haluat päästä. 

Olen varma, että jos te meni luento tai katsellut sitä verkossa, Hän has-- En tiedä jos hän teki sen tänä vuonna, mutta tiedän viime vuonna hän oli demo, jossa hän oli kuva Rob ja hän jakaa sen ylös neljä ja laita se kirjekuoret ja yritti saada sen poikki Sanders. Ja voit eräänlainen ajattele sitä tällä tavalla. Se on vain joukko sääntöjä, jotka kertovat tiedot miten päästä jonnekin ja ilmoittaa, jos olet puuttuu tietoja, samalla tavalla, että jos olet ottaen useita sivuja muistiinpanoja ja voit merkitä niitä sivu 104, sivu 204, ja voit palata opiskelemaan myöhemmin ja olet puuttuu something-- et löydä sivulta 304-- tiedät jotain on vialla, niin voit voi katsoa läpi muistiinpanoja uudelleen tai pyydä jotakuta lähettämään sinulle luentomoniste kyseisestä päivästä. Samalla tavoin tietoja Internetissä. Jos pyydän jotain jostain palvelimelta ja se on lähetettävä sitä useita paketteja, luultavasti numero sitä jotenkin, anna minulle, kuinka paljon olisin saanut, ja kerro minulle, oi, tämä on yksi niistä 10 tai tämä on yksi 10000. Tällä tavoin kun menen koota kaikki palaset yhteen, En tiedä, jos jotain puuttuu ja voin kysyä, että uudelleen. Onko järkeä? Vain joukko sääntöjä. Sen perusteella, asettaa sääntöjä, OK? 

Joten Keskustelimme myös vähän tietoa satamissa. Tämä on oikeastaan ​​vain standardi, joka voit tietää, minkälaisia ​​tietoja ollaan lähettämässä näissä paketeissa. Jos me lähdemme kirjekuori Esimerkiksi emme tiedämme, että se on kuva Rob siellä ellemme kirjoittaa sen ulkopuolella meidän kirjekuoressa. Joten satamat ovat pohjimmiltaan sama asia. Se on vain tapa selvittää, mitä tyyppistä tietoa siirretään. 

Joten meillä on kaikki yleisimpiä täällä. Joten 21-- nämä ovat myös eräänlainen samankaltaisten hyviä asioita tietää. Se on tavallaan helppo tietokilpailu kysymys. Olla, mitä portti 80 tekee? Tai mitä portti 443 tekee? Niin hyviä asioita tietää. 

Joten meillä on täällä, 21 on tiedosto transfer protocol, joten vain säännöt, jotka ohjaavat tiedostonsiirto. 25, jota me kaikki käyttää aivan liian paljon, on sähköposti. 53 on verkkotunnus järjestelmä, joka on pohjimmiltaan juuri sellainen -haku IP-osoite verkkotunnus. 

Joten olen melko varma, että se oli mainittu luento, jos mennä jotain google.com, se on IP-osoite joka on liittyy siihen. Se ei ole oikeastaan ​​google.com. Ja niin 53 on portti joka todella vie huolta sellainen kääntämisestä tuohon IP-osoitteen sinulle. Ja sitten 80 ja 443 ovat hyvin yleisiä. Sinulla on joko web-sivun tai sinulla on turvallinen web-sivun, joka paljon web-sivut ovat siirtämällä yli nyt. 

Niin, että sellainen korkean tason yleiskatsaus transfer protocol. En näe paljon enemmän syvyyttä. Se on tavallaan hienoja juttuja jos olet kiinnostunut. Siellä on runsaasti resursseja. Wikipedia oikeastaan ​​on aika hyvä sivu. Joten olin katsot sitä vain vähän aikaa sitten, niin minä suosittelen katsomalla sitä, jos olet kiinnostunut tai ottaa 143 kahdessa vuodessa, koska Minusta se on joka toinen vuosi. 

Joten loppuun, olemme puhumme web-sivuja ja HTTP, joka on itse asiassa meidän seuraava aihe tänään ennen kuin menemme HTML ja CSS ja voit itse koodata jopa web-sivun. Se tulee olemaan hauskaa. Meillä on kuvia puput ja se tulee olemaan suuri. 

Joten HTTP, kuten voitte nähdä täällä, on yksi ihana lyhenteet tällä viikolla, mikä on Hypertext Transfer Protocol. Joten jälleen, se on vain toinen joukko sääntöjä, jotka hallitsee hypertekstin siirtää, tässä tapauksessa. Joten paras tapa oppia tästä on vain eräänlainen murtaa se alas Näiden yksittäisten sanojen koska siellä on paljon sanoja ruudulla siellä. 

Joten aiomme aloittaa hypertekstin. Joten "hyper", voit ajatella "Edellä", kuten Super-tyyppinen juttu. Joten se on todella tekstiviesteistä toteutettu seuraavalle tasolle, joten se on kuin Super tekstiä, kuten seuraava teksti. Joten se on pohjimmiltaan vain teksti, joka antaa meille enemmän tietoa kuin normaali teksti tekee, OK? 

Joten tässä tapauksessa täällä, tämä on hyperteksti. Tämä kertoo meille, että meillä on Joissakin linkki että olemme menossa, joka on cs50.net, joka on nyt cs50.harvard.edu. Nämä kalvot ovat hieman vanhoja. Ja se tulee näyttämään sillä tämä, kuten hyperlinkin, ja sitten todella viileä verkkosivuilla. 

Joten se on teksti, joka on hieman hieman todella hienoja asioita siellä. Joten voit liittää asioita ja pystyt lisätä kuvia ja voit muotoilla asioita. Ja tutuin asia, että sinun kaverit todennäköisesti Hypertekstillä on Hypertext Markup Language, HTML, joka tietenkin on kaikki web että näemme ympärillämme, myönnetään joidenkin CSS tyyli heittää. 

Mutta jos joku oli todella iso ja MySpace, Olen varma, että kaikki käytetyn HTML kaikki aika luoda nämä täydellinen profiilit, eikö? Minusta tuntuu, että voisi olla vanhentunut viittaus nyt, mutta mitä. Vain little-- te eivät ole niin paljon nuorempi. Jotkut teistä ovat minua vanhempia. MySpace oli vielä asia, kun olin nuori. En ole niin vanha. 

Anyways, HTML vain muoto hypertekstin. Joten hyperteksti on vain teksti on lisätty ominaisuuksia. Joten siirto protokolla on luultavasti enemmän epävarma asia selittää. On selvää, transfer-- vain tietojen siirtoa. Joten joko asiakkaan välillä, kuten Web-veli, ja palvelin. Joten periaatteessa vain miten internet toimii. 

Niin tarkka pyynnöstä miten nämä toimivat, olemme todella menossa katsomaan Esimerkiksi pyyntö ja vastaus. Mutta miten pyydämme tietoja palvelimelta ja miten palvelin vastaa meille on mitä tämä transfer protocol hallitsee. Joten pyyntö ja vastaus on noudattaa näitä erityisiä sääntöjä. Se on vakioitu siten, että ei väliä jos käytät internet, Se toimii aina sama, OK? 

Jälleen protokolla, ratkaisuna. Se on vain normaali vuorovaikutus samalla tavalla että professori Malan puhuu jos joku ulottuu kätensä, tiedät, että se on yhteinen kohteliaisuudesta tavoittaa sinun ulos ja ravista kätensä. Se on protokolla, eikö? 

Joten annan joitakin standardoituja pyynnöstä, joka on Haluan puristaa kättäsi, ja annat joitakin standardoituja vastaus, joka on joko ei kiitos tai voit kokeilla ja pudistaa käsi tai ehkä aiot kokeilla ja nyrkki kolahtaa minuun. Ja meillä ei ole protokolla, joka. Se hajoaa. Mutta jos kaikki noudattavat sama protokolla, tietenkin, se menee paljon enemmän saumattomasti. Ihmiset tutustuvat toisiinsa. Kaikki ovat tyytyväisiä. 

Joten maailman web, jokainen noudattaa samaa rules-- hieman parempi kuin sosiaalisia normeja. Mutta, että me tarkastelemme klo esimerkki pyynnöstä täällä. Joten ei tämä pieni Tärkeintä tässä alhaalla joka kertoo eri värejä, mitä he tarkoitti. 

Niin valkoinen on aivan kuin menetelmä pyynnöstä ja protokolla version-- joten menetelmä pyynnöstä versio. Ja sitten tämä on jonkin verran kentän nimi ja arvo Tämän kentän, josta me mennä hyvin, hyvin pian. Joten tämä on esimerkki pyynnöstä. Tämä on minun kaltaiseni, joka ulottuu ulos, haluavat esitellä itseni. 

Tämä on sitä, mitä asiakas tai mikä selain olisi lähettää palvelimelle. Joten tämä on GET-pyyntöä, joten se on pyytää jotain palvelimelta. Ja se on, tietenkin, HTTP ja se on versio 1.1. 

Joten loput tästä täällä on mitä me kutsumme otsikko, ja sen lisätietoja joka antaa meille paremman käsityksen mitä me oikeastaan ​​pyydä, tai tietoja, jotka haluamme antaa palvelin, joka saattaa olla merkitystä. Joten User-Agent antaa jonkin verran enemmän Kuvaus on-- esimerkiksi täällä, kiemura / 7.24.0 on todella aio kertoa palvelin että käytämme Google Chrome meidän selain. Joten jos olet koskaan kuullut ihmisistä, jotka puhuvat kyse siitä, että sovellus reagoiva useita selaimia, tämä on jotain, että he käyttäisi koska jos en tiedä mitä selainta pyyntö on lähtöisin, et voi räätälöidä tietoja että. Joten tässä tapauksessa käyttäjä on vain antaa tällainen tunnistaa tiedon mitä selainta Käyttäjänimesi on tällä hetkellä käytössä, OK? 

Niin silloin meillä on myös isäntä, joka on minne olemme todella haluavat mennä. Tässä tapauksessa haluamme mennä apple.com, ostaa hienoja uusia iPad tai jotain, ehkä söpö valot meidän asuntolan huonetta. Ja nimi arvo lopussa on vain täyteainetta, vain yleinen asia sillä te nähdä. Se ei oikeastaan vastaa mitään täällä. 

Joten voit olla niin paljon tai vähän kuin haluat kussakin tapauksessa. Suurimman osan ajasta, nämä ovat valinnaisia. Se vain riippuu siitä, mitä sinä tarvitset selaimen, alkaen käyttäjätunnuksesi jotta oikein antaa pyynnöstä. Tai se riippuu siitä, mitä käyttäjä todella haluaa luopua palvelimelle. Joten sinulla voi olla monia, monia Näiden otsikkokentästä nimet tai ehkä vain pari. Kuten niin monet asiat Olen sanonut tässä jaksossa, se todella riippuu asiayhteydestä miten käytät tätä. 

Joten ei se järkevää kaikille? Tämä on vain esimerkki pyynnöstä, otsikot, vaikka mitä. OK, niin on, että meillä on joitakin vastausta. 

Jälleen meillä on tilakoodi, protokolla versio, ja sitten kentän nimi ja kentän Arvostamme kuten aina. Joten meidän protokollan versio ja meidän tilan koodi on 200. OK, mikä tarkoittaa sitä, että, Kyllä, kaikki meni hyvin. Tässä on mitä haluat. 

Palvelimen tyyppi, sisältö type-- se kertoo meille, OK, olet menossa hakemaan tekstiä HTML. Tässä on pituus sen ja tässä on mitä pitäisi tehdä yhteys. OK, niin taas, riippuen tietoihin olet pyytää, riippuen siitä, mitä palvelin haluaa palata teille, sinulla voi olla useampi näistä kenttä nimiä, saatat olla vähemmän. Täysin yhteydessä riippuvainen. 

Ja sikäli kuin tämä tila koodi täällä, tietenkin, 200 ei ole ainoa sinulla voisi olla, eikö? Meillä on paljon tilakoodien. Onko kukaan muista mitään muille, että me mainitut luento? Monet heistä alkavat 4. 

Yleisö: 404. 

ALLISON Buchholtz-AU: 404, mikä on? 

Yleisö: Tiedostoa ei löydy? 

ALLISON Buchholtz-AU: Tiedostoa ei löydy. Täsmälleen. Entä 403? Yleisö: Kielletty. ALLISON Buchholtz-AU: Kielletty. Joten mitä mieltä olette joka tarkoittaa kanssa chmods? 

Yleisö: Se tarkoittaa, että voit ei ole lupaa lukea sitä. 

ALLISON Buchholtz-AU: Aivan. Jollakin tavalla, sinun ei tarvitse lupa käyttää sitä, eikö? Niin 404, 403. On todella hauska jota emme aina käyttöön joka vuosi, että Minun olisi pitänyt laittaa tänne, kuten 413, joka on olen teekannu. Voit google tätä. Hassua kuin, että on koodi 413 ja se olen teekannu. Jota en tiedä miksi olisit koskaan tarvitse että internetissä, mutta minä eksyä. Yleisö: Ehkä olet teetä potin. ALLISON Buchholtz-AU: Ehkä palvelin on teetä potin. Kuka tietää? Okei, joten aiomme siirtyminen todellista koodausta. Tunnen te olette menossa täältä pois melko nopeasti. 

Yleisö: Miksi se sanoa "palvelin: kahdesti? 

ALLISON Buchholtz-AU: Hm? Palvelin kahdesti? Se on hyvä kysymys. En ole varma. Aion selvittää ja Aion lähettää teille kaikille. 

OK, muita kysymyksiä lisäksi? Hyvä? Cool. 

HTML ja CSS, ja nyt me saada kaikki hauska osat. Niin aiemmin mainitsin, HTML on luultavasti yksi niistä asioista, te tutuin. Joten meillä on Hypertext Markup Language. 

Paras tapa oppia this-- en ole valmistettu dioja tai jotain sillä te HTML. Se on todella oppimisesta syntaksin. Ja jos olit MySpace päivä, olisit tämän alas. 

Siis todella, suurin asia on vain harjoitella ja kokeilla. Yksi suuria resursseja olisin Suosittelemme, että käytät on W3Schools. Joten W, 3, ja sitten koulut. Heillä on paljon resursseja HTML, CSS, ja heillä todella on Jaettu näyttö jutuissa jos he antavat sinulle esimerkki koodin. Voit viulu se, muuttaa sitä, ja paina Update, ja se näytän teille, mitä se itse asiassa tekee web-sivulle. 

Joten olisin erittäin suositeltavaa käyttää sitä. Se on aika siistiä. Et saa seg viat täällä kun asiat menevät pieleen. Jos onnistut saamaan seg vika HTML, älä kerro minulle, koska olen menossa todellinen kiehtoi. Mutta se on todella siistiä, koska voit muuttaa asioita, näet ne päivitetään elää. Ja luulen, että saat paljon intuitiivinen käsitys HTML jos todella vain viettää aikaa kokeilemalla sitä. Joten siksi sanoin, käytäntö ja kokeilu. 

Google, mistä täällä ulos, luultavasti yksi parhaita resursseja ja ystäviä. Tai Bing-- Olen työskennellyt Microsoftilla joten ehkä minun pitäisi sanoa Bing. Mutta melko paljon mitään on juuri menossa olevan syntaksin, niin ymmärtää, mitä tagit ovat, understanding-- ainakin CSS-- miten muuttaa tiettyjä ominaisuuksia. Se tulee olemaan erittäin hyödyllinen. 

Joten vaikka emme ole valmiita asioita, meillä on sellainen joitakin parhaita käytäntöjä että haluamme te kokeilla ja noudattaa by-- tai pikemminkin, sinun pitäisi noudattaa toistaiseksi. Niin lähellä kaikki tagit. Toivottavasti jokainen has-- tiedätkö mitä, Jos tämä ei ole järkeä juuri nyt, Lupaan se järkevää kun olemme koodaus ylös sivulle. Mutta lähellä kaikkia tageja. Joten jos joskus on joitakin header se kiinnike, H1, kiinnike, varmista, että kun olet tehnyt, että suljet että otsikko. Vahvista sivu W3 Validator. Jos et sulje tunnisteet, voit saada odottamattomalla tavalla. Se tulee sanoa, että sivusi on virheellinen jos ajaa se läpi tämä validaattoriin. Joten kun doubt-- ja erityisesti tämän viikon ja ensi viikolla pset-- samalla tavalla, että pyydämme voit käyttää tarkistaa 50 ja tyyli 50, voisit ajatella tämän yhtenä shekkejä, OK? 

Joten jos se ei läpäise W3 Validator. Tämä meidän rantautua sinut. Tai minä kerron teille oikean Nyt, minä rantautua sinut. Joten varmista, että se vahvistaa. Se ei ole vaikeaa. Olet juuri liitä koodi ja se tulee joko sanoa hyvää työtä tai olet puuttuu jotain samalla tavalla että tyyli 50 kertoo jos olet Messing ylös. 

Ja sitten vielä yksi asia on haluat erottaa oman markup, joka on kaikki HTML tai tekstin, ja muotoilutuotteet. Joten teemme esimerkki Tämän oikeuden tämän jälkeen. Joten HTML ja CSS: n pitäisi olla erillinen. Ja aiomme puhua MVC, joka on Model View Controller, ensi viikolla. Te pitäisi luultavasti oppia, että luento huomenna, jos sinulla on ollut jo oppinut sen tänään. 

Ja se on vain eräänlainen paradigma, että meillä on taipumus käyttää luotaessa web sivut erottaa asioita. Voit ajatella sitä samalla tavalla että meillä on tapana erillisten toimintojen C jossa hash löytää asioita. Se on vain tapa helpottaa elämääsi. Se erottelee määritteitä tai koodia, joka sinulla olisi käyttää uudestaan ​​ja uudestaan, mutta tällä tavalla, se tavallaan ja pitää se mukava ja siisti. Ja jos haluat muuttaa yksi asia, voit muuttaa sitä kerran ja se on muuttunut kaikkialla muualla. Joten se on enemmän sinun helppous ja joustavuus. 

Niin CSS, se on hyvin samankaltainen HTML, mutta sen sijaan tagit jotka mainitsin juuri nyt, me käyttää mitä kutsutaan valitsimia. Ja ne pohjimmiltaan juuri sellainen Associate tiettyjen tag HTML eri ominaisuuksia. Ja kun sanon määritteitä, tarkoitan asioita, kuten fontin värin, fontin tyyli, taustan väri, Tekstin väriä. Tuollaiset asiat. Kuten jos se on keskitetty, Jos se on pois oikealle, jos se on inverted-- kaikki Näiden hienoja asioita. Mitään tyylillisiä asioita että voit tehdä oman tekstin, tämä on mitä tarkoitan attribuutteja. 

Ja sitten kaksi asiaa on tietää, että selectors-- kaksi tärkeimmistä factors-- ovat tunnus, joka on ainutlaatuinen. Voit käyttää vain, että yksi asia. Muuten, se tulee huutaa sinulle. Ja kun me määrittelemme sen in CSS-tiedoston, se olla hash tunnus ja sitten mitä ominaisuuksia haluamme. Lupaan aiomme läpi esimerkki. Se tekee paljon enemmän järkeä. 

Luokka voi viitata useita lohkoja. Joten voit saada ensimmäinen ja kolmas kohta on samanlaista määritteitä, jos voit liittää ne samaan luokkaan. Ja kun me määrittelemme ne CSS, teemme piste luokka, luokan ollessa tahansa haluat sen nimeksi. 

Joten tiedän että tämä on oikea nyt hyvin abstrakti. Siksi aiomme koodia. Tiedän, että te rakastat että, ja te kaikki olette auta minua, koska Tämä on web-sivulla. Tämä on meidän osassa web-sivu, kaverit. Joten onko mitään kysymyksiä ennen I sammuta PowerPoint, tai jotain Haluatko minun vierittää takaisin ja ennen kuin aloitamme koodaus? 

Yleisö: Kun sanot ottelu tunnisteet, Mitä tarkoitat, valitsimet ja tunnisteet? ALLISON Buchholtz-AU: Voit ajatella niitä sama asia. Se on vain eri sanoja. Tarkoitan, kuten valitsimet. Mutta valitsimet myös kartta tunnisteita. Joten voit ajatella niitä käytännössä sama asia. Lupaan sen tulee tehdä järkevämpää kun koodia. Mitään PowerPoint tai kysyttävää juuri nyt, ennen kuin me itse luomme §: n sivulla? Jokainen valmis? Cool. 

Joten minulla on yksi alkuun. Saanen lisätä fontin teitä. OK, joten nyt meillä on vain paljain luut web-sivu täällä. 

Meillä on joitakin HTML. Meillä on joitakin header, jota me katso täällä esimerkiksi web-sivun. Jotkut otsikko, jotkut fontti. Nämä ovat tagit, OK? Joten kun en tarkoita sulkea tageja, näemme tässä tämä kiinnike pää on aukko tag, ja tämä kiinnike / Pää sulkee sen, OK? 

Joten voi ajatella tätä sinun henkselit teidän jos olosuhteet tai silmukoita. Jos sinulla on yksi alussa, haluat yhden lopussa. Se toimii edelleen suurimman osan ajasta Jos sinulla ei ole suljettu tunniste, mutta paras käytäntö sulkea tageja. 

Joten tässä tapauksessa, katsotaanpa muuttaa tätä. Aiomme olla kohta seitsemän. "Kohta Verkkosivun." Joten olen juuri menossa muuttaa tätä. 

Ja jos mennään tänne ja me reload-- täytyy säästää ja reload-- huomaamme, että täällä se muuttui, eikö? Cool. Niin tämä muuttaa otsikko. Tämä on mitä on teidän välilehti. 

Joten tämä on tavallaan etsivät sellaista tylsää. En tiedä kaverit. Mielestäni me haluamme jotain muuta täällä. 

Joten mitä voimme tehdä, on otsikko on juuri siellä. Tehdään jonkinlainen elin. Joten meillä on joitakin kehon täällä. Teen aina auki ja Suljen tagit aloittaa, samalla tavalla, että en olkaimet. Ah. Odota, mitä? 

Yleisö: [kuulumaton]. ALLISON Buchholtz-AU: Ah. Te minut. Hyvää työtä. Gold Star. 

OK, joten meillä on joitakin kehon täällä. Ja nyt aloitamme lisäämällä tekstiä. Joten sinulla on pari eri vaihtoehtoja lisäämällä tekstiä. Meillä on asioita, kuten otsikoita. Meillä on vain normaalia tekstiä. Joten vain alkaa puskea. Oikeastaan, jos kaverit haluavat vetää W3 Schoolin HTML, voit sellaista katsoa ympärilleen ja jos on jotain erityisesti, että haluat kokeilla Tämän sivun, voimme tehdä sen. Joten tässä tapauksessa, haluan vain tehdä joitakin H1. Joten H1 on kuin korkein otsikko. Se antaa sinulle jotain joka on erittäin suuri ja lihavoitu. 

Ja tässä tapauksessa, mitä haluamme ensimmäistä tekstiä nettisivuille? Mitään. Te olette luomassa tätä. Olen juuri menossa kirjoittaa. Yleisö: Tervetuloa. 

ALLISON Buchholtz-AU: Tervetuloa. OK, joten jos tallennat sen ja me reload, meillä on iso tervetullut. Joten niin näet eroja, tehdään jotain H6. Mitä me haluamme täällä? Oikea? 

OK, joten niin voit nähdä ero. Joo, Sublime. Joten jos huomaat, H1, hyvin, hyvin suuri. h6, kuten rohkea, mutta paljon pienempi, ja sinulla on kaikkea siltä väliltä. Joten voi olla H2, H3, H4. Ja nämä ovat vain otsikot, joten jos yrität luoda web-sivun, on eri kohdissa, ehkä haluat käyttää otsikot siellä jossain. 

Cool. Niin me lisätä hieman asioita kehossamme. Näen, että se olisi eräänlainen viileä, jos meillä olisi kuva. Tunnen jokainen voisi käyttää ehkä söpö pupu kuva juuri nyt, joten aiomme löytää bunnykuva ensin. 

En tiedä, jos teillä mitään mieltymykset siitä kumpi haluamme. Onko sinulla mitään mieltymyksiä? Tämä yksi täällä? Alas. OK. Tuo se on. Hyviä valintoja. 

OK, joten olemme menossa nähdäksesi kuvan. Katsokaa tuota. Katsokaa, että ihana asia. Miten voisit olla surullinen maanantaina tämän? 

Joten olemme juuri menossa kopioida kuvan URL. Ja mitä haluamme tehdä, on, sanotaan nyt sanoa, että olemme jonkin verran p kohdassa. Aiomme sanoa "Look katsokaa söpö pupu. d'awwww. " Rakastan pupuja. Minulla on pupu kotona. Kaipaan pupu. Joten mitä me aiomme do-- En tiedä, jos kaverit haluavat google this-- mutta HTML, miten voisit sisällyttää kuvan? Kirjaimellisesti, jos google "Esimerkiksi kuvien HTML" mikset kaverit kerro minulle mitä tämä tunniste pitäisi olla? 

Yleisö: img source-- 

ALLISON Buchholtz-AU: img source-- Yleisö: --equals-- ALLISON Buchholtz-AU: --equals-- Yleisö: --quote-- joo. ALLISON Buchholtz-AU: Perfect. Lovely. Katso, MySpace sukupolvi, eikö? Yleisö: Neopets. ALLISON Buchholtz-AU: Neopets. Oh, OK. Wow. Se on ollut hullu. OK. 

Joten varmista, että saan tämän oikeuden. Cool. Joten tämän pitäisi olla täällä. Ja sitten jos me uudelleen, meillä on pupu sivu Eikö tämä ihana? 

Tämä on niin söpö. Valitsit suuri, suuri kuva. Olen kaivaa sitä. 

OK, joten meillä on tämä ihana pupu nyt. Pystyimme lisätä kuva, aivan kuten se. Joten periaatteessa, jos on olemassa jokin kuva haluat lisätä Web-sivulle, voit lisätä sen aivan kuten tämä. Toinen asia olisi, jos olet tallennetun kuvan samaan kansioon kuin tämän tiedoston, voit vain kirjoittaa mitä nimi että kuva on sen sijaan, että web-linkin. 

Olisi silti olla lainausmerkkejä. Se olisi aivan kuten jos olisimme nimeltään this-- jos tämä kuva oli tallennettu Kansion tämän HTML-tiedosto että olen muokkaamalla ja se kutsuttiin bunny.jpg. Voisimme myös tehdä Se osoittaisi ylös. En kuitenkaan ole tätä tallennettu tiedosto ja haluan pitää pupu, joten aiomme säilyttää linkin. 

Yleisö: Mikä on rabbit.org? 

ALLISON Buchholtz-AU: rabbit.org. Se appropriate-- ulkoasua, voit hyväksyä sen. Hyväksymistä. bunny.jpg. Haluan antaa tämän pupu. Voi luoja, se on niin söpö. 

OK, joten olemme lisänneet otsikot. Olemme lisänneet kuva. On selvää, lisäsimme tekstiä täällä, eikö? Jos halusimme lisätä muita tekstit, menemme näin. Joten tämä on toinen kohta. 

Ja me sanomme "tämä on toinen kohta." Lisäksi olen kamala aapinen, joten en voi misspell asioita. Tiedoksesi. 

Joten meillä on toinen kohta täällä, eikö? Joten ehkä haluat tehdä jotain hieman mielenkiintoisempi kuin vain on kaikki teksti, kuten oikeassa linjassa. Ehkä haluat keskittää tekstin, OK? 

Joten jos joku haluaa käyttää näitä kätevä tietokoneiden edessäsi ja kertoa, miten olet menossa keskustaan ​​tämän tekstin, 

Yleisö: p align. 

ALLISON Buchholtz-AU: So p align yhtä kuin "keskus". Hän tappaa sen, kaverit. Y'all on tehostettava. Ja meillä on "Tämä on keskitetty." Ja nyt meillä on jotain keskellä. 

Samalla tavalla, jos haluavat sen tasattu vasemmalle, voisit tehdä align vertaistensa vasen, align yhtä kuin oikea. Täysin sinusta. Jos en täällä, niin tämä should-- nyt se oikea linjassa. 

Yleisö: Allison? Kuvan mukaan lähde, miksi ei siellä päättyessä img lähde? ALLISON Buchholtz-AU: Anteeksi. Tämän pitäisi olla siellä nyt olet hyvä. Nyt olemme hyviä. Yleisö: Eikö sinulla ole Sulje se siellä, vai ei? ALLISON Buchholtz-AU: No, niin img lähde, tämä on just-- kanssa kuva, se on vain nähtävä yhtenä tekijä, kun taas Jos huomaat, että näitä muita, meillä on joitakin tag sitten tietoa, se koskee ja sitten sulkevan. Mutta kuva, että kaikki on vain eräänlainen omavarainen. Cool. Joten te tiedä, miten luoda header, osaat syöttää tekstiä, osaat laittaa kuvan vuonna nyt, voit tasata asioita. 

Toinen asia, että sinun kannattaa pystyä tekemään on luoda luettelon CS-- olemme Tällainen menee ensi viikolla PSET. Kamaa, että me tyypillisesti opettaa tällä viikolla menee todella hyvin ensi viikolla PSET, joten olemme eräänlainen sekoitus, päällekkäisiä asioita täällä. Mutta se tulee olemaan hyödyllinen ensi viikolla. 

Joten jos halusimme luoda jonkinlaista lista, miten voisimme tehdä? Et voi vastata tähän aikaa. Joku muu on. Ei ole vaikea, kaverit, lupaan. Google "Järjestämätön lista HTML." Mikä se oli? 

Yleisö: [kuulumaton]. ALLISON Buchholtz-AU: Right. Joten Haluammeko tilattu tai järjestämättömiä? Tehdäänpä järjestämättömiä. Joten meillä on ul, joka sanoista Järjestämätön lista. Ja mitä meillä on jokaiselle elementille? Onko se tarvitsee oman tunnisteen? Voimmeko aloita kirjoittamaan asioita? 

Yleisö: li. 

ALLISON Buchholtz-AU: li. Joten mikä on lista tulee olemaan? Mitä me haluamme täällä? Emme vain nimiä. Tehkää Jacob. 

Yleisö: Kani elintarvikkeita. 

ALLISON Buchholtz-AU: Kani elintarvikkeita. OK Pidän tästä. Kani elintarvikkeita. 

OK, joten meillä on porkkanat. Pidän tätä kani teema. Olen kaivaa sitä paljon. Yleisö: Oikeastaan, ajattelin että Jaakob olisi helposti luettava. ALLISON Buchholtz-AU: Jacob? Jacob on kanin ruokaa. Jos näit Jaakobin valokuvan virka, saatat ajatella että hän sai hyökkäsi tappaja kani. 

Yleisö: Minulla on kani nyt. Minulla on tappaja kani nyt. 

ALLISON Buchholtz-AU: Oletko tosissasi? 

Yleisö: Tuon sen seuraavaan osaan. Minulla on se. 

ALLISON Buchholtz-AU: Tämä on naurettavaa. Muutenkin. 

Yleisö: [kuulumaton] 

Yleisö: Joo, minun Proctor on kani samoin. 

ALLISON Buchholtz-AU: Haluan kani. OK, kuka tuo todellinen kani Seuraavassa osassa, yhteensä tonttu pistettä. Yleisö: [kuulumaton] Yleisö: Voi, se ei ole todellista. Se on täytetty jänis. 

ALLISON Buchholtz-AU: Oh joo, me voimme sulkea näitä. Näyttää rad. Yleisö: Onko se todella väliä? ALLISON Buchholtz-AU: Näin ei ole. Useimmat näistä asioista, et sulje tag, 99% ajasta mitään pahaa tapahtuu tapahtua, mutta se on hyvä tyyli, liian. Niin Jaakob. Ja meillä on salaattia. Yleisö: Linkkejä, se on todella tärkeää. ALLISON Buchholtz-AU: Hm? Yleisö: hyperlinkeille. ALLISON Buchholtz-AU: hyperlinkeille. Kyllä, hyperlinkkejä tarvitse sitä. OK, joten katsotaanpa täällä. Ja meillä on lähellä meidän luettelosta. Ja katsomme, että. Olemme all-- Jaakobin oikeassa. Kanin ruokaa. Mieleeni Bunnicula. 

Yleisö: [kuulumaton] ALLISON Buchholtz-AU: Tuon takaisin kaikki vanhan koulun viittauksia tänään, enkö? Vain kaikki vanhan koulun viittauksia. Olisi pitänyt nostaa kuten Gogurts tai jotain pientä purtavaa. 

Yleisö: Or gushers. ALLISON Buchholtz-AU: Oh. OK. Nähdään jos voin seurata alas gushers ensi viikolla. En usko, että voin tehdä sen. Mielestäni meillä olisi Joissakin toimistossa. 

OK, joten olemme kattaa paljon erilaisia mitä voi tehdä HTML, eikö? Ja kuten voit todennäköisesti nähdä, se on nothing-- toivottavasti ei liian intim-- jos se on, en tarkoita vähätellä ketään. Jos sinulla on ongelmia, tulkaa juttelemaan. 

Mutta suurin osa siitä on vain katsot syntaksin, eikö? Jos haluat Järjestämätön lista, jos haluat jonkinlainen lista, Jos haluat tasata jotain tai muodossa jotain, kyse on vain Tällainen etsii syntaksi HTML, eikö? Ja yksi asia, joka on melko viileä itse on jos menet to-- katsotaanpa, mikä on kiva sivusto, joka haluamme? Kellään mitään suosikki sivustot jotka ovat OK, niin näet verkossa? Tiedätkö mitä, haluan vain tehdä CS50. Se on mukava ja turvallinen, eikö? 

OK, joten CS50 täällä. Oi katso, siellä osio juuri nyt. Jos pidät miltä se näyttää. 

Yleisö: [kuulumaton]. ALLISON Buchholtz-AU: Emme ole aikoo tehdä meta-osiosta, kaverit. Se ei tapahdu. Se olisi siistiä, mutta emme aio tehdä sitä. 

Joten mitä voisit tehdä, jos pidät tavalla tämä toimii on, voit aina oikeassa Napsauta mitä tahansa web-sivu, jonka haluat ja voit tehdä View Page Source. Se tuo esiin kaikki HTML. Ja tämä on oikeastaan ​​todella hyvä tapa muotoilla oma web-sivu. Siirry Web-sivulle, jonka todella ja katsoa HTML ja selvittää, miten he tekivät sen. 

Ja kirjaimellisesti, niin kauan niin voisitteko mainita asioita, kunhan et vain varastaa ihmisiltä, ​​se on OK. Erityisesti CS50 [? rahoittaa?] olemme sellaista odottaa sinua saamaan inspiraatiota muiden verkkosivuilla. Joten rohkeasti. Katsoa läpi sivustoja, jotka luulet ovat oikeastaan ​​aika ja selvittää, miten he käyttävät HTML ja CSS tehdä näitä asioita. 

Joten kuten näette täällä, siellä on ilmeisesti kuten linkkejä ja meillä on luokka täällä. Meillä on linkki tänne. Meillä on lista. Meillä luultavasti joitakin kuvia täällä jossain. 

Meillä on joitakin hienoja tyyli täällä. Tämä on seuraava asia me aiomme tehdä. Niin tyyli, kun näet nämä tyyli suluissa, se on CSS periaatteessa. Ben Oliko sinulla kysymys? 

Yleisö: Mikä on div? 

ALLISON Buchholtz-AU: div on vain a-- mikä on div? Yleisö: Division. ALLISON Buchholtz-AU: Division. Joo, se on aivan kuin erottaa eri elementtejä. OK, joten tässä on mitä me olemme aio mennä seuraavaan. Joten tämä ei ehkä ole paras tyyli sillä, jos huomaat meillä on HTML ja tyyli samalla sivulla, ja me todella haluamme erotella, OK? Ja todella, haluan avata minun oikea koska tämä on tarkoitus olla PDF, joten meillä on style.css. 

Joten mitä voimme tehdä tässä nämä ovat hienoja asioita, kuten jotkut fade ja voisimme yrittää tehdä sitä, mutta tunnen kuten haluaisin sotku, että jopa lennossa, joten kannustan kaverit mennä yrittää se itse, mutta en aio tehdä sitä nyt. Joten jos te, muistakaa, Jos joskus lyödä Harjoitus, jotain swoops sisään puolelta. Se on tekemistä häivyttää ja siirtyminen ja vaikka mitä. 

Yleisö: Ja siinä kaikki CSS ja HTML? 

ALLISON Buchholtz-AU: Kaikki CSS ja HTML. Joo. Voit siis tehdä paljon todella hienoja asioita CSS ja HTML. Joten meidän mahtava pupu web sivu täällä, me aiomme tehdä vähän vähän CSS-tyyleille kanssa. 

Joten jos koskaan on tyyli levyt, jotka olemme täällä, voit vain soittaa style.css. Voit kutsua sitä mitä haluat. Tärkeää on, että olemme menossa viitata se meidän web.html täällä. 

Joten mitä aiomme tehdä, on we-- joten en sotke tätä up-- aiomme yhdistää nämä kaksi tiedostoa yhteen. Joten samalla way-- aion piirtää analogisesti C täällä. Samalla tavalla, että jos sinulla on Joissakin library-- ja meillä on cs50.h-- Meidän kääntäjä kytkevät sen. Tämä on juuri nimenomainen linkki meidän puoleltamme. Niin samalla tavalla, että teemme hash kuuluu joitakin tiedosto, mitä Olen aikeissa kirjoittaa on juuri HTML / CSS vastaa siitä. 

Olemme vain sanoa, OK, tämä verkkosivu aikoo käyttää tätä tyylitiedoston, OK? Joten meillä on linkki suht sama tyylitiedoston. Ja sitten meillä on tyyppi, css. Ja sitten href tasavertaisina. 

OK. Joten kaikki tämä teki tässä voit ajatella tätä samaa asiaa kuten hash kuuluu. Ilmeisesti se näyttää hieman enemmän monimutkainen, mutta kaikissa tapauksissa, se on käytännössä sama asia. Joten tämä on vain joitakin linkittäminen tyylitiedosto, se on tyyppiä text / css, ja nimi on style.css. 

Mikä on tärkeää tietää on, että web-sivu että olen työskennellyt oikea now-- web.html ja style.css-- ovat samassa kansiossa. Koska eri kansioihin, sinun täytyy antaa todellinen root siihen tai polku. Mutta tässä tapauksessa, me pitää se super yksinkertainen ja se tulee olemaan täällä. Joten jos teemme sen, minulla on jonkin verran asiat jo jonottivat täällä. 

Joten meillä on elin, joka on menossa on meidän taustaväri, joka Juuri nyt on vaaleansininen. Emme voi muuttaa sitä, jos haluamme, mutta jos muistan tämän oikein, se pitäisi vain muuttaa sen vaaleansininen. Ja nyt meillä on vaaleansininen tausta. Ja meillä oli here-- kukaan voi muistaa kumpi on hash tunnus tai luokka? 

Yleisö: tunnus. 

ALLISON Buchholtz-AU: tunnus. Cool. Joten mitä me haluamme tehdä on, mitkä nämä fontit tai which-- haluammeko "Katsokaa söpö pupu "olla violetti? Mielestäni me haluamme sen olevan violetti. Olen melko alas, että on violetti. 

Joten mitä tehdä, on teet ID equals-- tässä tapauksessa Sanoin, mitä, kaunis väri täällä. Me reload. Yhtäkkiä, se on violetti. OK, niin on tunnus, muistakaa sen on oltava yksilöllinen, joten en olisi koskaan käyttää tämä tunnus missään muualla. Mutta luokka, koska meillä on täällä melko fontti, Minun pitäisi pystyä käyttämään että missä tahansa haluan. 

Tehdäänpä tämä yksi täällä. Voimme siis sanoa luokka on yhtä kaunis fontti. Ja jos katsomme nyt, meillä on tämän jäähtyä melko fontti täällä. Joten ehkä haluan tehdä molempia. OK, en oikeastaan ​​tiedä, jos tämä on menossa töihin, mutta haluan kokeilla sitä. Ja näin opit CSS ja HTML. Olet kuin, tiedät mitä haluan kokeilla tätä. En ole varma, jos se on menossa töihin. Katsotaanpa, jos se toimii. 

Ja katsokaa, että. Nyt se on violetti ja se on melko fontti. OK, joten sinulla on kaikki nämä eri asioita voit tehdä. Onko sinulla kysymys? 

Yleisö: Joo. No, aivan kuten värit käytät sanoja. Onko tapa tehdä värejä heksadesimaalilukuina RGB? ALLISON Buchholtz-AU: Voit myös tehdä sen heksadesimaaliarvo, uskon. Joo. Mutta se on tavallaan mukavaa, jos halua etsiä niitä. Voit vain olla, violetti tai sininen. Yleisö: Toivotaan he tiedä mitä se tarkoittaa. ALLISON Buchholtz-AU: Right. Joten tehkäämme tästä luku- tai chartreuse. Miksi et koskaan valita chartreuse? Se on mielenkiintoinen väri. 

OK, joten ilmeisesti voimme nähdä meidän voi muuttaa asioita, mutta me haluamme. Jos halusi create-- sanotaanko Halusimme luoda toisen luokan. Mikä voisi te haluta muuttaa? Jos vedät W3Schools " CSS asiakirjat, Jätän puheenvuoron te. Voimme yrittää ja tehdä jotain kivaa kanssa Tämän viimeisen pari minuuttia. Koska olen tavallaan antanut sinulle pikakurssin paljon hienoja asioita että voit tehdä. Mutta loppujen lopuksi, kuten sanoin, jos vain kokeilu, opit paljon. 

Yleisö: Oletko etsiä että fontti? 

ALLISON Buchholtz-AU: Joo, Katsoin, että fontti. Niin kuin kirjaimellisesti, minä meni to-- mitä minä tein? Tein CSS Fonttiluettelon ja Sitten tein font pino, ja sitten olin kuin, katso, tässä ovat kaikki hienoja fontteja voit tehdä. Ja siellä oli tämä yksi, joten Olen kopioinut sen minun leikepöydälle. Ja sitten olin kuin, OK, viileä, siellä mennään. Kaikki valmista. 

Yleisö: Joten sinun täytyy varmistaa, että CSS tietää mitä tämä fontti on. 

ALLISON Buchholtz-AU: Kyllä. 

Yleisö: Mitä se sano lopussa? Cursive? 

ALLISON Buchholtz-AU: Cursive. Joo. 

Yleisö: Taustakuva. 

ALLISON Buchholtz-AU: Taustakuva. OK. Joten haluat kertoa minulle, miten tämä. Jätän tämän sinulle. Olen vain kirjoittamalla tänne nyt. Pyörä on käsissäsi. 

Yleisö: OK 

ALLISON Buchholtz-AU: OK. Mitä teen? 

Yleisö: Doing-- Tiedän mitä tulee sen jälkeen kihara ahdin. ALLISON Buchholtz-AU: OK. Joten luultavasti elin, I Olettaisin, koska olemme teet taustakuvan. 

Yleisö: Joo, tehdään se. 

ALLISON Buchholtz-AU: OK. Yleisö: OK, niin tausta paksusuoli, ja sitten me tarvitsevat URL-osoite, joka kuvaa. Ehkä pseudo-koodi, joka nyt, ehkä. 

ALLISON Buchholtz-AU: Mikä haluaisit minun to-- Yleisö: Olen ajatellut kuin GIF. ALLISON Buchholtz-AU: GIF? Tämä tulee olemaan mielenkiintoinen. OK, mitä minä Google-hakuja täällä? 

Yleisö: Ei, se on sinun valintasi. 

ALLISON Buchholtz-AU: Miksi älä we-- jos se pupu, Tunnen meillä pitäisi olla mukava ruohoinen nurmikko tai jotain. 

Yleisö: Meadow. Niitty. 

ALLISON Buchholtz-AU: niitty? OK. Yleisö: Tai Rachel Maddow. ALLISON Buchholtz-AU: Tämä yksi näyttää aika. Voi, että pieni, vaikka. Tarvitsemme hyvä koko kuvan. Katsotaanpa. Oi, katso. Se on aika niitty. Tiedätkö mitä, Pidän tästä. Katsotaanpa kopioi tämä. 

Yleisö: OK, joten mielestäni se on URL, avoimet sulut. 

ALLISON Buchholtz-AU: OK, URL. 

Yleisö: Sitten osoite. 

ALLISON Buchholtz-AU: OK. On, että kaikki me tarvitsemme? 

Yleisö: Sulje suluissa puolipiste, ja sitten tilaa, tausta väliviivaa kiinnitys paksusuolen kiinteä, ja kihara ahdin. 

ALLISON Buchholtz-AU: OK. Katsotaan jos se toimii. Se tulee olemaan aika siistiä, jos se tekee. Olen todella innoissani täällä. Se ei toiminut. Ihmettelen miksi. Yleisö: Ehkä URL täytyy olla lainausmerkeissä. ALLISON Buchholtz-AU: Ehkä. Ja tämä on se, miten me opimme, kaverit. 

Yleisö: Voimmeko tausta värin ja taustakuvan? 

Yleisö: Ei. Yksi syrjäyttää muut. 

ALLISON Buchholtz-AU: En tiedä. Katsotaanpa. Katsotaan check it out ja nähdä. 

Yleisö: Voi, ehkä, joo. [Väliin ÄÄNTÄ] 

ALLISON Buchholtz-AU: OK, tämä on obviously-- I [kuultavissa] täällä. Niin OK. Yleisö: Taustaa liitetiedostona. ALLISON Buchholtz-AU: Ah. 

Yleisö: OK, en tiedä. ALLISON Buchholtz-AU: Se näyttää siltä kuin se olisi työtä. Oletko varma että se on paksusuolen paikantimen jälkeen? 

Yleisö: Ei, se on puolipiste. ALLISON Buchholtz-AU: Se on puolipiste. Yleisö: Sanoinko kaksoispiste? ALLISON Buchholtz-AU: Sanoit paksusuolen. Yleisö: Voi ei. ALLISON Buchholtz-AU: Ole hyvä. Yleisö: Hei, odota nyt emme voi lukea tekstiä. ALLISON Buchholtz-AU: Now et voi lukea tekstiä, mutta meillä on taustakuvan. Mmhmm? 

Yleisö: Onko HTML tukee dynaamista sisältöä? Kuten, voisitko muuttaa, että kuva riippuen ikkunan kokoa, tai on, että CSS-- 

ALLISON Buchholtz-AU: Joten CSS on tehdä niin. Joten jos te olette kiinnostunut oppimiseen kehittyneitä CSS, Olen co-opetus seminaari CSS 7.. Ja lupaan se tulee olla paljon syvällisempi ja tehdä paljon enemmän cool asioita tässä jaksossa. Ja minun yhteistyö opettaja on kuin yhteensä etupään web dev mestari. Joten se on aika siistiä, jos haluat oppia kaikki hienoja asioita että CSS voi tehdä. 

Mutta mitä meillä on täällä hänen taustansa kiinnitys fixed-- joten se on jokin kiinteä size-- mutta voit itse dynamically-- Jos joskus näet verkkosivut, koska useimmat hyvät verkkosivut tekee, kun säädät koko selaimen, se säätää taustan tai kuinka paljon näkyy tai alustaa asioita, eikö? Niin, että mitä me kutsumme suhteellinen paikannus. 

Ja CSS voi todella tarttua, kuinka suuri selain leveys on tai kuinka pitkä se on, ja voit sijoittaa asioita mukaan suhteelliset koot vs. absoluuttisesta koosta. Ja se on tietysti kehittyneempi CSS, mutta se on jotain, voit tehdä. Jos haluat oppia enemmän, tulla minun seminaari. 

Niin, että on jotain, voit tehdä. Ja CSS voi todella do-- CSS ja JavaScript, josta saamme ensi week-- voi voit muuttaa dynaamisesti sivuja ilman ladata niitä koko ajan. Ja saat tehdä joitakin aika siistiä kamaa. 

Joten on olemassa toinen asia että te ehkä haluta tehdä tai mitä haluat tutustua? Meillä on 10 minuuttia jäljellä. Voimme myös lähteä aikaisin, mutta jos haluat tehdä joitakin enemmän web juttuja, voimme, mutta en ole menossa pakottaa sinut. Mutta voimme myös vain syödä karkkia. Yleisö: Valitse teksti valkoinen, jotta voit lukea sen. ALLISON Buchholtz-AU: OK. Joten tässä tapauksessa haluamme joitakin s. Yleisö: Pitäisikö meidän tehdä se elin niin se koskee koko sivun? ALLISON Buchholtz-AU: Kyllä, voimme todella. Se on hyvä idea. Joten me have-- sinä tiedä, mitä meidän pitäisi olla? En tiedä, jos voimme tehdä tekstin väri. Aioin yrittää luoda toisen luokan täällä. 

Yleisö: Miten saat niin että sillä on ehdotuksia? ALLISON Buchholtz-AU: So jos te olette kiinnostuneita, tämä on toinen teksti editori nimeltään Sublime. Sinun pitäisi pystyä asenna se laitteeseen. Joskus se saa hieman hankala. Jos haluat auttaa tässä, Olen erittäin iloinen voidessani auttaa sinua sen kanssa, koska gedit on suuri ja se on mahtavaa, koska voit kääntää sen pohjalle, mutta en todellakaan kuten Sublime koska se on melko ja se ei tee asioita kuten automaattinen täydennys. 

Joten voit varmasti vapaasti Kerrothan, jos et halua tehdä sitä. Jos vain google "Sublime teksti ", se yleensä on ohjeet siitä, miten asentaa eri käyttöjärjestelmistä. Se on todella hienoa, I ajatella, mielestäni. Niin s. Mielestäni voin vain tehdä text-- tai Voimme vain tehdä väri on "valkoinen". Siellä. 

Joten mitä tein täällä on se, että minä ei muuttanut koko tekstin. Mutta p tässä vain tag, että meillä on, eikö? Tämän kohdan tunniste. Joten olen juuri luonut CSS elementti, joka sanoi, OK, mitään tämä tunniste p, tee väri valkoinen. 

Joten jos olet huomannut, se teki tämä valkoinen ja tämä valkoinen. Se ei tee lista valkoinen, koska se ei liity tähän. Voisit mennä läpi ja voisit say-- 

Yleisö: Onko taustaväri. 

ALLISON Buchholtz-AU: Tausta väri? 

Yleisö: tausta putki väri jos laitat p tag. 

ALLISON Buchholtz-AU: OK. Haluat sen valkoinen? Yleisö: mmhmm. ALLISON Buchholtz-AU: OK. Siellä mennään. Yleisö: Se on outoa. ALLISON Buchholtz-AU: Aika siistiä, eikö? Joten jos vain pelleillä, aiot oppia paljon. Ja se voi olla aika siistiä. Minusta se on ehdottomasti enemmän ilahduttavaa kuin joskus koska sinun ei tarvitse odottaa oman ohjelman laatimiseen. Voit painaa Päivitä ja et pidä, Oi, katso, se toimi, tai oi, olen luultavasti puuttuu jotain. Ja se on jotain, joka on todella viileä tästä seuraava osa luokan, on se varmasti, minä Ajattele helpompi tarkistaa kuten mennä matkan varrella vastaan ottaa kirjoittamaan näitä pitkiä ohjelmia ja joka haluaa ja rukoilee että se toimii lopussa. 

Niin, että olen sitä mieltä, te kaikki näyttää hyvältä. Jos sinulla on kysyttävää, kuten aina, tulla juttelemaan minulle, tule haluaisin tietää. Aion olla aivan seuraavien 15 minuuttia jos haluat jutella mitään ja kaikki. 

Toivon siis guys-- Onnea tämän PSET. Määräaika on perjantaina keskipäivällä koska se julkaistiin myöhään. Joten en todennäköisesti näkemään paljon te torstaina mutta toivottavasti ei. Ehkä sinulla on se tapahtuu sitten. Olisin erittäin ylpeä. 

Mutta jos ei, Nähdään torstaina. Voit myös käyttää myöhään, mikä ulottuu sen lauantaihin klo. Mutta minä don't-- vai? 

Yleisö: Halloween. 

ALLISON Buchholtz-AU: Se on Halloween, ja b, En usko, että tulee olla virka perjantaina. Joten todellakin yrittää saada se tehdään Perjantai jotta voimme kaikki juhlia Hallow viikonloppuna. Okei, minä Nähdään ensi viikolla.