>> [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.
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]