[MUSIC SPILLE] ALLISON Buchholtz-AU: Greit, alle sammen. Velkommen tilbake til del. Så vår agenda for i dag kommer løpet mye mer web dev ting. Jeg vet ikke hvor mange av du har sett dine psets siden den ble utgitt tidligere denne morgenen. Jeg ville som hvor mange folk har lest spec, men ettersom hvordan du har hatt det hele tatt av likhet, sju timer for å se på det og det er en mandag og du har sikkert hatt klasse, Jeg kommer til å anta at de fleste av dere ikke har. Hvis du har, ekstra kudos. Du i utgangspunktet å hjelpe implementere en enkel web server i C, som er en helt ny PSet, så dere får være Marsvin. Det kommer til å bli en morsom, vill uke, men jeg tror det vil være mye moro og det vil være en veldig god erfaring faktisk. Så for å forberede deg for at, i snitt i dag, vi kommer til å gå chmod, TCP / IP, og deretter en liten bit av HTML og CSS. På slutten, vil vi faktisk kode opp en enkel nettside sammen for å hjelpe dere på en måte få mer kjent med det. Og så hvis du ikke har plukket opp dine quizzer, de er i front, men jeg er ganske sikker på at alle her har sin quiz. Og også på dette notatet, løsninger er ikke opp ennå, men så snart vi finish-- liker, den siste få mennesker tar sitt quizzes-- de vil være opp. Hvis du har noen spørsmål i mellomtiden, gjerne send meg personlig. Jeg vil svare med din individuelle spørsmål, som jeg alltid gjør. Så på dette notatet, chmod. Så i utgangspunktet alt du trenger å vite om chmod er at det er brukt til å endre filrettigheter, ikke sant? Så det er bare noen systemer kaller det en endre rettighetene, som det står her. Og hvis du noen gang vil se hvilke tillatelser en fil har, istedenfor bare å gjøre ls, kan du gjøre ls -l. l står for lenge. Så vil du gjøre lange lister av alt, og det vil gi deg mye mer detaljert informasjon om hver av filene dine. Og du vil se something-- jeg er kommer til å hoppe fremover for en second-- men du vil se noe som ligner på at topplinjen der for hver fil. Og vi vil gå gjennom hva det betyr. Så i utgangspunktet, for å endre dine filrettigheter, du bare ønsker å bruke chmod. Du kan tenke på det som noe annet UNIX ringe som ls eller cd eller whatnot. Det er bare litt av en annen som samtale. Så vi gjør chmod og så får vi har tre sifre typisk. Det er et par måter å gjøre den, hvorav den ene vil vi gå over. Men vanligvis, vil du ha tre Sifrene som strekker seg fra 0 til 7 hver gang. Så en ting er at det er tre ulike tillatelser at vi kan gi hver fil. Og det er lesbart, som er representert ved R, som vil være fornuftig i en liten bit; w, som er skrivbar; og kjørbar, som er x. Jeg vet at det e en, kjørbar, kanskje ikke det mest fornuftig, men vi representerer den med x. Og hva skjer da er hver av disse har også antallet representasjon. Så vi har 1, 2 og 4. Og innerst inne hva som skjer, er hver av disse tre tallene her tilsvarer en annet sett av brukere at disse tillatelsene gjelder. Så du kan tenke på det første Tallet tilsvarer selve bruker eller eieren av filen, den andre nummer vil tilsvare gruppen, og den siste refererer til verden, OK? Så hva skjer er å huske de numbers-- r er 4, w er 2, x er en, ikke sant? Dette-- hvis du summerer disse opp, som gir deg det første tallet at vi kanskje innspill i vår chmod. Så i dette tilfelle, hva ville dette tallet være? Det ville være fire pluss to pluss 1, som er en 7, ikke sant? Og i dette tilfellet, er disse ikke har noe, så dette her ville sette til chmod 700, OK? Og hva det gjør er det gir alt av disse tillatelsene til din bruker. Så dette betyr vår bruker kan gjøre hva de vil. De kan lese denne fila. De kan kjøre denne filen. De kan skrive til denne filen. Men gruppe, og om i verden, uten tillatelser overhodet, OK? Så en annen måte å skrive det, kan vi do chmod på tre siffer, hver av hvilke tilsvarer uansett sum, eller at bestemt gruppe er, spesifikk undergruppe. Eller vi kan gjøre faktisk en annen ting. Hold på. Vi kan gjøre noe med disse her. Hvor mange av dere så et eksempel hvor det var som å chmod et pluss x? Visste du at i forelesning, tror jeg? Slik at en står for det hele tatt. Det betyr gi den til alle brukere, som jeg glemte å sette her. Men et pluss x, hvis vi legge merke til her, hvis vi gjør å chmod-- hvilken gruppe vi er snakker om pluss tillatelsene vi ønsker å gi dem. Så dette kan være et pluss eller minus. Plus legger tillatelse. Minus tar bort tillatelse. Ganske intuitivt, tror jeg. Så et pluss x betyr chmod. Så endre tillatelsene for alle mennesker Hvis dette er en a-- add tillatelser. Og X- det betyr hva tillatelse vi gi alle. Lese, skrive, eller kjøre? PUBLIKUM: Execute. ALLISON Buchholtz-AU: Execute. Så vi gir alle brukere tillatelse til å kjøre denne filen, OK? Så hva om vi ønsket å gjøre at med det numeriske skjemaet? Så husk med numerisk, vi ønsker tre tall. PUBLIKUM: 4. ALLISON Buchholtz-AU: Hva var det? PUBLIKUM: 4. ALLISON Buchholtz-AU: Not 4. PUBLIKUM: 0, 0, 4. ALLISON Buchholtz-AU: Vel, vi ønsker å gi den til alle brukere, ikke sant? Så vi kommer til å ha et tall i hvert spor. Det kommer til å være det samme nummer i hvert spor fordi vi ønsker å gi alles kjør tillatelser. Så kjørbar er 1, men på rett spor. Så hvis vi chmod 111 som ville være det samme som chmod et pluss x. Betyr det fornuftig for alle? Vi kommer til å gå gjennom et par eksempler. Så det store takeaway her er en er ikke på her, men betyr bare gi den til alle brukere. u er hvis du bare vil å gi eller ta bort en spesiell tillatelse fra brukeren eller eieren. g er for gruppen, slik at midten sifret. Og deretter andre du kan tenke på som verden, som siste siffer. Så med det, vil vi gå til et eksempel, fordi jeg føler meg som eksempler alltid gjøre disse tingene enklere å forstå. Så rwx-- vi gikk gjennom dette-- kan også være som representerer 700. Det er eksempelet vi så ved flere av bildet. Så chmod 444 på noen fil ville gi hvilke rettigheter? Du var veldig nær. PUBLIKUM: lesbar for alle. ALLISON Buchholtz-AU: lesbar. Så lesbare for alle, ikke sant? Og hva er en annen måte å gjøre det? Hvis vi ønsker å gjøre chmod med enten r-er eller w-tallet, pluss og minuser, hva ville det ringe ut? Det ville være chmod hva? PUBLIKUM: et pluss r. ALLISON Buchholtz-AU: et pluss r på fem. OK, så er dette det samme som denne, bare to forskjellige oversettelser av det samme. Så med det, har vi disse. Så jeg ønsker dere å prøve og skrive disse slags i deres motsatt vei. Så med chmod 555, hva ville det være? Ville det være et pluss eller u pluss eller whatnot? For u pluss x, gi meg de tre tallene. Og så fortelle meg om hvilke rettigheter vi faktisk tildeling og til hvem? Så jeg skal gi dere to minutter til å jobbe med det. Føl deg fri til å snakke med hverandre. For de av dere som kom i en liten sent, det er godteri og skjorter. Vi har tre skjorter igjen, og vi har Kit Kats og Starbursts. Så gjerne komme grab noen i denne lille mellomspill. Dessuten er den siste vanskelige. Det er to chmods for den siste. Egentlig la meg lukke den døren mens dere jobber med det. Candy er alltid nødvendig på en mandag ettermiddag. OK, så chmod 555. Hva er en annen måte vi kunne skrive det? Noen ideer? Ja. PUBLIKUM: et pluss rx. ALLISON Buchholtz-AU: r pluss rx. Ønsker du å forklare hvorfor det ville bli rx? PUBLIKUM: Fordi du har 5, så det er 4 pluss 1, slik at er lest pluss kjørbar, og det er for alle. ALLISON Buchholtz-AU: Høyre. Så bare for å gjenta, 5 her vi vet som summen av 1 og 4, fordi hvert nummer i vår trio er Summen av tillatelsene for at undergruppe, ikke sant? Enten brukeren, gruppe, eller hele verden. Så i dette tilfellet, vet vi at 5 har til å bli dannet av 4 og en. 1 og 4, og tilsvarer lesbar og kjørbar. Vi gir den til alle, slik at vi kan gjøre chmod et pluss rx. Og selvsagt, vi bare gikk gjennom spørsmålene der, så nå denne filen er kjørbar og lesbar for alle. Så hva med den andre? Hva kan antall for at man bli? Noen ideer? Gå fremover. PUBLIKUM: 100 [uhørbart]. ALLISON Buchholtz-AU: 100. Nettopp. Så har du lyst til å forklare hvorfor 100? PUBLIKUM: Fordi det er for bruker, så det er i første posisjon. Og så x kjørbar er 1. ALLISON Buchholtz-AU: Nettopp. Så vi gi kjørbar tillatelser til akkurat den brukeren. Så i dette tilfelle, ville det være 100. Og jeg har alle svarene opp på neste lysbilde i tilfelle du skriver mange ting ned. OK, så dette neste som faktisk blir gjort med to chmods, kan du gjøre det. Så er det noen som har noen anelse om hvordan du kanskje få chmod 640 omskrevet på annen måte? Du kan endre bruker først og deretter du kan endre gruppen er mitt hint. Så hvis vi bare endrer Brukeren, som er denne første en her, hva kan vår samtale være? Så brukeren er u, ikke sant? Så chmod u pluss hva? Mmhmm? PUBLIKUM: rw. ALLISON Buchholtz-AU: rw. Høyre, for å lese og skrive, fordi lese er 4, w er to, de sum sammen som 6. Så vi får chmod u pluss rw, og vi får vår første 6 der. Så da å få fire, vi ønsker nå å endre våre gruppeinnstillingene. Så vi kommer til å gjøre chmod g pluss hva? Hva er en 4? PUBLIKUM: r. ALLISON Buchholtz-AU: r. Nettopp. Så vi gir eieren lese og skrive tillatelser og vi gir gruppen lese tillatelser, som vi har tatt opp her. Mmhmm? PUBLIKUM: Hvis du kan skrive noe, innebærer det at du kan kjøre den? ALLISON Buchholtz-AU: Du kan skrive til something-- Jeg tror ikke at det innebærer at du kan kjøre den. Cool. Så det er alt som vi bare gikk gjennom. Så på dette neste, er det bare slags vanligste tilfellene at du ønsker å holde i tankene for din oppgavesettet. Disse er vanligvis tillatelsene at vi gjerne at du skal bruke. Så for 711, gir det oss, selvfølgelig, bruker alle tillatelser som en tendens til å være fornuftig. Og da er det kjørbar ved gruppen i verden, noe som gir mening hvis du har en katalog, du ønsker å være i stand til å traversere inn i den. Folk trenger tilgang. For enhver ikke-PHP-fil, du kommer å bruke 644, som ville gjøre hva? Hva innebærer det, eller hva tillatelser gjør det gi? Slik at eieren kan hva? PUBLIKUM: Les og skriv. ALLISON Buchholtz-AU: Les og skriv. Og deretter gruppe og andre kan bare lese, ikke sant? Og så chmod 600 for noen PHP-filer som du bruker, din eier, igjen, kan lese og skrive til den men alle andre er bare slags sperret av. Så dette vil faktisk være mer nyttig når du kommer til ditt problem satt neste uke der du er faktisk å bygge et nettsted. Så hvis du noen gang kjørt inn noen merkelige problemer der det ikke lasting riktig, kanskje du må legge til en kjørbar tillatelse, eller kanskje du trenger en lese eller skrivetilgang. Små ting som pleier å reise folk opp, men det er typen som går til når du starter neste ukes PSet. Og jeg vil gi deg mer hint om denne ukens PSet, men jeg har ennå å se på den siden den ble sluppet i morges. Men du e meg, jeg vil ha sett på det etter den tid jeg svare i morgen. Så nå, alle er bra med chmod? Noen langvarig spørsmål? Ganske grei. Bare slags holde styr på hva lese, skrive, og utføre tallene er er trolig den vanskeligste delen. Så med TCP / IP, alle disse protokollene, typen som med dine datastrukturer i forrige uke, er det mye mer viktig å slags få et høyere nivå intuisjon av dem. Dette er ikke CS143 hvor vi går å be deg om å implementere et nettverk, så du vil være fint hvis du ikke forstår nitty modig av alle protokoller. Hva er viktig å forstå er typen som hva de representerer og hvorfor de er viktige. Så TCP / IP, selvfølgelig, er det Transmission Control Protocol eller Internet Protocol, som er utgangspunktet bare et sett av lover i utgangspunktet eller standarder som forteller data hvordan den skal behandles, hvordan det skal sammenpakket, overføres og mottas. Så det i utgangspunktet, akkurat som det sier her, øker sjansene at data blir der ønsker du det å komme til. Jeg er sikker på at hvis dere gikk til foredrag eller sett det på nettet, han has-- Jeg vet ikke hvis han gjorde det i år, men jeg vet i fjor, hadde han en demo hvor han hadde et bilde av Rob og han dele den opp i fire og legg den i konvolutter og prøvde å få den over Sanders. Og du kan slags tenke på det på den måten. Det er bare et sett med regler som fortelle data hvordan du får et sted og lar deg vite om du mangler data, på samme måte som hvis du er ta flere sider med notater og du merke dem med side 104, side 204, og du går tilbake til å studere senere og du mangler something-- du finner ikke siden 304-- du vet noe er galt, slik at du kan se gjennom notatene igjen eller få noen til å sende deg forelesningen notater fra den dagen. På samme måte med data på internett. Hvis jeg ber om noe fra noen server og det er behov for å sende den i flere pakker, sannsynligvis kommer til nummer det på noen måte, la meg vet hvor mange jeg skal ha mottatt, og fortell meg, åh, dette er en av 10 eller dette er en av 10.000. På den måten når jeg går til reassemble alle bitene sammen, Jeg vet at hvis noe mangler og jeg kan be om det igjen. Betyr det fornuftig? Bare et sett med regler. På sitt grunnlag, sett med regler, OK? Så vi snakket også en litt om porter. Dette er egentlig bare en standard som kan du vite hva slags data blir overført i disse pakkene. Hvis vi går med vår konvolutten eksempel, gjør vi ikke vet at det er et bilde av Rob i det med mindre vi skrive det på utsiden av konvolutten vår. Så havner er i utgangspunktet det samme. Det er bare en måte å finne ut hva type data blir overført. Så vi har all De vanligste her. Så 21-- disse er også snill av like gode ting å vite. Det er slags en enkel quiz spørsmålet. Være, hva betyr port 80 gjøre? Eller, hva betyr port 443 gjøre? Så gode ting å vite. Så vi har her, er 21-fil overføringsprotokoll, så bare reglene som styrer filoverføring. 25, noe som vi alle bruke altfor mye, er e-post. 53 er domenenavnet system, som er utgangspunktet bare slags et oppslag for IP-adressen til et domenenavn. Så jeg er ganske sikker på at det var nevnt i foredraget, hvis du gå til noe sånt google.com, den har en IP-adresse som er knyttet til den. Det er faktisk google.com ikke. Og så 53 er porten som faktisk tar vare på slags sette det inn den IP-adressen for deg. Og deretter 80 og 443 er svært vanlig. Du har enten din nettside eller du har din sikker web-side, som mange nettsider er overføring av over nå. Så det er litt høyt nivå oversikt over overføringsprotokoll. Jeg ser ikke mye mer i dybden. Det er slags kule ting hvis du er interessert. Det er nok av ressurser. Wikipedia faktisk er en ganske god side. Så jeg så på det bare en liten stund siden, så jeg vil anbefale å se på det hvis du er interessert eller ta 143 i to år på grunn Jeg tror det er hvert annet år. Så på slutten av dette, er vi snakker om web-sider og HTTP, som faktisk er vårt neste tema for i dag før vi går inn i HTML og CSS og du kan faktisk kode opp en web-side. Det blir morsomt. Vi vil ha bilder av kaniner og det vil være stor. Så HTTP, som du kan se her, er en av de vakre akronymer for denne uken, noe som er Hypertext Transfer Protocol. Så igjen, det er bare et annet sett med regler som regulerer hypertekst overføre, i dette tilfellet. Så beste måten å lære om dette er bare slags å bryte det ned i disse individuelle ord fordi det er mange linjene på skjermen der. Så vi kommer til å begynne med hypertekst. Så "hyper", kan du tenke på "Over", som super-type ting. Så det er egentlig bare tekst tatt til neste nivå, så det er som super tekst, som den neste teksten. Så det er i utgangspunktet bare tekst som gir oss mer informasjon enn normal tekst gjør det, OK? Så i dette tilfellet her, dette er hypertekst. Dette forteller oss at vi har noen kobling som vi skal, som er cs50.net, som Nå er cs50.harvard.edu. Disse lysbildene er litt gammel. Og det kommer til å vise det som dette, som en hyperkobling, og deretter en veldig kul nettside. Så det er tekst, som er litt litt av virkelig kule ting der. Så du kan koble ting, og du kan sette inn bilder, og du kan style ting. Og den mest kjente tingen som du gutta sannsynligvis har med hypertekst er Hypertext Markup Language, HTML, som selvfølgelig er alt av nettet som vi ser rundt oss, gitt med litt CSS stil kastet i. Men hvis noen var virkelig stor med MySpace, Jeg er sikker på at dere alle brukte HTML hele tiden å skape de perfekte profiler, ikke sant? Jeg føler at det kan være en utdatert referanse nå, men uansett. Bare en little-- dere er ikke så mye yngre. Noen av dere er eldre enn meg. MySpace var fortsatt en ting når jeg var ung. Jeg er ikke så gammel. Anyways, HTML bare en form for hypertekst. Så hypertekst er bare tekst med ekstra funksjoner. Så overføringsprotokoll er trolig jo mer ustabil tingen å forklare. Selvfølgelig, transfer-- bare overføre data. Så enten mellom klienten, som nett bror, og en server. Så i utgangspunktet bare måten Internett fungerer. Så nøyaktig anmodning fra hvordan disse fungerer, vi er faktisk kommer til å se på et eksempel forespørsel og respons. Men hvordan vi ber om informasjon fra en server og hvordan serveren svarer til oss er hva denne overføringsprotokollen reglene. Så forespørselen og responsen har å følge disse bestemt sett med regler. Det er standardisert, slik at uansett der du bruker Internett, det virker alltid den samme, OK? Igjen, protokoll, sett med regler. Det er bare en normal samhandling på samme måte at professor Malan snakker om hvis noen strekker hånden sin, du vet at det er vanlig høflighet å nå yours ut og riste hånden. Det er en protokoll, ikke sant? Så jeg gi noen standardisert forespørsel, som er at jeg ønsker å riste hånden, og du gi noen standardisert respons, som er enten nei takk eller du kan prøve og riste min hånd eller kanskje du skal prøve og knyttneve bump meg. Og vi har ikke en protokoll for det. Det bryter ned. Men hvis alle følger samme protokoll, selvfølgelig, det går mye mer sømløst. Folk blir kjent med hverandre. Alle er fornøyd. Så i verden av web, alle følger samme rules-- litt bedre enn sosiale standarder. Men med det, vil vi se på et eksempel forespørsel her. Så det er denne lille taste her på bunnen som forteller deg de forskjellige fargene, hva de er ment å bety. Så hvit er akkurat som din metode forespørsel og protokoll version-- slik metode forespørsel versjonen. Og så dette er noen Navn-feltet og verdien av dette feltet, som vi vil gå inn veldig, veldig kort tid. Så dette er et eksempel forespørsel. Dette er som meg stikker ut, ønsker å presentere meg selv. Dette er hva klienten eller hva din nettleser ville være å sende til serveren din. Så dette er en GET-forespørsel, så det er ber om noe fra serveren. Og det er, selvfølgelig, HTTP og det er versjon 1.1. Så resten av denne her er hva vi kaller overskriften, og dens ekstra informasjon som gir oss et bedre inntrykk av hva vi faktisk ber om, eller informasjon som vi ønsker å gi serveren som kan være aktuelt. Så User-Agent gir noen mer beskrivelse on-- for eksempel her, curl / 7.24.0 er faktisk kommer til å fortelle serveren som vi bruker Google Chrome som nettleseren vår. Så hvis du noen gang høre om folk som snakker om å lage en app responsive til flere nettlesere, dette er noe som de ville bruke fordi hvis du vet ikke hvilken nettleser forespørselen kommer fra, du kan ikke tilpasse dataene til det. Så i dette tilfelle, brukeren er bare å gi denne typen å identifisere informasjon om hvilken nettleser bruker bruker for øyeblikket, OK? Så da har vi også vert, som er hvor vi faktisk ønsker å gå til. I dette tilfellet ønsker vi å gå til apple.com, kjøpe noen kule nye iPads eller noe, kanskje søt lysene på våre sovesaler. Og navn verdi på slutten er bare en filler, bare en generell ting for dere å se. Det gjør faktisk ikke svarer til noe her. Så du kan ha så mye eller så lite som du vil i hvert enkelt tilfelle. Mesteparten av tiden, disse er valgfrie. Det avhenger bare av hva du trenger fra nettleseren, fra din bruker for å riktig dannelse av forespørselen. Eller det kommer an på hva din bruker faktisk ønsker å gi opp til serveren. Så du kan ha mange, mange av disse header feltnavn eller du kan bare ha et par. Som med så mange ting Jeg har sagt i denne delen, det er egentlig avhengig av konteksten om hvordan du bruker dette. Så gjør som gir mening for alle? Dette er bare et eksempel på en forespørsel, overskrifter, whatnot. OK, så med det, har vi noen svar. Igjen har vi vår statuskode, protokoll versjonen, og deretter feltnavn og felt verds som alltid. Så vår protokoll versjon og vår status kode er 200. OK, noe som betyr at, ja, gikk alt bra. Her er det du ønsker. Serveren typen, innholdet type-- det forteller oss, OK, du er kommer til å få litt tekst HTML. Her er lengden på den, og her er hva du bør gjøre med tilkoblingen. OK, så igjen, avhengig på dataene du er spør etter, avhengig av hva Serveren vil tilbake til deg, du kan ha flere av disse felt navn, har du kanskje mindre. Helt kontekstavhengig. Og så langt som denne statusen kode her, selvfølgelig, 200 er ikke den eneste du kunne ha, ikke sant? Vi har massevis av statuskoder. Er det noen som husker noe av andre som vi nevnte i foredraget? Mange av dem starter med fire. PUBLIKUM: 404. ALLISON Buchholtz-AU: 404, som er? PUBLIKUM: Finner ikke filen? ALLISON Buchholtz-AU: Finner ikke filen. Nettopp. Så hva med 403? PUBLIKUM: Forbidden. ALLISON Buchholtz-AU: Forbidden. Så hva tror du det betyr med chmods? PUBLIKUM: Det betyr at du har ikke tillatelse til å lese den. ALLISON Buchholtz-AU: Nettopp. I noen måte, trenger du ikke tillatelse til å få tilgang til det, ikke sant? Så 404, 403. Det er en veldig morsom en som vi alltid introdusere hvert år som Jeg burde ha satt opp her, som 413, som er jeg er en tekanne. Du kan google dette. Det er pussig ut, som er kode 413, og det er jeg er en tekanne. Som jeg ikke vet hvorfor du ville skulle trenge det på internett, men jeg komme bort fra emnet. PUBLIKUM: Kanskje er du en tekanne. ALLISON Buchholtz-AU: Kanskje serveren er en tekanne. Hvem vet? All right, så vi er i ferd med å overgang til real koding. Jeg føler at dere kommer til å kom deg ut herfra ganske raskt. PUBLIKUM: Hvorfor gjør det si "server: to ganger? ALLISON Buchholtz-AU: Hm? Server to ganger? Det er et godt spørsmål. Jeg er ikke sikker. Jeg vil finne ut og Jeg vil sende dere alle. OK, andre spørsmål foruten det? Bra? Cool. HTML og CSS, og nå er vi få til alle de morsomme delene. Så som jeg nevnte tidligere, HTML er trolig en av de tingene dere er mest kjent med. Så har vi Hypertext Markup Language. Den beste måten å lære dette-- jeg ikke har noen forberedt lysbilder eller noe for dere med HTML. Det er virkelig om å lære syntaksen. Og hvis du var i MySpace dag, ville du ha dette ned. Så egentlig, er den største tingen bare for å øve og eksperimentere. En av de store ressursene jeg ville anbefaler å bruke er W3Schools. Så bare W, 3, og deretter skoler. De har en masse ressurser på HTML, om CSS, og de faktisk har en delt skjerm slags ting der de vil gi deg eksempel kode. Du kan fikle med det, endre det, og trykk Update, og det vil vise deg hva det faktisk gjør til websiden. Så jeg vil anbefale å bruke det. Det er ganske kult. Du vil ikke få SEG feil her når ting går galt. Hvis du klarer å få en SEG feil med HTML, la meg vite fordi jeg er kommer til å bli ekte fascinert. Men det er virkelig kult fordi du kan endre ting, du kan se dem oppdatert levende. Og jeg tror du vil få en mye mer intuitiv forståelse av HTML hvis du faktisk bare bruke litt tid på å eksperimentere med det. Så det er derfor jeg sa, praksis og eksperiment. Google, herfra videre ut, vil trolig være en av dine beste ressurser og venner. Eller Bing-- Jeg jobber hos Microsoft, så kanskje jeg burde si Bing. Men stort sett alt er bare kommer til å være syntaks, så det å forstå hva kodene er, understanding-- minst med CSS-- hvordan du kan endre visse attributter. Det vil være super nyttig. Så selv om vi ikke gjør det har noen preparerte ting, vi har slags noen gode fremgangsmåter at vi ønsker dere å prøve og rette seg by-- eller rettere sagt, bør du holde inntil videre. Så lukk alle kodene dine. Forhåpentligvis alle has-- vet du hva, hvis dette ikke gir mening akkurat nå, Jeg lover at det vil være fornuftig når vi koding opp på siden. Men lukke alle kodene dine. Så hvis du noen gang har noen header som er brakett, H1, brakett, sørg for at når du er ferdig med det, du lukker at spissen. Validere siden din med W3 Validator. Hvis du ikke lukker kodene dine, du kan få uventet oppførsel. Det vil si at siden din er ugyldig hvis du kjører det gjennom denne validator. Så når du er i doubt-- og spesielt på denne ukens og neste ukes pset-- på samme måte som vi ber deg å bruke sjekke 50 og style 50, du kunne tenke på dette som en av dine sjekker, OK? Så hvis det ikke passerer W3 Validator. Det er noe vi vil forankre deg på. Eller jeg fortelle deg rett nå, vil jeg forankre deg på. Så sørg for at den validerer. Det er ikke vanskelig. Du limer i koden din og det vil heller si god jobb eller du mangler noe på samme måte at stilen 50 forteller deg hvor du får opp. Og så en siste ting er du ønsker å skille markup, som er alt som HTML eller teksten din, og din styling. Så vi vil gjøre et eksempel av at rett etter dette. Så HTML og CSS skal være atskilt. Og vi kommer til å snakke om MVC, som er Model View Controller, neste uke. Dere bør nok lære om det i forelesningen i morgen hvis du hadde allerede lært det i dag. Og det er bare slags et paradigme som vi pleier å bruke når du oppretter web sider for å skille ut ting. Du kan tenke på det på samme måte at vi har en tendens til separate funksjoner i C hvor vi hash å finne ting. Det er bare en måte å gjøre livet ditt enklere. Det skiller ut attributter eller kode som du ville være å bruke om og om igjen, men på denne måte, det slag av holder det fint og ryddig. Og hvis du ønsker å endre en ting, endrer du det en gang og det er endret overalt ellers. Så det er mer for din letthet og fleksibilitet. Så med CSS, det er veldig likt til HTML, men i stedet for tagger at jeg nevnte akkurat nå, vi bruker det som kalles velgere. Og de i utgangspunktet bare slags av knytte en bestemt etikett i HTML med ulike attributter. Og når jeg sier attributter, mener jeg ting som skriftfarge, skriftstil, fargen på bakgrunnen, fargen på teksten din. Disse slags ting. Som hvis den er sentrert, hvis det er av til høyre, hvis det er inverted-- alt av disse kule ting. Eventuelle stilistiske ting som du gjør i teksten, dette er hva jeg mener med attributter. Og deretter to viktigste tingene å vite er at selectors-- to av hoved factors-- er ID, som er unik. Du kan bare bruke det for en ting. Ellers kommer det til å kjefte på deg. Og når vi definerer det i en CSS-fil, vil det være hash-ID og deretter hvilke attributter vi ønsker. Jeg lover at vi kommer til å går gjennom et eksempel. Det vil gjøre mye mer fornuftig. Klasse kan referere til flere blokker. Så du kan ha din første og tredje ledd har samme slags attributter hvis du forbinder dem med samme klasse. Og når vi definerer dem i CSS, gjør vi en prikk klasse, med klassen blir uansett du vil den skal bli navngitt. Så jeg vet at dette er riktig nå svært abstrakt. Det er derfor vi kommer til å kode. Jeg vet dere elsker det, og dere alle er kommer til å hjelpe meg fordi Dette er nettsiden din. Dette er vår seksjon nettside, folkens. Så er det noen spørsmål før jeg slå av PowerPoint, eller noe du vil ha meg til å bla tilbake til før vi begynner koding? PUBLIKUM: Når du sier kamp koder, mener du velgere eller koder? ALLISON Buchholtz-AU: Du kan tenk på dem som det samme. Det er bare forskjellige ord. Jeg mener, i likhet med velgere. Men velgere også kart til koder. Så du kan tenke på dem som effektivt det samme. Jeg lover at det kommer til å gjøre mer fornuftig når vi kode. Noe fra PowerPoint eller spørsmål akkurat nå før vi faktisk laste siden vår seksjon er? Alle klare? Cool. Så jeg har en gang. La meg øke skrift for dere. OK, så akkurat nå, vi har bare en bare bones nettside her. Vi har noen HTML. Vi har noen header, som vi se her som eksempel web-side. Noen tittelen, noen skrift. Dette er koder, OK? Så når jeg mener lukke kodene dine, ser vi her denne braketten hodet er din åpning tag, og denne braketten / Head avsluttes det, OK? Så du kan tenke på dette som tannregulering i din dersom forholdene eller etter looper. Hvis du har en i begynnelsen, du vil ha en på slutten. Det vil fortsatt jobbe mesteparten av tiden Hvis du ikke har en lukket tag, men beste praksis er lukke kodene dine. Så i dette tilfellet, la oss endre dette. Vi er nødt til seksjon syv. "§ webside." Så jeg bare kommer til å endre dette. Og hvis vi går over her, og vi reload-- må lagre og reload-- Vi merker at her oppe det endret seg, ikke sant? Cool. Så dette endrer tittelen. Dette er hva som står på fanen. Så dette er slags ser litt kjedelig. Jeg vet ikke om gutta. Jeg tror vi vil ha noe annet her. Så det vi kan gjøre er header er bare der. La oss gjøre noen form for kroppen. Så vi har litt kropp her. Jeg gjør alltid åpen og lukker koder for å starte, på samme måte som jeg gjør tannregulering. Ah. Vent, hva? PUBLIKUM: [uhørlig]. ALLISON Buchholtz-AU: Ah. Dere fikk meg. God jobb. Gullstjerne. OK, så vi har litt kropp her. Og la oss nå begynne å legge litt tekst. Så har du et par forskjellige muligheter for å legge til tekst. Vi har ting som overskrifter. Vi har bare vanlig tekst. Så la oss bare starte med en heading. Egentlig, hvis dere vil å trekke opp W3 School HTML, du kan slags se deg rundt og hvis det er noe spesielt at du ønsker å prøve ut med denne nettsiden, kan vi gjøre det. Så i dette tilfellet, la oss bare gjøre noen h1. Så h1 er som den høyeste spissen. Det vil gi deg noe som er veldig stor og fet. Og i dette tilfellet, hva gjør vi ønsker for første tekst på vår web-side? Noe. Dere kommer til å lage dette. Jeg bare kommer til å skrive. PUBLIKUM: Velkommen. ALLISON Buchholtz-AU: Velkommen. OK, så hvis vi lagre den og vi laste, vi har en stor stor velkommen. Så bare så du kan se forskjeller, la oss gjøre noe på H6. Hva vil vi her? Høyre? OK, så det er bare slik at du kan se forskjellen. Ja, Sublime. Så hvis du legger merke til, h1, veldig, veldig stort. h6, som fet, men mye mindre, og du har alt i mellom. Så du kan ha h2, h3, h4. Og dette er bare overskrifter, så hvis du prøver å lage en web-side som har forskjellige seksjoner, kanskje du vil bruke overskrifter i der et sted. Cool. Så vi vil legge litt mer ting i kroppen vår. Jeg ser at det ville være snill kult om vi hadde et bilde. Jeg føler at alle kunne bruke kanskje en søt kanin bilde rett om nå, så vi kommer til å finne en bunny bilde først. Jeg vet ikke om dere har noen preferanser på hvilken som vi ønsker. Har du noen preferanser? Denne her? Down. OK. At man er det. Gode ​​valg. OK, så vi kommer til å se vår image. Se på det. Se på den søte ting. Hvordan kunne du være trist på en mandag med dette? Så vi skal bare å kopiere bildet URL. Og hva vi ønsker å gjøre er, la oss bare si at vi har noen p for ledd. Vi kommer til å si "Se se på den søte kaninen. d'awwww. " Jeg elsker mine kaniner. Jeg har en kanin hjemme. Jeg savner min bunny. Så hva vi skal do-- Jeg vet ikke om dere vil å google dette-- men med HTML, hvordan kan du ta med et bilde? Bokstavelig talt, hvis du google "Inkluderer image HTML," Hvorfor forteller ikke dere meg hva denne taggen skal være? PUBLIKUM: img source-- ALLISON Buchholtz-AU: img source-- PUBLIKUM: --equals-- ALLISON Buchholtz-AU: --equals-- PUBLIKUM: --quote-- ja. ALLISON Buchholtz-AU: Perfect. Lovely. Se, MySpace generasjon, ikke sant? Målgruppe: Neopets. ALLISON Buchholtz-AU: Neopets. Oh, OK. Wow. Det har vært gal. OK. Så sørg for at jeg får denne retten. Cool. Så dette bør være her. Og så hvis vi laste, har vi vår Sprett på siden Er ikke dette bedårende? Dette er så søt. Du valgte en stor, flott bilde. Jeg grave den. OK, så vi har denne bedårende kanin nå. Vi var i stand til å legge til en image, akkurat sånn. Så i utgangspunktet hvis det er noen bilde du ønsker å legge til din nettside, kan du legge det akkurat som dette. En annen ting ville være hvis du har bildet lagret i samme mappe som denne filen, kan du bare skrive hva navnet på det bildet er stedet for å ha en web-link. Det vil fortsatt være i anførselstegn. Det ville bare være som hvis vi hadde kalt dette-- hvis dette bildet hadde blitt frelst i mappen med denne HTML-fil at jeg redigerer og det ble kalt bunny.jpg. Vi kan også gjøre at og det ville dukke opp. Men jeg har ikke dette lagres i filen og jeg ønsker å holde kaninen, så vi kommer til å holde koblingen. PUBLIKUM: Hva er rabbit.org? ALLISON Buchholtz-AU: rabbit.org. Det er en appropriate-- ser, kan du adoptere den. Adopsjon. bunny.jpg. Jeg ønsker å adoptere denne bunny. Åh, gud, det er så søt. OK, så vi har lagt til overskrifter. Vi har lagt til et bilde. Selvfølgelig, la vi litt tekst her, ikke sant? Hvis vi ønsket å legge til andre tekster, vi ville gå som dette. Så dette er et annet ledd. Og vi sier "dette er en annen paragraf." Også, jeg er en fryktelig stavekontroll, så jeg kan feilstave ting. Bare så dere vet det. Så vi har en annen avsnitt her, ikke sant? Så kanskje du ønsker å gjøre noe litt mer interessant enn bare har all teksten, som høyrejustert. Kanskje du ønsker å sentrere teksten din, OK? Så hvis noen ønsker å bruke disse hendige datamaskiner foran deg og fortelle meg hvor du er kommer til å sentrere denne teksten, PUBLIKUM: p align. ALLISON Buchholtz-AU: So p align lik "center". Han dreper det, folkens. Y'all trenger å gå opp. Og vi har "Dette er sentrert." Og nå har vi noe sentrert. På samme måte, hvis du ønsker det venstrejustert, du kan gjøre for justering av likemenn venstre, lik Høyrejustér. Helt opp til deg. Hvis jeg gjorde rett her, så dette should-- nå er det riktig justert. PUBLIKUM: Allison? Av bildekilde, hvorfor er ikke det tett av img kilde? ALLISON Buchholtz-AU: Beklager. Det man bør være det Nå er du god. Nå er vi godt. PUBLIKUM: Har du ikke å lukke den der, eller ikke? ALLISON Buchholtz-AU: Vel, så img kilde, er dette en just-- med bilde, det er bare sett på som ett element, mens hvis du merker for resten av disse, vi har noen tag deretter informasjon som det gjelder, og deretter en avsluttende koden. Men med bilde, alt er bare slags selvforsynt. Cool. Så dere vet hvordan du oppretter en header, vet du hvordan du skal skrive inn tekst, du vet hvordan å sette et bilde i nå, kan du justere ting. En annen ting som du kanskje vil være i stand til å gjøre er å lage en liste i CS-- vi er slags går inn i neste ukes PSet. Ting som vi vanligvis underviser denne uken går veldig bra med neste ukes PSet, så vi er slags blanding, overlappende ting her. Men det vil være nyttig for neste uke. Så hvis vi ønsket å lage noen liste, hvordan kan vi gjøre det? Du kan ikke svare på denne tiden. Noen andre må. Det er ikke vanskelig, folkens, lover. Google "sorterte liste HTML." Hva var det? PUBLIKUM: [uhørlig]. ALLISON Buchholtz-AU: Høyre. Så vi vil ha bestilt eller uordnet? La oss gjøre en uordnet. Så vi har litt ul, som står for uordnet liste. Og hva har vi for hvert element? Betyr det trenger sin egen tag? Kan vi bare begynne å skrive ting? PUBLIKUM: li. ALLISON Buchholtz-AU: li. Så hva er vår liste kommer til å være? Hva vil vi her? Vi bare gjør navn. Bare gjør Jacob. PUBLIKUM: Rabbit matvarer. ALLISON Buchholtz-AU: Rabbit matvarer. OK Jeg liker dette. Rabbit matvarer. OK, så vi har gulrøtter. Jeg liker denne kaninen tema. Jeg graver det mye. PUBLIKUM: Egentlig tenkte jeg at Jacob ville være en legit. ALLISON Buchholtz-AU: Jacob? Jacob er kanin mat. Hvis du så Jakobs bilde fra kontortiden, du kan ha trodd han fikk angrepet av en morder kanin. PUBLIKUM: Jeg har en kanin nå. Jeg har en killer kanin nå. ALLISON Buchholtz-AU: Tuller du meg? PUBLIKUM: Jeg skal ta det neste avsnitt. Jeg har det. ALLISON Buchholtz-AU: Dette er latterlig. Uansett. PUBLIKUM: [uhørbart] PUBLIKUM: Ja, min Proctor har en kanin i tillegg. ALLISON Buchholtz-AU: Jeg vil ha en kanin. OK, den som bringer en ekte kanin til neste del, totalt brownie poeng. PUBLIKUM: [uhørbart] PUBLIKUM: Å, det er ikke ekte. Det er en utstoppa kanin. ALLISON Buchholtz-AU: Oh yeah, kan vi lukke disse. Ser rad. PUBLIKUM: Spiller det egentlig noen rolle? ALLISON Buchholtz-AU: Det gjør ikke det. Med de fleste av disse tingene, du ikke lukke tag, 99% av tiden ikke noe dårlig skjer til å skje, men det er god stil, også. Så Jacob. Og vi har salat. PUBLIKUM: For lenker, det er veldig viktig. ALLISON Buchholtz-AU: Hm? PUBLIKUM: For hyperkoblinger. ALLISON Buchholtz-AU: For hyperkoblinger. Ja, hyperkoblinger trenger det. OK, så la oss se her. Og vi har tett av vår liste. Og vi ser på det. Vi har alle-- Jacob, akkurat der. Kanin mat. Minner meg om Bunnicula. PUBLIKUM: [uhørbart] ALLISON Buchholtz-AU: jeg bringe tilbake all den gamle skolen referanser i dag, er jeg ikke? Bare alle de gamle skole referanser. Burde ha tatt ut Gogurts eller noe for snacks. PUBLIKUM: Eller gushers. ALLISON Buchholtz-AU: Oh. OK. Jeg får se om jeg kan spore ned gushers for neste uke. Jeg tror jeg kan gjøre det. Jeg tror vi kan ha noen på kontoret. OK, så vi har dekket mye forskjellig ting du kan gjøre med HTML, ikke sant? Og som du kan sikkert se, er det nothing-- forhåpentligvis ikke altfor intim-- hvis det er, jeg mener ikke å bagatellisere noen. Hvis du har problemer, kan du komme å snakke med meg. Men det meste av det er bare se på syntaksen, ikke sant? Hvis du ønsker en uordnet liste, Hvis du ønsker noen form for liste, Hvis du ønsker å justere noe eller format noe, det handler om bare slags ser opp syntaks for HTML, ikke sant? Og en ting som er ganske kult faktisk er hvis du går to-- la oss se, hva er en fin nettside som vi liker? Noen som har noen favoritt nettsteder som er OK å bringe opp på nettet? Vet du hva, la oss bare gjøre CS50. Det er hyggelig og trygt, ikke sant? OK, så CS50 her. Å se, det er en del akkurat nå. Hvis du liker hvordan den ser ut. PUBLIKUM: [uhørlig]. ALLISON Buchholtz-AU: Vi er ikke kommer til å gjøre meta-delen, folkens. Det skjer ikke. Det ville vært kult, men vi kommer ikke til å gjøre det. Så hva gjør du kunne gjøre hvis du liker måten dette fungerer er at du kan alltid rett klikk på en hvilken som helst nettside som du liker og du kan gjøre Vis sidekilde. Det vil få opp all HTML. Og dette er faktisk en virkelig god måte å style din egen nettside. Gå til en nettside som du virkelig liker og se på HTML og finne ut hvordan de gjorde det. Og bokstavelig talt, så lenge som du sitere ting, så lenge du ikke er bare stjele fra folk, er det OK. Spesielt for CS50 [? finansiere?], er vi slags forventer du å få inspirasjon fra andre nettsider. Så gjerne. Se gjennom nettsteder som tror du er veldig pen og finne ut hvordan de bruker HTML og CSS for å gjøre disse tingene. Så som du ser her, er det åpenbart som lenker, og vi har en klasse her. Vi har en link her. Vi har en liste. Vi sannsynligvis har noen bilder i her et sted. Vi har fått noen kule stilen her. Dette er den neste tingen vi kommer til å gjøre. Så stil, når du ser disse stil parentes, er det CSS utgangspunktet. Ben, hadde du et spørsmål? PUBLIKUM: Hva er div? ALLISON Buchholtz-AU: div er bare a-- hva er div? PUBLIKUM: Division. ALLISON Buchholtz-AU: Division. Ja, det er akkurat som skille ulike elementer. OK, så her er hva vi er kommer til å gå inn i neste. Så dette er kanskje ikke den beste stilen fordi, hvis du oppdager vi har HTML og stil på samme side, og vi faktisk ønsker å skille dem, OK? Og faktisk, la meg åpne opp min rette fordi dette er ment å være PDF-filen, så vi har style.css. Så hva kan vi gjøre her er disse er kule ting som noen fade og vi kunne prøve og gjøre det, men jeg føler som jeg ville rote det opp på sparket, så jeg oppfordrer dere til gå prøve det på egen hånd, men jeg kommer ikke til å gjøre det akkurat nå. Så hvis dere, husker, hvis du noen gang truffet problem sett, noe swoops inn fra siden. Det har å gjøre med fade og overgangen og whatnot. PUBLIKUM: Og det er alt CSS og HTML? ALLISON Buchholtz-AU: All CSS og HTML. Yeah. Så du kan gjøre mye av virkelig kule ting med CSS og HTML. Så med vår awesome Bunny nettside her, vi kommer til å gjøre litt litt av CSS styling med det. Så hvis du noen gang har en stil ark, som vi har her, du kan bare ringe style.css. Du kan kalle det hva du vil. Det viktigste er at vi kommer å referere til den på vår web.html her. Så hva vi skal gjøre er we-- så jeg ikke rotet dette opp-- vi kommer til å knytte disse to filer sammen. Så i samme måte-- jeg kommer å trekke en analogi til C her. På samme måte som hvis du noen library-- og vi har cs50.h-- vår kompilatoren knytter det. Dette er bare en eksplisitt linken på vår side. Så på samme måte som vi gjør hash inkluderer noen fil, hva Jeg er i ferd med å skrive er bare HTML / CSS tilsvarer det. Vi er bare å si: OK, denne nettsiden kommer til å bruke dette stilarket, OK? Så vi har link rel lik stilark. Og så har vi type, css. Og så href verdige. OK. Så alt dette gjorde her er at du kan tenke på dette som det samme som en hash inkludere. Tydeligvis det ser litt mer komplisert, men i alle tilfeller det er effektivt det samme. Så dette er bare noen kobling av en style sheet, det er av typen text / css, og navnet på den er style.css. Hva er viktig å vite er at nettsiden at jeg jobber riktig now-- web.html og style.css-- er i samme mappe. Fordi i forskjellige mapper, du trenger for å gi selve roten til det eller stien til den. Men i dette tilfellet, vi holde den super enkelt og det kommer til å være her. Så hvis vi gjør det, jeg har noen ting allerede i kø her. Så vi har noen kropp, som kommer å ha vår bakgrunnsfarge, noe som akkurat nå er lys blå. Vi kan endre det hvis vi vil, men hvis jeg husker dette riktig, det skal bare endre det til lys blå. Og nå har vi en lys blå bakgrunn. Og vi hadde her-- kan noen huske hvilken som er hash-ID eller klasse? PUBLIKUM: ID. ALLISON Buchholtz-AU: ID. Cool. Så det vi ønsker å gjøre er hvilke av disse skriftene eller which-- ønsker vi "Se på den søte kaninen "for å være lilla? Jeg tror vi vil at dette skal være lilla. Jeg er ganske ned med at det å være lilla. Så det du gjør er at du gjør ID equals-- i dette tilfellet Jeg sa hva, pen farge her. Vi lesse. Plutselig er det lilla. OK, så med ID, må du huske det må være unikt, så jeg skal aldri være å bruke Dette ID noe annet sted. Men med klassen, som vi har her med en pen font, Jeg burde være i stand til å bruke som hvor som helst jeg vil. Så la oss gjøre dette her. Så vi kan si at klassen er lik pen font. Og hvis vi ser nå, har vi denne kule pen font her. Så kanskje jeg ønsker å gjøre begge deler. OK, jeg faktisk ikke vet om dette er kommer til å fungere, men jeg ønsker å prøve det. Og dette er hvordan du lærer CSS og HTML. Du er som, du vet hva, ønsker jeg å prøve dette. Jeg er ikke sikker på om det kommer til å fungere. La oss se om det fungerer. Og se på det. Nå er det i lilla og det er en pen font. OK, så du har alle disse forskjellige ting du kan gjøre. Har du spørsmål? PUBLIKUM: Yeah. Vel, akkurat som fargene du bruker er ord. Er det en måte å gjøre farger med den heksadesimale RGB? ALLISON Buchholtz-AU: Du kan også gjør det med heksadesimal, tror jeg. Yeah. Men det er litt fint om du ønsker ikke å slå dem opp. Du kan bare være som, lilla eller blått. PUBLIKUM: La oss håpe de vet hva det betyr. ALLISON Buchholtz-AU: Høyre. Så la oss gjøre dette lese- eller chartreuse. Hvorfor ville du noen gang velger chartreuse? Det er en interessant farge. OK, så åpenbart vi kan se vi kan forandre ting, men vi ønsker. Hvis du ønsket å create-- la oss si Vi ønsket å skape en annen klasse. Hva kan dere ønsker å endre? Hvis du trekker opp W3Schools ' CSS dokumentasjon, Jeg forlater gulvet til dere. Vi kan prøve og gjøre noe kult med dette i de siste par minuttene. Fordi jeg har på en måte gitt deg en lynkurs på mange kule ting at du kan gjøre. Men til slutt, som jeg sa, hvis du bare eksperimentere, vil du lære mye. PUBLIKUM: Visste du ser opp denne skriften? ALLISON Buchholtz-AU: Yeah, Jeg så opp denne skriften. Så som bokstavelig talt, jeg gikk to-- hva gjorde jeg? Jeg gjorde CSS skriftliste, og da jeg gjorde font stabelen, og da jeg var som, ser, her er alle de kule fonter du kan gjøre. Og det var denne ene, så Jeg kopierte den til min utklippstavlen. Og da jeg var liksom: OK, kult, det vi går. Alt gjort. PUBLIKUM: Så du trenger for å være sikker at CSS vet hva som skriften er. ALLISON Buchholtz-AU: Ja. PUBLIKUM: Hva er det sier på slutten? Kursiv? ALLISON Buchholtz-AU: Cursive. Yeah. PUBLIKUM: Bakgrunnsbilde. ALLISON Buchholtz-AU: Bakgrunnsbilde. OK. Så du vil fortelle meg hvordan du gjør dette. Jeg overlater dette til deg. Jeg er bare å skrive opp her nå. Hjulet er i dine hender. PUBLIKUM: OK ALLISON Buchholtz-AU: OK. Hva gjør jeg? PUBLIKUM: Doing-- Jeg vet hva kommer etter krøllete brace. ALLISON Buchholtz-AU: OK. Så sannsynligvis i kroppen, jeg vil anta, fordi vi er gjør med bakgrunnsbildet. PUBLIKUM: Ja, la oss gjøre det. ALLISON Buchholtz-AU: OK. PUBLIKUM: OK, så bakgrunnen kolon, og da er vi trenger en URL-adressen til det bildet. Kanskje pseudo-kode som for nå, kanskje. ALLISON Buchholtz-AU: Hva ønsker du meg to-- PUBLIKUM: Jeg tenker som en GIF. ALLISON Buchholtz-AU: En GIF? Det kommer til å bli interessant. OK, hva er det jeg googling her? PUBLIKUM: Nei, det er ditt valg. ALLISON Buchholtz-AU: Hvorfor ikke we-- om det er en kanin, Jeg føler at vi bør ha en fin gresskledd plen eller noe. PUBLIKUM: Meadow. En eng. ALLISON Buchholtz-AU: En eng? OK. PUBLIKUM: Eller Rachel Maddow. ALLISON Buchholtz-AU: Dette ser pen. Å, det er liten, skjønt. Vi trenger en god størrelse. La oss se. Oh, se. Det er en ganske eng. Vet du hva, jeg liker denne. La oss kopiere denne. PUBLIKUM: OK, så jeg tror det er URL, åpne parenteser. ALLISON Buchholtz-AU: OK, URL. PUBLIKUM: Da adresse. ALLISON Buchholtz-AU: OK. Er det alt vi trenger? PUBLIKUM: Lukk parentes semikolon, og deretter mellomrom, bakgrunn bindestrek vedlegg kolon fast, og krøllete brace. ALLISON Buchholtz-AU: OK. La oss se om det fungerer. Det kommer til å være ganske kult hvis den gjør det. Jeg er fast spent akkurat her. Det fungerte ikke. Jeg lurer på hvorfor. PUBLIKUM: Kanskje URL må være i anførselstegn. ALLISON Buchholtz-AU: Kanskje. Og dette er hvordan vi lærer, folkens. PUBLIKUM: Kan vi ha bakgrunn farge og bakgrunnsbilde? PUBLIKUM: Nei. En erstatter den andre. ALLISON Buchholtz-AU: Jeg vet ikke. La oss se. La oss sjekke det ut og se. PUBLIKUM: Oh, kanskje, ja. [Interposing VOICES] ALLISON Buchholtz-AU: OK, dette er obviously-- jeg [uhørbart] her. Så OK. PUBLIKUM: Bakgrunn vedlegg. ALLISON Buchholtz-AU: Ah. PUBLIKUM: OK, jeg vet ikke. ALLISON Buchholtz-AU: Det ser ut som det skal fungere. Er du sikker på at det er kolon etter URL? PUBLIKUM: Nei, det er semikolon. ALLISON Buchholtz-AU: Det er semikolon. PUBLIKUM: Sa jeg kolon? ALLISON Buchholtz-AU: Du sa et kolon. PUBLIKUM: Å nei. ALLISON Buchholtz-AU: Det du går. PUBLIKUM: Oh, vent, nå vi ikke kan lese teksten. ALLISON Buchholtz-AU: Nå kan du ikke lese teksten, men vi har bakgrunnsbildet. Mmhmm? PUBLIKUM: Har HTML støtter dynamisk innhold? Liker, kan du endre størrelsen på det bildet avhengig av størrelsen på vinduet eller er at en CSS-- ALLISON Buchholtz-AU: Så CSS har til å gjøre det. Så hvis dere er interessert i å lære avansert CSS, Jeg er co-undervisning en seminar om CSS på syvende. Og jeg lover at det vil være mye mer i dybden og gjøre mye mer kult ting i denne delen. Og min co-læreren er som total front end web dev mester. Så det vil være ganske kult hvis du vil å lære om alle de kule tingene at CSS kan gjøre. Men det vi har her med hans bakgrunn vedlegg fixed-- så det er noen fast size-- men du kan faktisk dynamically-- hvis du noen gang se web sider, som de fleste gode nettsider vil gjøre, når du justerer Størrelsen på browseren din, det justerer bakgrunnen eller hvor mye viser eller formaterer ting, ikke sant? Så det er det vi kaller relativ posisjonering. Og CSS kan faktisk ta tak hvor stor din Nettleseren bredde er eller hvor høy den er, og du kan plassere ting i henhold til de relative størrelsene versus absolutte størrelser. Og det er selvsagt mer avansert CSS, men det er noe du kan gjøre. Hvis du ønsker å lære mer, komme til mitt seminar. Så det er noe du kan gjøre. Og CSS kan faktisk do-- CSS og Javascript, som vi får inn i neste week-- kan tillate deg å dynamisk endre sidene uten å måtte legg dem hele tiden. Og du kommer til å gjøre noen ganske kul ting. Så er det en annen ting som dere kanskje ønsker å gjøre eller noe du ønsker å utforske? Vi har 10 minutter igjen. Vi kan også dra tidlig, men hvis du ønsker å gjøre noe mer web ting, vi kan, men jeg er ikke kommer til å tvinge deg til. Men vi kan også bare spise godteri. PUBLIKUM: Marker teksten hvit, slik at du kan lese den. ALLISON Buchholtz-AU: OK. Så i dette tilfellet ønsker vi noen p. PUBLIKUM: Bør vi gjøre det i kroppen slik det gjelder for hele siden? ALLISON Buchholtz-AU: Ja, det kan vi faktisk. Det er en god idé. Så vi have-- gjør du vet hva vi bør være? Jeg vet ikke om vi kan gjøre tekstfarge. Jeg hadde tenkt å prøve og opprette en annen klasse her. PUBLIKUM: Hvordan får du så at den har forslag? ALLISON Buchholtz-AU: So hvis dere er interessert, dette er en annen tekst redaktør heter Sublime. Du bør være i stand til å installere det på maskinen din. Noen ganger blir det litt vanskelig. Hvis du vil hjelpe med det, Jeg er super glad for å hjelpe deg med det, fordi gedit er stor og det er kjempebra fordi du kan kompilere den på bunnen, men jeg virkelig som Sublime fordi det er ganske og det gjør ting som auto-komplett. Så du kan definitivt gjerne Gi meg beskjed hvis du ønsker å gjøre det. Hvis du bare google "Sublime tekst, "det typisk har instruksjoner om hvordan du installerer på ulike operativsystemer. Det er virkelig kult, jeg tror, ​​etter min mening. Så s. Jeg tror jeg kan bare gjøre text-- eller Vi kan bare gjøre fargen er "hvit." There. Så det jeg gjorde her, er at jeg endret ikke all teksten. Men p her er bare en tag som vi har, ikke sant? Denne paragrafen tag. Så jeg bare laget en CSS element som sa OK, noe med denne taggen p, gjøre fargen hvit. Så hvis du lagt merke til, det gjorde denne hvite og denne hvite. Det gjorde ikke vår liste hvit fordi det er ikke forbundet med det. Du kan gå gjennom, og du kan say-- PUBLIKUM: Gjør bakgrunnsfarge. ALLISON Buchholtz-AU: Bakgrunnsfarge? PUBLIKUM: Bakgrunn for rør i farge der du setter p tag. ALLISON Buchholtz-AU: OK. Du vil ha det hvitt? PUBLIKUM: Mmhmm. ALLISON Buchholtz-AU: OK. Der du går. PUBLIKUM: Det er rart. ALLISON Buchholtz-AU: Ganske kul, ikke sant? Så hvis du bare rotet rundt, du kommer til å lære mye. Og det kan være ganske kult. Jeg tror det er definitivt mer gledelig enn noen ganger fordi du ikke trenger å vente for programmet å kompilere. Du kan bare trykke Refresh og du liker, oh, ser, det fungerte, eller oh, jeg er sannsynligvis mangler noe. Og det er noe som er virkelig kult om dette neste del av klassen, er det definitivt, jeg tror, ​​lettere å kontrollere som du går langs veien mot å måtte skrive disse lange programmer og ønske og bønn at det fungerer på slutten. Så med det, tror jeg dere alle synes godt. Hvis du har noen spørsmål, som alltid, komme å snakke med meg, kom gi meg beskjed. Jeg vil være rett utenfor for de neste 15 minuttene hvis du ønsker å prate om alt og ingenting. Så jeg håper du guys-- lykke til med denne PSet. Fristen er fredag ​​midt på dagen fordi det ble utgitt sent. Så jeg vil nok bli seende mye av dere på torsdag, men forhåpentligvis ikke. Kanskje du vil ha det gjort da. Jeg ville være super stolt. Men hvis ikke, vil jeg se deg torsdag. Du kan også bruke et sent tidspunkt, noe som strekker det til lørdag midt på dagen. Men jeg don't-- huh? PUBLIKUM: Halloween. ALLISON Buchholtz-AU: Det er Halloween, a, og b, Jeg tror ikke det vil være kontortid på fredag. Så virkelig prøver og få det gjort av Fredag ​​slik at vi alle kan feire Hallow helg. Greit, jeg ser dere neste uke.