[MUSIK SPELA]
ALLISON Buchholtz-AU: Okej, alla.
Välkommen tillbaka till avsnitt.
Så vår agenda för i dag går över mycket mer web dev grejer.
Jag vet inte hur många av du har sett dina psets
eftersom den släpptes tidigare i morse.
Jag skulle som hur många människor har läst spec,
men ser hur du har haft alla av, typ, sju timmar för att titta på det
och det är en måndag och du har förmodligen haft klass,
Jag kommer att anta att de flesta av er inte har.
Om du har, extra beröm.
>> Du är i grunden hjälper implementera ett enkelt webb
server i C, vilket är en helt ny pset, så ni får vara marsvinen.
Det kommer att bli en rolig, vild vecka, men jag tror att det ska bli mycket roligt
och det ska vara en riktigt goda erfarenheter faktiskt.
Så för att förbereda dig för att, i tvärsnitt i dag,
vi kommer att gå chmod, TCP / IP, och sedan en liten bit av HTML och CSS.
>> I slutet, vi ska faktiskt kod upp en enkel webbsida tillsammans
för att hjälpa er typ av får mer förtrogna med det.
Och sedan om du inte har plockat upp dina frågesporter, de är framme,
men jag är ganska säker på att alla Här har deras quiz.
Och även på att observera, lösningar är inte upp ännu,
men så snart vi finish-- gillar, senaste människor tar sina quizzes--
de kommer att vara upp.
Om du har några frågor under tiden,
gärna kontakta mig personligen.
Jag kommer att svara med din individuella frågor, som jag alltid gör.
>> Så på att observera, chmod.
Så i princip allt du behöver veta om chmod
är att det används för att ändra filrättigheter, eller hur?
Så det är bara vissa system kallar det en ändra behörigheter, som det står här.
Och om du någonsin vill se vilka rättigheter en fil har,
istället för att bara göra ls, du kunde göra ls -l.
l står för länge.
>> Så du ska göra långa listor av allt, och det
kommer att ge dig mycket mer detaljerad information om alla dina filer.
Och du ser something-- jag är kommer att hoppa framåt för en second--
men du kommer att se något liknande den översta raden där för varje fil.
Och vi kommer att gå igenom vad det innebär.
>> Så i princip, för att ändra dina filrättigheter,
du bara vill använda chmod.
Du kan se det som alla andra UNIX kallar som ls eller cd eller whatnot.
Det är bara typ av annan liknande samtal.
>> Så vi gör chmod och sedan kommer vi har tre siffror typiskt.
Det finns ett par sätt att göra den, av vilka vi ska gå över.
Men oftast har du tre siffror från 0 till 7 varje gång.
>> Så en sak är att det finns tre olika behörigheter
att vi kan ge varje fil.
Och det är läsbar, vilket är representerad av r, vilket är meningsfullt
i lite; w, vilket är skrivbar; och körbara, vilket är x.
Jag vet att det e en, körbar, Kanske inte den mest mening, men vi
representerar det med x.
>> Och vad händer då är var och en av dessa har även antalet representation.
Så vi har en, två och fyra.
Och i princip vad som händer är var och en av dessa tre nummer
Här motsvarar en annan uppsättning användare
att dessa behörigheter avser.
>> Så du kan komma på som första nummer motsvarar den faktiska användaren
eller ägaren av filen, den andra nummer kommer att motsvara gruppen,
och den sista avser till världen, OK?
Så vad som händer är minns de numbers-- r är 4, w är 2,
x är 1, eller hur?
This-- om du summera upp dessa, som ger dig det första numret
att vi kanske input i vårt chmod.
>> Så i detta fall, vad skulle denna siffra vara?
Det skulle vara 4 plus 2 plus 1, vilket är en 7, eller hur?
Och i detta fall, dessa har inte något,
så detta här skulle översätta till chmod 700, OK?
Och vad det gör är det ger allt av dessa behörigheter till ditt användarnamn.
>> Så detta innebär att våra användare kan göra vad de vill.
De kan läsa den här filen.
De kan köra den här filen.
De kan skriva till den här filen.
Men företag som är världs, nej behörigheter som helst, OK?
>> Så ett annat sätt att skriva det, vi kan göra chmod av tre siffror, vilka var och en
motsvarar vad summan, eller att specifik grupp, specifik delmängd.
Eller vi kan göra faktiskt en annan sak.
Håll ut.
Vi kan göra något med dessa här.
>> Hur många av er såg ett exempel där det var att chmod ett plus x?
Såg du det i föreläsning, tror jag?
Så en står för alla.
Det innebär att ge den till alla användare, som jag glömde att lägga här.
>> Men ett plus x, om vi märker här, om vi gör
att chmod-- vilken grupp vi är talar om plus behörighet
Vi vill ge dem.
Så det här kan vara ett plus eller ett minus.
Plus tillägger tillstånd.
Minus tar bort tillstånd.
Ganska intuitivt, tror jag.
>> Så ett plus x betyder chmod.
Så ändra tillstånd för alla människor om detta är en A-- add behörigheter.
Och x-- det betyder vad tillstånd Vi beviljar alla.
Läsa, skriva eller köra?
>> PUBLIK: Utför.
>> ALLISON Buchholtz-AU: Kör.
Så vi ger alla användare behörighet att köra den här filen, OK?
Så vad händer om vi ville göra att med numerisk form?
Så minns med numeriska, vi vill ha tre siffror.
>> PUBLIK: 4.
ALLISON Buchholtz-AU: Vad var det?
PUBLIK: 4.
ALLISON Buchholtz-AU: Not 4.
Publik: 0, 0, 4.
ALLISON Buchholtz-AU: Ja, vi vill ha för att ge den till alla användare, eller hur?
Så vi kommer att ha ett nummer i varje fack.
Det kommer att bli den lika många i varje fack
eftersom vi vill bara ge allas körbara behörigheter.
Så körbar är 1, men på rätt väg.
>> Så om vi gjorde chmod 111 som skulle motsvara chmod ett plus x.
Betyder det vettigt för alla?
Vi kommer att gå igenom ett par exempel.
>> Så den stora takeaway här är en är inte här,
men en betyder bara ge den till alla användare.
u är om du bara vill att ge eller ta bort
ett särskilt tillstånd från användaren eller ägaren.
g är för gruppen, så att mittersta siffran.
Och sedan andra du kan tänka dig som världen, att sista siffran.
>> Så med det, går vi till ett exempel, eftersom jag känner mig som exempel alltid
göra dessa saker lättare att förstå.
Så rwx-- vi gick igenom this-- kan också vara representera som 700.
Det är det exempel vi såg vid mer av bilden.
Så chmod 444 på någon fil skulle ge vad behörigheter?
Du var verkligen nära.
Publik: läsbar för alla.
ALLISON Buchholtz-AU: Läsbar.
Så läsbar för alla, eller hur?
Och vad är ett annat sätt att göra det?
Om vi ​​vill göra chmod med antingen r s eller w-talet, plus och minus,
vad skulle det samtalet se ut?
Det skulle vara chmod vad?
>> PUBLIK: ett plus r.
>> ALLISON Buchholtz-AU: a plus r på 5.
OK, så detta är densamma som denna, bara två olika översättningar
av samma sak.
Så med det, vi har dessa.
Så jag vill att ni ska försöka skriva denna typ av på sitt motsatta sätt.
>> Så med chmod 555, vad skulle det bli?
Skulle det vara ett plus eller u plus eller whatnot?
För u plus x, ge mig de tre siffrorna.
Och sedan berätta för mig om vilka rättigheter vi är faktiskt beviljande och till vem?
>> Så jag ska ge er två minuter för att arbeta med det.
Känn dig fri att prata med varandra.
För er som kom i en liten sen finns det godis och skjortor.
Vi har tre skjortor kvar, och Vi har Kit Kats och Starbursts.
Så tveka inte att komma grab en del i detta lilla mellanspel.
>> Dessutom är den sista knepigt.
Det är två chmods för den sista.
Egentligen vill jag stänga dörren medan ni arbetar med detta.
Godis är alltid nödvändigt på en måndag eftermiddag.
>> OK, så chmod 555.
Vad är ett annat sätt vi kan skriva det?
Några idéer?
Ja.
>> Publik: ett plus rx.
>> ALLISON Buchholtz-AU: r plus rx.
Vill du förklara varför det skulle vara rx?
>> PUBLIK: Eftersom du har 5, så det är 4 plus 1,
så det är läst plus körbara, och det är för alla.
ALLISON Buchholtz-AU: Rätt.
Så bara för att upprepa, 5 här vi vet som summan av 4 och 1,
eftersom varje nummer i vår trio är summan av behörigheterna för den undergrupp,
rätt?
Antingen användaren, grupp, eller i världen.
Så i detta fall, vet vi att 5 måste vara bildad av fyra och en.
>> Och 4 och 1 motsvarar läsbar och körbar.
Vi ger den till alla, så att vi kan göra chmod ett plus rx.
Och självklart, vi gick bara igenom frågorna där,
så nu den här filen är körbar och läsbara för alla.
>> Så hur är det med andra?
Vad kan det numret för att en vara?
Några idéer?
Varsågod.
>> PUBLIK: 100 [OHÖRBAR].
>> ALLISON Buchholtz-AU: 100.
Exakt.
Så vill du förklara varför 100?
PUBLIK: För att det är för användaren, så det är i första position.
Och sedan x körbar är 1.
ALLISON Buchholtz-AU: Exakt.
Så vi beviljar körbar behörigheter till bara för användaren.
Så i detta fall, skulle det vara 100.
Och jag har alla svar upp på nästa bild i fallet
du skriver massor av saker ner.
>> OK, så detta nästa som faktiskt görs med två chmods, kan du göra det.
Så är det någon som har någon aning om hur du kanske
få chmod 640 omskriven på annat sätt?
Du kan ändra användaren först och sedan Du kan ändra gruppens är mitt tips.
>> Så om vi bara ändra användaren, vilket är det första en här,
vad som kan vår uppmaning att vara?
Så användaren är u, eller hur?
Så chmod u plus vad?
Mmhmm?
>> PUBLIK: rw.
ALLISON Buchholtz-AU: rw.
Rätt, för att läsa och skriva, eftersom läsning är 4, w är 2, de belopp tillsammans som 6.
Så vi får chmod u plus rw, och vi får vår första 6 där.
>> Så då för att få 4, nu vill vi att ändra våra gruppinställningar.
Så vi ska göra chmod g plus vad?
Vad är en 4?
>> PUBLIK: r.
ALLISON Buchholtz-AU: r.
Just.
Så vi ger ägaren läsa och skriva behörigheter
och vi ger grupp lästa behörigheter, som vi alla har här uppe.
Mmhmm?
>> PUBLIK: Om du kan skriva något, Det innebär inte att du kan köra den?
>> ALLISON Buchholtz-AU: Du kan skriva till something--
Jag tror inte att det innebär att du kan köra den.
Cool.
Så det är allt som vi bara gick igenom.
Så på detta nästa, det är bara typ av gemensamma ärenden
som du vill ha i tänka på ditt problem inställd.
Dessa är oftast de behörigheter att vi vill att du använder.
>> Så för 711, som ger oss, naturligtvis, användar
alla tillstånd, som tenderar att vara meningsfullt.
Och då är det köras av den grupp i världen, vilket är vettigt
om du har någon katalog, du vill kunna passera in i den.
Människor behöver tillgång.
>> För alla icke-PHP-fil, du kommer att använda 644, vilket skulle göra det?
Vad betyder det innebär, eller vad behörigheter ger detta?
Så ägaren kan vad?
PUBLIK: Läs och skriv.
ALLISON Buchholtz-AU: Läs och skriv.
Och sedan grupp och andra kan bara läsa, eller hur?
Och sedan chmod 600 för någon PHP-filer som du använder,
din ägare, återigen, kan läsa och skriva till den
men alla andra är bara typ av avstängd.
>> Så detta kommer faktiskt vara mer användbart när
du får på ditt problem inställd nästa vecka där
du faktiskt bygga en hemsida.
Så om du någonsin stöter på några konstiga problem
där det inte laddar ordentligt, kanske du
behöver lägga till en körbar tillstånd, eller kanske du behöver en read
eller skrivbehörighet.
Lite saker som tenderar att resa människor upp, men det är ungefär som att gå till
när du startar nästa veckas pset.
Och jag skulle ge dig mer tips om denna veckas pset,
men jag har ännu inte titta på det eftersom det släpptes i morse.
Men du maila mig, jag kommer att ha sett på det när jag svarar i morgon.
>> Så nu är alla bra med chmod?
Eventuella kvardröjande frågor?
Ganska enkelt.
Bara typ att hålla reda på vad läsa, skriva och köra siffror är
är förmodligen den svåraste delen.
>> Så med TCP / IP, alla dessa protokoll, ungefär som med dina datastrukturer
förra veckan, det är mycket mer viktigt att typen av få
en högre intuition av dem nivå.
Detta är inte CS143 vart vi ska be dig att genomföra ett nätverk,
så du ska vara bra om du inte förstår
Nitty Gritty av samtliga protokoll.
Vad som är viktigt att förstå är ungefär som vad de representerar
och varför de är viktiga.
>> Så TCP / IP, naturligtvis, är det Transmission Control Protocol
eller Internet Protocol, som är i princip bara en uppsättning lagar i grunden
eller normer som berättar uppgifter hur det ska hanteras,
hur den ska paketeras, överförs och tas emot.
Så det i grund och botten, precis som det säger här, ökar chanserna
att data blir då du vill att det ska komma till.
>> Jag är säker på om ni gick till föreläsning eller sett det på nätet,
Han has-- Jag vet inte Om han gjorde det i år,
men jag vet att förra året hade han en demo där han hade en bild av Rob
och han dela upp den i fyra och lägga den i kuvert
och försökte få den över Sanders.
Och du kan typ av tänker på det på det sättet.
Det är bara en uppsättning regler som berätta uppgifter hur man får någonstans
och låter dig veta om du saknar uppgifter,
på samma sätt som om du är ta flera sidor av sedlar
och du märka dem med sidan 104, sidan 204, och du går tillbaka för att studera senare
och du saknar something-- du kan inte hitta sidan 304-- du vet
något som är fel, så du kan titta igenom dina anteckningar
igen eller be någon att skicka dig föreläsningsanteckningar från den dagen.
På samma sätt som med uppgifter på internet.
Om jag ber om något från någon server
och den behöver för att skicka den i flera paket,
förmodligen kommer att nummer det på något sätt, låt
mig veta hur många jag skulle ha fått, och säg mig, åh, detta är en av 10
eller detta är en av 10.000.
På det sättet när jag går att återmontera alla bitar tillsammans,
Jag vet inte om något saknas och jag kan be om det igen.
Är det vettigt?
Bara en uppsättning regler.
Vid sin grund, uppsättning av regler, OK?
>> Så vi pratade också en lite om portar.
Detta är egentligen bara en standard som gör att du vet vilken typ av data
överförs i dessa paket.
Om vi ​​går med vår kuvert exempel gör vi inte
vet att det är en bild av Rob in där om vi inte skriver det
på utsidan av vår kuvertet.
Så hamnar är i princip samma sak.
Det är bara ett sätt att räkna ut vad typ av data överförs.
>> Så vi har alla de vanligaste här.
Så 21-- dessa är också snäll av som bra saker att veta.
Det är typ av en enkel frågesport fråga.
Var som, vad gör port 80 göra?
Eller, vad gör port 443 gör?
Så bra saker att veta.
>> Så vi har här, 21 är fil överföringsprotokoll, så bara
de regler som styr filöverföring.
25, något som vi alla använda alldeles för mycket, är e-post.
53 är domännamnet system, som är i grund och botten
bara typ av en uppslagning för IP-adressen för ett domännamn.
>> Så jag är ganska säker på att det var nämns i föreläsning, om du
gå till något liknande google.com, den har en IP-adress
som är förknippade med den.
Det är faktiskt inte google.com.
Och så 53 är porten som faktiskt tar
vård av typ att översätta det till den IP-adressen för dig.
Och sedan 80 och 443 är mycket vanliga.
Antingen har din webbsida eller du har din säkra webbsida,
som många webbsidor är överföra över till nu.
>> Så det är ganska hög nivå översikt av överföringsprotokoll.
Jag ser inte mycket mer på djupet.
Det är typ av coola grejer om du är intresserad.
Det finns gott om resurser.
Wikipedia faktiskt är en ganska bra sida.
Så jag ser på det bara en liten stund sedan,
så jag rekommenderar starkt titta på det om du är intresserad
eller ta 143 på två år, därför att Jag tycker det är vartannat år.
>> Så på slutet av detta, vi är talar om webbsidor och HTTP,
som faktiskt är vår nästa ämne för idag innan vi går in i HTML och CSS
och du kan faktiskt koda upp en webbsida.
Det ska bli kul.
Vi kommer att ha bilder på kaniner och det ska vara bra.
>> Så HTTP, som ni kan se här, är en av de vackra akronymer
för denna vecka, vilket är Hypertext Transfer Protocol.
Så återigen, det är bara en annan uppsättning regler som
styr hyper överlåta, i det här fallet.
Så bästa sättet att lära om det här är bara typ av
att dela upp det i dessa enskilda ord
eftersom det finns en hel del ord på skärmen finns.
>> Så vi kommer att börja med hypertext.
Så "hyper", du kan tänka dig "Ovan", som super-typ sak.
Så det är egentligen bara text tas till nästa nivå, så det är som super text,
som nästa text.
Så det är i princip bara text som ger oss
mer information än vanlig text gör, OK?
>> Så i detta fall, är detta hyper.
Detta säger oss att vi har någon länk som vi ska,
vilket är cs50.net, som är nu cs50.harvard.edu.
Dessa bilder är lite gamla.
Och det kommer att visa det som detta, som en hyperlänk,
och sedan en riktigt cool hemsida.
>> Så det är text, som är lite lite av riktigt coola saker där.
Så du kan länka saker och du kan infoga bilder och du kan styla saker.
Och den mest kända är att du killar har troligen med hyper
är Hypertext Markup Language, HTML, vilket naturligtvis är alla av banan
som vi ser omkring oss, beviljade med viss CSS-format kastas.
>> Men om någon var riktigt stora med MySpace,
Jag är säker på att ni alla begagnade HTML hela tiden för att skapa
de perfekta profiler, eller hur?
Jag känner mig som det kan vara en föråldrad hänvisning nu, men vad som helst.
Bara en little-- ni är inte så mycket yngre.
En del av er är äldre än mig.
MySpace var fortfarande en sak när jag var ung.
Jag är inte så gammal.
>> Iaf, HTML bara en form av hypertext.
Så hyper är bara text med nya funktioner.
Så överföringsprotokoll är förmodligen desto mer osäkert sak att förklara.
Uppenbarligen transfer-- bara föra över data.
Så antingen mellan kunden, som webb bror, och en server.
Så i princip bara hur internet fungerar.
>> Så den exakta begäran av hur dessa fungerar, vi är
faktiskt kommer att titta på en exempel begäran och svar.
Men hur vi begär information från en server
och hur servern svarar på oss är vad denna överföringsprotokoll styr.
Så begäran och svaret har att följa dessa särskilda regler.
Det är standardiserat så att oavsett där du med hjälp av internet,
det alltid fungerar på samma, OK?
>> Återigen, protokoll, uppsättning regler.
Det är bara en normal interaktion på samma sätt
att professor Malan talar om om någon sträcker sin hand,
du vet att det är vanligt artighet till nå din ut och skaka deras hand.
Det är ett protokoll, eller hur?
>> Så jag ger viss standardiserad begäran som jag vill skaka din hand,
och du ger några standardiserade respons, som är antingen ingen tack
eller du kan försöka skaka min hand eller kanske du ska försöka
och fist bump mig.
Och vi har inte ett protokoll för detta.
Det bryts ned.
Men om alla följer den samma protokoll, naturligtvis,
det går mycket smidigt.
Folk lär känna varandra.
Alla är glada.
>> Så i världen av webben, alla följer samma rules--
något bättre än sociala normer.
Men med det kommer vi att titta på ett exempel förfrågan här.
Så det finns denna lilla skriva här på botten
som berättar de olika färgerna, vad de ska betyda.
>> Så vitt är precis som din metod begäran och protokoll version--
så metoden begäran version.
Och då är en del fältnamn och värdet
av detta område, vilket vi kommer att gå in på mycket, mycket snart.
Så detta är ett exempel begäran.
Detta är som jag sträcker ut, vill presentera mig.
>> Detta är vad klienten eller vad din webbläsare
skulle skicka till din server.
Så detta är en begäran få, så det är ber om något från servern.
Och det är, förstås, HTTP och det är version 1.1.
>> Så resten av denna här är vad vi kallar sidhuvud, och dess extra information
som ger oss en bättre uppfattning om vad vi egentligen ber om,
eller information som vi vill ge servern som kan vara relevant.
Så User-Agent ger lite mer Beskrivning on-- till exempel, här,
curl / 7.24.0 faktiskt kommer att berätta den server som vi använder Google
Krom som vår webbläsare.
Så om du någonsin hör om människor som pratar
om att göra en app som svarar till flera webbläsare,
Detta är något som de skulle använda för om du
vet inte vilken webbläsare begäran kommer ifrån,
du kan inte skräddarsy data till det.
Så i detta fall, användaren bara ge denna typ
av identifieringsinformation om vilken webbläsare
ditt användarnamn använder för närvarande, OK?
>> Så då har vi också värd, vilket är där vi faktiskt vilja gå till.
I det här fallet vill vi gå till apple.com, köpa några häftiga nya iPads
eller något, kanske söt ljus på våra sovsalar.
Och namnet värde i slutet är bara fyllmedel, bara en allmän sak
för er att se.
Det gör faktiskt inte motsvarar något här.
>> Så du kan ha så mycket eller så lite som du vill i varje fall.
Större delen av tiden, dessa är valfria.
Det beror bara på vad du behöver från webbläsaren,
från användaren för att riktigt ge begäran.
Eller det beror på vad ditt användarnamn egentligen vill ge upp till servern.
Så du kan ha många, många av dessa rubrikfältnamn
eller du kanske bara har ett par.
Som med så många saker Jag har sagt i detta avsnitt,
det verkligen beror på sammanhanget om hur du använder detta.
>> Det gör som är vettigt för alla?
Detta är bara ett exempel på en förfrågan, rubriker, allt.
OK, så med det, vi har några svar.
>> Återigen har vi vår statuskod, protokoll version, och sedan fältnamn och fält
värderar som alltid.
Så vår protokollversion och vår statuskoden är 200.
OK, vilket innebär att, ja, allt gick bra.
Här är vad du vill.
>> Den typen server, innehållet type-- det säger oss, OK, du är
kommer att få någon text HTML.
Här är längden på det och här är vad du ska göra med anslutningen.
OK, så igen, beroende på data du är
ber om, beroende på vad server vill återvända till dig,
Du kan ha flera av dessa fält namn, kanske du har mindre.
Helt kontextberoende.
>> Och så långt som denna status koden här, naturligtvis,
200 är inte den enda en du kan ha, eller hur?
Vi har massor av statuskoder.
Finns det någon som minns något av andra som vi nämnde i föreläsningen?
Många av dem börjar med 4.
>> PUBLIK: 404.
>> ALLISON Buchholtz-AU: 404, vilket är?
>> PUBLIK: Filen hittades inte?
>> ALLISON Buchholtz-AU: Filen hittades inte.
Exakt.
Så hur är 403?
PUBLIK: Förbjudet.
ALLISON Buchholtz-AU: Förbjudet.
Så vad tror du det betyder med chmods?
>> PUBLIK: Det betyder att du har inte behörighet att läsa den.
>> ALLISON Buchholtz-AU: Exakt.
På något sätt, har du inte behörighet att komma åt det, eller hur?
Så 404, 403.
Det är en riktigt rolig en som vi alltid
introducerar varje år som Jag borde ha lagt upp här,
som 413, vilket är jag är en tekanna.
Du kan google det.
Det är lustigt ut, det är kod 413 och det är jag är en tekanna.
Vilket jag vet inte varför du skulle någonsin behöver det på internet,
men jag avvika.
PUBLIK: Kanske är du en tekanna.
ALLISON Buchholtz-AU: Kanske servern är en tekanna.
Vem vet?
Okej, så vi är på väg att övergången till verkliga kodning.
Det känns som att ni kommer att härifrån ganska snabbt.
>> PUBLIK: Varför gör det säger "server: två gånger?
>> ALLISON Buchholtz-AU: Hm?
Server två gånger?
Det är en bra fråga.
Jag är inte säker.
Jag ska ta reda på och Jag kommer att maila alla.
>> OK, några andra frågor förutom det?
Bra?
Cool.
>> HTML och CSS, och nu har vi få till alla de roliga delarna.
Så som jag nämnde tidigare, HTML är förmodligen en av de saker
ni är mest bekant med.
Så vi har Hypertext Markup Language.
>> Det bästa sättet att lära sig this-- jag inte har några förberedda diabilder eller något
för er med HTML.
Det handlar egentligen om att lära sig syntaxen.
Och om du var i MySpace dag, skulle du ha denna ner.
>> Så egentligen är det största bara för att öva och experimentera.
En av de stora resurser som jag skulle starkt med är W3Schools.
Så bara W, 3, och sedan skolor.
De har en hel del resurser på HTML, på CSS,
och de faktiskt har en delad skärm sånt
där de ska ge dig exempelkod.
Du kan leka med den, ändra det, och trycker Update,
och det kommer visa dig vad det egentligen gör på webbsidan.
>> Så jag rekommenderar starkt med det.
Det är ganska coolt.
Du kommer inte få seg fel här när saker går fel.
Om du lyckas få en seg fel med HTML,
låt mig veta eftersom jag är kommer att bli verkligt förbryllad.
Men det är riktigt coolt eftersom Du kan ändra saker,
Du kan se dem uppdateras live.
Och jag tror att du kommer att få en mycket mer intuitiv grepp om HTML
om du faktiskt bara spendera lite tid att experimentera med det.
Så det är därför jag sa, praktik och experiment.
>> Google, från och med nu ut, förmodligen kommer att vara
en av dina bästa resurser och vänner.
Eller Bing-- Jag arbetar på Microsoft, så kanske jag borde säga Bing.
Men i stort sett allt kommer bara att bli syntax,
så förstå vad taggarna är, understanding-- åtminstone med CSS--
hur man ändrar vissa egenskaper.
Det kommer att bli super bra.
>> Så även om vi inte har några förberedda saker,
Vi har typ av några tips att vi vill att ni ska försöka följa
by-- eller snarare, bör du följa tills vidare.
Så stänga alla dina taggar.
Förhoppningsvis alla has-- vet du vad, Om detta inte är vettigt just nu,
Jag lovar att det är meningsfullt när vi koda upp på sidan.
Men stänga alla dina taggar.
Så om du någonsin har några sidhuvud som är fäste,
H1, fäste, se till att när du är klar med det,
du stänger den rubriken.
Bekräfta din sida med W3 Validator.
Om du inte stänger dina taggar, kan du få oväntade resultat.
Det kommer att säga att din sida är ogiltig om du kör det genom denna validator.
Så när i doubt-- och speciellt På veckans och nästa veckas
pset-- på samma sätt som vi ber du kan använda kontrollera 50 och stil 50,
du kan tänka på detta som en av dina checkar, OK?
>> Så om det inte passerar W3 Validator.
Det är något vi kommer att docka dig på.
Eller jag säger rätt nu, jag kommer att docka dig på.
Så se till att den validerar.
Det är inte svårt.
Du klistrar bara in din kod och det kommer antingen att säga bra jobb
eller du saknar något på samma sätt
den stilen 50 berättar där du stöka.
>> Och så en sista sak är du vill dela
din markup, vilket är allt som HTML eller din text, och din styling.
Så vi ska göra ett exempel av denna rätt efter detta.
Så HTML och CSS ska vara åtskilda.
Och vi kommer att tala om MVC, vilket är Model View Controller
nästa vecka.
Ni bör nog lära sig om det i föreläsning
i morgon om du hade redan lärt det i dag.
>> Och det är bara typ av ett paradigm som vi tenderar
att använda när du skapar webb sidor för att separera ut saker.
Du kan tänka på det på samma sätt att vi tenderar att separata funktioner i C
där vi hash att hitta saker.
Det är bara ett sätt att göra ditt liv enklare.
Den skiljer sig attribut eller kod som du skulle använda om och om igen,
men på detta sätt, det slag av håller det trevligt och snyggt.
Och om du vill ändra en sak, ändrar du det en gång
och det har förändrats överallt annars.
Så det är mer för din lätthet och flexibilitet.
>> Så med CSS, det är mycket likt till HTML, men i stället för taggar
som jag nämnde nyss, vi använda vad som kallas väljare.
Och de i princip bara snäll av associera en viss tagg
i HTML med olika attribut.
Och när jag säger attribut, menar jag saker som teckenfärg, teckenstil,
färgen på bakgrunden, färgen på din text.
De möjliga saker.
Som om det är centrerat, om det av till höger,
om det är inverted-- allt av dessa coola saker.
Eventuella stilistiska saker att du gör med din text,
Detta är vad jag menar med attribut.
>> Och sedan två saker att veta är att selectors-- två av huvud factors--
är ID, vilket är unikt.
Du kan bara använda det för en sak.
Annars kommer det att skrika på dig.
Och när vi definierar det i en CSS-fil, kommer det
vara hash-ID och sedan vilka attribut vi vill ha.
Jag lovar att vi kommer att gå igenom ett exempel.
Det kommer att göra mycket mer känsla.
>> Klass kan hänvisa till flera block.
Så du kan ha din första och tredje stycket
ha samma typ av attribut om så du associerar dem med samma klass.
Och när vi definierar dem i CSS, gör vi en punktklass,
med klass är vad du vill att den ska namnges.
>> Så jag vet att det är rätt nu mycket abstrakt.
Det är därför vi ska koden.
Jag vet att ni älskar det, och ni alla är
kommer att hjälpa mig eftersom det här är din webbsida.
Det här är vår sektionens hemsida, grabbar.
Så finns det några frågor innan jag stänga av PowerPoint, eller något
du vill att jag ska rulla tillbaka till innan vi börjar kodning?
>> PUBLIK: När du säger match taggar, menar du väljare eller taggar?
ALLISON Buchholtz-AU: Du kan tänka på dem som samma sak.
Det är bara olika ord.
Jag menar, som väljare.
Men väljare även karta till taggar.
Så du kan tänka på dem som effektivt samma sak.
Jag lovar att det kommer att göra mer meningsfullt när vi koda.
Allt från PowerPoint eller frågor
just nu innan vi faktiskt skapa vår sektionens sida?
Alla redo?
Cool.
>> Så jag har en igång.
Låt mig öka tecken för er.
OK, så just nu har vi bara en nakna ben webbsida här.
>> Vi har lite HTML.
Vi har några header, som vi se här som exempel webbsida.
Någon titel, vissa typsnitt.
Dessa är taggar, OK?
Så när jag menar stänga dina taggar, vi ser här i fästet huvudet är din öppning
tag, och detta fäste / Head stänger det, OK?
>> Så du kan se det som dina hängslen i din förekommande villkor
eller din för loopar.
Om du har en i början, du vill ha en i slutet.
Det kommer fortfarande att fungera för det mesta Om du inte har en sluten tagg,
men bästa praxis är nära dina taggar.
>> Så i detta fall, låt oss ändra på detta.
Vi kommer att ha avsnitt sju.
"Avsnitt webbsida."
Så jag ska bara ändra på detta.
>> Och om vi går hit och vi reload-- mĺste spara och reload--
Vi märker att här uppe det förändrats, eller hur?
Cool.
Så detta ändrar titeln.
Det här är det som finns på din flik.
>> Så det här är en typ av ser typ av tråkiga.
Jag vet inte om killarna.
Jag tror att vi vill ha något annat här.
>> Så vad vi kan göra är att header är bara där.
Låt oss göra någon form av kroppen.
Så vi har lite kropp här.
Jag gör alltid öppen och sluter taggar för att starta,
på samma sätt som jag gör tandställning.
Ah.
Vänta, vad?
>> PUBLIK: [OHÖRBAR].
ALLISON Buchholtz-AU: Ah.
Ni fick mig.
Bra jobbat.
Guldstjärna.
>> OK, så vi har lite kropp här.
Och nu ska vi börja lägga lite text.
Så du har ett par olika alternativ för att tillfoga text.
Vi har saker som rubriker.
Vi har bara vanlig text.
Så låt oss bara börja med en rubrik.
Egentligen, om ni vill ha att dra upp W3 skolas HTML,
du kan typ av se dig omkring och om det finns något
särskilt som du vill prova med denna webbsida, kan vi göra det.
Så i detta fall, låt oss bara göra lite h1.
Så h1 är som den högsta header.
Det kommer att ge dig något som är mycket stor och fetstil.
>> Och i detta fall, vad vill vi för den första texten på vår hemsida?
Vad som helst.
Ni ska skapa detta.
Jag kommer bara att skriva.
PUBLIK: Välkommen.
>> ALLISON Buchholtz-AU: Välkommen.
OK, så om vi sparar det och vi ladda om, Vi har en stor stor Välkommen.
Så bara så kan du se skillnader, låt oss göra något på H6.
Vad vill vi här?
Rätt?
>> OK, så det är bara så att du kan se skillnaden.
Ja, Sublime.
Så om du märker, h1, mycket, mycket stora.
h6, som fet, men mycket mindre, och du har allt däremellan.
Så du kan ha h2, h3, h4.
Och dessa är bara rubriker, så om du försöker
att skapa en webbsida som har olika sektioner,
kanske du vill använda rubriker i det någonstans.
>> Cool.
Så vi ska lägga till lite mer saker i vår kropp.
Jag ser att det skulle vara snäll av coola om vi hade en bild.
Jag känner mig som alla kunde använda kanske en söt kanin bild rätt om nu,
så vi kommer att hitta en kanin bild först.
>> Jag vet inte om ni har någon preferenser på vilken vi vill ha.
Har ni några önskemål?
Här en här?
Ner.
OK.
Den där är det.
Bra val.
>> OK, så vi kommer att visa vår image.
Titta på det.
Titta på den bedårande sak.
Hur kan du vara ledsen på en måndag med detta?
>> Så vi ska bara kopiera bildens URL.
Och vad vi vill göra är att, låt oss bara säger att vi har en del p för punkt.
Vi kommer att säga "Titta titta på den söta kaninen.
d'awwww. "
Jag älskar mina kaniner.
Jag har en kanin hemma.
Jag saknar min kanin.
Så vad vi ska do-- Jag vet inte om ni vill ha
google this-- men med HTML, Hur kan du ta en bild?
Bokstavligen, om du google "Inkluderar bild HTML",
Varför inte ni tala om för mig vad denna tagg borde vara?
>> PUBLIK: img source--
>> ALLISON Buchholtz-AU: img source--
PUBLIK: --equals--
ALLISON Buchholtz-AU: --equals--
PUBLIK: --quote-- ja.
ALLISON Buchholtz-AU: Perfect.
Lovely.
Se, MySpace generation, eller hur?
Målgrupp: Neopets.
ALLISON Buchholtz-AU: Neopets.
Åh, OK.
Wow.
Det har varit galet.
OK.
>> Så se till att jag får denna rätt.
Cool.
Så det här borde vara här.
Och sedan om vi ladda om, vi har vår bunny på sidan Är inte detta bedårande?
>> Detta är så söt.
Du har valt en stor, stor foto.
Jag gräver den.
>> OK, så vi har denna förtjusande kanin nu.
Vi kunde lägga till en bild, bara så där.
Så i princip om det finns någon bild du vill lägga till din webbsida,
du kan lägga till det precis som här.
En annan sak vore om du har en bild som lagras
i samma mapp som den här filen kan du bara
skriva vad namnet på den bilden är istället för att ha en webblänk.
>> Det skulle fortfarande vara inom citationstecken.
Det skulle bara vara som om vi hade namngett this--
Om den här bilden hade sparats i mappen med denna HTML-fil
att jag redigerar och det kallades bunny.jpg.
Vi skulle också kunna göra det och det skulle dyka upp.
Men jag har inte det sparas i filen och jag vill behålla kaninen,
så vi kommer att hålla på länken.
>> PUBLIK: Vad är rabbit.org?
>> ALLISON Buchholtz-AU: rabbit.org.
Det är en appropriate-- titta, du kan anta den.
Adoption.
bunny.jpg.
Jag vill anta denna kanin.
Åh, gud, det är så söt.
>> OK, så vi har lagt till rubriker.
Vi har lagt till en bild.
Självklart har vi lagt lite text här, eller hur?
Om vi ​​ville lägga till andra texter, vi skulle gå så här.
Så detta är en annan punkt.
>> Och vi säger "det här är en annan punkt."
Dessutom, jag är en hemsk stavnings, så jag kan stava fel saker.
Bara FYI.
>> Så vi har en annan punkt här, eller hur?
Så kanske du vill göra något lite mer intressant än bara
har all din text, som högerjusterat.
Kanske du vill centrera din text, OK?
>> Så om någon vill använda dem praktiska datorer framför dig
och berätta hur du är kommer att centrera texten,
>> PUBLIK: p align.
>> ALLISON Buchholtz-AU: So p align lika "center".
Han dödar det, killar.
Y'all måste öka.
Och vi har "Detta är centrerad."
Och nu har vi något centrerat.
>> På samma sätt, om man vill ha det vänsterställt,
du kunde göra align jämlikar vänster, lika align rätt.
Helt upp till dig.
Om jag gjorde här, då detta should-- nu är det högerjusterat.
>> PUBLIK: Allison?
Genom bildkälla, är varför inte det slutet av img källa?
ALLISON Buchholtz-AU: Förlåt.
Detta bör vara där du nu är bra.
Nu är vi är bra.
PUBLIK: Saknar du att stänga det där, eller hur?
ALLISON Buchholtz-AU: Tja, så img källa, detta bara-- med bilden,
det är bara ses som ett element, medan om du märker för resten av dessa,
vi har några tag sedan information som det avser och sedan en sluttagg.
Men med bilden, allt är bara typ av fristående.
Cool.
Så ni vet hur man skapar en header, du vet hur du mata in text,
du vet hur man sätter en bild i nu, kan du justera saker.
>> En annan sak som du kanske vill kunna göra
är att skapa en lista i CS-- vi är typ att gå in i nästa veckas pset.
De saker som vi normalt undervisar den här veckan
går riktigt bra med nästa veckas pset, så vi är
typ av blandning, överlappande saker här.
Men det ska vara användbart för nästa vecka.
>> Så om vi ville skapa något lista, hur skulle vi göra det?
Du kan inte svara på den här gången.
Någon annan måste.
Det är inte svårt, killar, lovar.
Google "oordnad lista HTML."
Vad var det?
>> PUBLIK: [OHÖRBAR].
ALLISON Buchholtz-AU: Rätt.
Så vill vi ha beställt eller oordnad?
Låt oss göra en oordnad.
Så vi har några ul, vilket står för osorterade listor.
Och vad har vi för varje element?
Spelar det behöver en egen tagg?
Kan vi bara börja skriva saker?
>> PUBLIK: li.
>> ALLISON Buchholtz-AU: li.
Så vad är vår lista kommer att bli?
Vad vill vi här?
Vi gör bara namn.
Gör Jacob.
>> PUBLIK: Kanin livsmedel.
>> ALLISON Buchholtz-AU: Kanin livsmedel.
OK jag gillar det här.
Kanin livsmedel.
>> OK, så vi har morötter.
Jag gillar den här kanin tema.
Jag gräver det mycket.
PUBLIK: Faktiskt, jag trodde att Jacob skulle vara en legit.
ALLISON Buchholtz-AU: Jacob?
Jacob är kaninmat.
Om du såg Jakobs foto från kontorstid,
Du kanske trodde att han fick attackerad av en mördare kanin.
>> PUBLIK: Jag har en kanin nu.
Jag har en killer rabbit nu.
>> ALLISON Buchholtz-AU: Skämtar du med mig?
>> PUBLIK: Jag ska ta det nästa avsnitt.
Jag har det.
>> ALLISON Buchholtz-AU: Det här är löjligt.
Hur som helst.
>> PUBLIK: [OHÖRBAR]
>> PUBLIK: Ja, min proctor har en kanin också.
>> ALLISON Buchholtz-AU: Jag vill ha en kanin.
OK, vem ger en riktig kanin till I nästa avsnitt, totala brownie punkter.
PUBLIK: [OHÖRBAR]
PUBLIK: Åh, det är inte verkligt.
Det är en uppstoppad kanin.
>> ALLISON Buchholtz-AU: Oh Ja, kan vi stänga dessa.
Ser rad.
PUBLIK: Spelar det egentligen någon roll?
ALLISON Buchholtz-AU: Det gör det inte.
Med de flesta av dessa saker, du inte stänger taggen,
99% av tiden inget dåligt händer att hända, men det är bra stil också.
Jakob.
Och vi har sallat.
PUBLIK: För länkar, det är verkligen viktigt.
ALLISON Buchholtz-AU: Hm?
PUBLIK: För hyperlänkar.
ALLISON Buchholtz-AU: För hyperlänkar.
Ja, hyperlänkar behöver det.
OK, så låt oss se här.
Och vi har nära till vår lista.
Och vi tittar på det.
Vi har all-- Jakob, precis där.
Kaninmat.
Påminner mig om Bunnicula.
>> PUBLIK: [OHÖRBAR]
ALLISON Buchholtz-AU: Jag föra tillbaka alla gamla skolan referenser i dag,
inte jag?
Bara alla gamla skolreferenser.
Borde ha fört ut Gogurts eller något för mellanmål.
>> PUBLIK: Eller Gushers.
ALLISON Buchholtz-AU: Oh.
OK.
Jag ska se om jag kan spåra ner Gushers för nästa vecka.
Jag tror att jag kan göra det.
Jag tror att vi kan ha några på kontoret.
>> OK, så vi har täckt en massa olika saker du kan göra med HTML, eller hur?
Och som ni säkert kan se, är det nothing-- förhoppningsvis inte alltför intim--
om det är, menar jag inte att förringa någon.
Om du har problem, kom gärna och prata med mig.
>> Men det mesta av det är bara titta på syntaxen, eller hur?
Om du vill ha en oordnad lista, Om du vill ha någon form av lista,
om du vill justera något eller format något, det handlar om just
slags tittar upp syntax för HTML, eller hur?
Och en sak som är ganska cool faktiskt
är om du går att-- låt oss se, vad är en bra webbplats som vi gillar?
Någon som har några favoritwebbplatser som är OK för att få upp på nätet?
Vet du vad, låt oss bara göra CS50.
Det var trevligt och säkert, eller hur?
>> OK, så CS50 här.
Åh titta, det finns ett avsnitt just nu.
Om du gillar hur det ser ut.
>> PUBLIK: [OHÖRBAR].
ALLISON Buchholtz-AU: Vi är inte kommer att göra meta avsnitt, grabbar.
Det händer inte.
Det skulle vara häftigt, men Vi kommer inte att göra det.
>> Så vad gör du kunde göra om du gillar hur
detta fungerar är kan du alltid rätt klicka på någon webbsida som du gillar
och du kan göra sidkälla.
Det kommer att ta upp all HTML.
Och det här är faktiskt en riktigt bra sätt att styla din egen webbsida.
Gå till en webbsida som du verkligen gillar och titta på HTML
och räkna ut hur de gjorde det.
>> Och bokstavligen, så länge som ni nämner saker,
så länge du inte bara stjäla från människor, är det OK.
Speciellt för CS50 [? finansiera?], är vi
typ av förväntar dig att få inspiration från annan webbplats.
Så tveka inte.
Titta igenom webbplatser som du tror är verkligen söt
och räkna ut hur de använder HTML och CSS för att göra dessa saker.
>> Så som ni ser här, det är uppenbarligen som länkar och vi har en klass här.
Vi har en länk här.
Vi har en lista.
Vi har förmodligen någon bilder i här någonstans.
>> Vi har lite cool stil här.
Detta är nästa sak vi kommer att göra.
Så stil, när du ser dessa stil parentes är det CSS princip.
Ben, har du en fråga?
>> PUBLIK: Vad är div?
>> ALLISON Buchholtz-AU: div är precis A-- vad är div?
PUBLIK: Division.
ALLISON Buchholtz-AU: Division.
Ja, det är precis som separera olika element.
OK, så här är vad vi är kommer att gå in i nästa.
Så det här är kanske inte den bästa stil, för om du märker
Vi har HTML och stil på samma sida, och vi faktiskt vill separera dem,
OK?
Och faktiskt, låt mig öppna upp min rätta
eftersom det är tänkt att vara PDF, så vi har style.css.
>> Så vad vi kan göra här är dessa är coola saker som vissa blekna
och vi kunde försöka göra det, men jag känner som om jag skulle förstöra som i farten,
så jag uppmanar er till gå prova det på egen hand,
men jag tänker inte göra det just nu.
Så om ni, kom ihåg, om du någonsin drabbats problemuppsättning,
något sveper in från sidan.
Det har att göra med fade och övergången och allt.
>> PUBLIK: Och det är allt CSS och HTML?
>> ALLISON Buchholtz-AU: All CSS och HTML.
Yeah.
Så du kan göra en hel del riktigt coola saker med CSS och HTML.
Så med våra awesome kanin webbsida här, vi
kommer att göra lite lite CSS styling med det.
>> Så om du någonsin har en stil blad, som vi har här,
Du kan bara ringa style.css.
Du kan kalla det vad du vill.
Det viktiga är att vi kommer att referera till den i vår web.html här.
>> Så vad vi ska göra är att we-- så jag inte bråka här up--
vi kommer att länka dessa två filer tillsammans.
Så i samma way-- jag ska att dra en analogi till C här.
På samma sätt som om man har några library-- och vi har cs50.h--
vår kompilator länkar den.
Detta är bara en explicit länk från vår sida.
Så på samma sätt som vi gör hash inkludera någon fil, vad
Jag är på väg att skriva är bara HTML / CSS motsvarighet till detta.
>> Vi säger bara, OK, den här webbsidan kommer att använda denna format, OK?
Så vi har link rel lika med stilmallen.
Och så har vi typ, css.
Och sedan href lika.
>> OK.
Så allt detta gjorde här är att du kan se det som samma sak
såsom en hash inkludera.
Uppenbarligen ser det lite mer komplicerade, men i samtliga fall,
Det är i praktiken samma sak.
Så det här är bara några sammankoppling av en formatmall, det är av typen text / css,
och namnet på den är style.css.
>> Vad är viktigt att veta är att webbsidan
att jag jobbar rätt now-- web.html och style.css-- finns i samma mapp.
För i olika mappar, du behöver för att ge den verkliga roten
till det eller sökvägen till den.
Men i det här fallet, vi hålla den super enkelt och det kommer att vara här.
Så om vi gör det, har jag lite saker redan kö här.
>> Så vi har några organ, som kommer att ha vår bakgrundsfärg, vilket
just nu är ljusblå.
Vi kan ändra det om vi vill, men om jag minns det rätt,
Det bör bara ändra det till ljusblått.
Och nu har vi en ljusblå bakgrund.
Och vi hade här-- kan någon minnas vilken som är hash-ID eller klass?
>> PUBLIK: ID.
>> ALLISON Buchholtz-AU: ID.
Cool.
Så vad vi vill göra är vilken av dessa typsnitt
eller which-- vill vi "Titta på den söta kaninen "att vara lila?
Jag tror att vi vill att det ska vara lila.
Jag är ganska ner med det är lila.
>> Så vad du gör är att du gör ID equals-- i detta fall
Jag sa, vad, vacker färg här.
Vi ladda om.
Helt plötsligt, det är lila.
OK, så med ID, kom ihåg den måste vara unikt,
så jag ska aldrig vara att använda Detta ID någon annanstans.
Men med klass, eftersom vi har här med en vacker typsnitt,
Jag skulle kunna använda det någonstans jag vill.
>> Så låt oss göra detta en här.
Så vi kan säga klass är lika vackra typsnitt.
Och om vi ser nu, vi har denna coola vackra typsnitt här.
Så kanske jag vill göra både och.
OK, jag vet inte egentligen om det är gå till jobbet men jag vill prova.
Och detta är hur du lär dig CSS och HTML.
Du är som, du vet vad, jag vill prova detta.
Jag är inte säker på om det kommer att fungera.
Låt oss se om det fungerar.
>> Och titta på det.
Nu är det i lila och det är ett ganska teckensnitt.
OK, så du har alla dessa olika saker du kan göra.
Har du en fråga?
>> PUBLIK: Ja.
Jo, precis som färgerna du använder är ord.
Finns det något sätt att göra färger med hexadecimala RGB?
ALLISON Buchholtz-AU: Du kan även gör det med hexadecimal, tror jag.
Yeah.
Men det är ganska trevligt om du vill inte slå upp dem.
Du kan bara vara som, lila eller blå.
PUBLIK: Låt oss hoppas att de vet vad det betyder.
ALLISON Buchholtz-AU: Rätt.
Så låt oss göra detta till läs- eller chartreuse.
Varför skulle du någonsin välja chartreuse?
Det är en intressant färg.
>> OK, så självklart att vi kan se att vi kan förändra saker men vi vill.
Om du ville create-- låt oss säga Vi ville skapa en annan klass.
Vad kan ni vill ändra?
Om du drar upp W3Schools " CSS dokumentation,
Jag lämnar ordet till er.
Vi kan försöka göra något häftigt med detta i sista par minuter.
Eftersom jag har sorts gett dig en snabbkurs på en massa coola saker
som du kan göra.
Men till slut, som sagt, om du bara experimentera, får du lära dig en hel del.
>> PUBLIK: Har du slå upp det typsnittet?
>> ALLISON Buchholtz-AU: Ja, Jag tittade upp det teckensnittet.
Så som bokstavligen, jag gick att-- vad gjorde jag?
Jag gjorde CSS-fonter, och då jag gjorde typsnitt stack,
och då jag var som, titta, här är alla coola teckensnitt du kan göra.
Och det fanns den här, så Jag kopierade den till min urklipp.
Och då var jag vill, OK, coola, det går vi.
Allt gjort.
>> PUBLIK: Så du måste se att CSS vet vad det teckensnittet är.
>> ALLISON Buchholtz-AU: Ja.
>> PUBLIK: Hur är det att säga i slutet?
Skrivstil?
>> ALLISON Buchholtz-AU: Cursive.
Yeah.
>> PUBLIK: Bakgrundsbild.
>> ALLISON Buchholtz-AU: Bakgrundsbild.
OK.
Så du vill berätta för mig hur man gör detta.
Jag lämnar det till dig.
Jag bara skriva upp här nu.
Hjulet är i dina händer.
>> PUBLIK: OK
>> ALLISON Buchholtz-AU: OK.
Vad gör jag?
>> PUBLIK: Doing-- Jag vet vad kommer efter klammerparentes.
ALLISON Buchholtz-AU: OK.
Så antagligen i kroppen, jag skulle anta, eftersom vi är
gör med bakgrundsbilden.
>> PUBLIK: Ja, låt oss göra det.
>> ALLISON Buchholtz-AU: OK.
PUBLIK: OK, så bakgrunden kolon, och då är vi
behöver en URL-adress för den bilden.
Kanske pseudo-kod som för nu, kanske.
>> ALLISON Buchholtz-AU: Vad vill du att jag att--
PUBLIK: Jag tänker som en GIF.
ALLISON Buchholtz-AU: En GIF?
Det kommer att bli intressant.
OK, vad ska jag googla här?
>> PUBLIK: Nej, det är ditt val.
>> ALLISON Buchholtz-AU: Varför inte we-- om det är en kanin,
Jag tycker vi bör ha en fin gräsmatta eller något.
>> PUBLIK: Meadow.
En äng.
>> ALLISON Buchholtz-AU: En äng?
OK.
PUBLIK: Eller Rachel Maddow.
ALLISON Buchholtz-AU: Den här ser ganska.
Åh, det är liten, men.
Vi behöver en bra storlek bild.
Låt oss se.
Åh, titta.
Det är en vacker äng.
Vet du vad, jag gillar den här.
Låt oss kopierar här.
>> PUBLIK: OK, så jag tror det är URL, öppna parenteser.
>> ALLISON Buchholtz-AU: OK, URL.
>> AUDIENCE: Sedan adressen.
>> ALLISON Buchholtz-AU: OK.
Är det allt vi behöver?
>> PUBLIK: Stäng parentes semikolon, och sedan utrymme, bakgrund bindestreck
fäst kolon fast och klammerparentes.
>> ALLISON Buchholtz-AU: OK.
Låt oss se om det fungerar.
Det kommer att vara ganska coolt om det gör det.
Jag är verkligen glad här.
Det fungerade inte.
Jag undrar varför.
PUBLIK: Kanske URL måste vara i citat.
ALLISON Buchholtz-AU: Kanske.
Och det är så vi lär oss, killar.
>> PUBLIK: Kan vi ha bakgrund färg och bakgrundsbild?
>> PUBLIK: Nej.
Man ersätter den andra.
>> ALLISON Buchholtz-AU: Jag vet inte.
Låt oss se.
Låt oss kolla upp det och se.
>> PUBLIK: Åh, kanske, ja.
[Inplacering UTTRYCKER]
>> ALLISON Buchholtz-AU: OK, det här obviously-- Jag [OHÖRBAR] här.
Så OK.
PUBLIK: Bakgrunds fastsättning.
ALLISON Buchholtz-AU: Ah.
>> PUBLIK: OK, jag vet inte.
ALLISON Buchholtz-AU: Det ser ut som det borde fungera.
Är du säker på att det är kolon efter URL?
>> PUBLIK: Nej, det är semikolon.
ALLISON Buchholtz-AU: Det är semikolon.
PUBLIK: Sa jag kolon?
ALLISON Buchholtz-AU: Du sa ett kolon.
PUBLIK: Åh nej.
ALLISON Buchholtz-AU: Där du går.
PUBLIK: Åh, vänta, nu Vi kan inte läsa texten.
ALLISON Buchholtz-AU: Nu du kan inte läsa texten,
men vi har bakgrundsbilden.
Mmhmm?
>> PUBLIK: Gör HTML stödja dynamiskt innehåll?
Liksom, kan du ändra storlek den bilden Beroende på fönsterstorleken,
eller är det en CSS--
>> ALLISON Buchholtz-AU: Så CSS har att göra det.
Så om ni är intresserade att lära avancerad CSS,
Jag samar undervisa en seminarium om CSS på 7: e.
Och jag lovar att det kommer vara mycket mer på djupet
och göra mycket mer cool saker i det här avsnittet.
Och min co-lärare är som total front end web dev mästare.
Så det kommer vara ganska coolt om du vill att lära sig om alla coola saker
att CSS kan göra.
>> Men vad vi har här med hans bakgrund fastsättning
fixed-- så det är lite fast size-- men du kan faktiskt dynamically--
Om du någonsin sett webbsidor, som de flesta bra webbsidor kommer att göra,
När du justerar storleken på din webbläsare,
Det justerar bakgrunden eller hur mycket visar eller omforma saker, eller hur?
Så det är vad vi kallar relativ positionering.
>> Och CSS kan faktiskt greppa hur stor din webbläsarbredd är eller hur lång den är,
och du kan placera saker i enlighet med de relativa storlekarna
kontra storlek i absoluta tal.
Och det är naturligtvis mer avancerade CSS, men det är något du kan göra.
Om du vill lära dig mer, kom till mitt seminarium.
>> Så det är något du kan göra.
Och CSS kan faktiskt do-- CSS och JavaScript,
som vi kommer att få in i nästa week-- kan tillåta dig att dynamiskt ändra
sidor utan att behöva ladda dem hela tiden.
Och du får göra en del ganska cool stuff.
>> Så finns det en annan sak att ni kanske vill göra
eller något du vill utforska?
Vi har 10 minuter kvar.
Vi kan också lämna tidigt, men om du vill göra lite mer web grejer,
vi kan, men jag är inte kommer att tvinga dig att.
Men vi kan också bara äta godis.
PUBLIK: Markera texten vit så att du kan läsa det.
ALLISON Buchholtz-AU: OK.
Så i detta fall, vi vill ha lite s.
PUBLIK: Ska vi göra det i kroppen så det gäller för hela sidan?
ALLISON Buchholtz-AU: Ja, det kan vi faktiskt.
Det är en bra idé.
Så vi have-- gör du vet vad vi borde vara?
Jag vet inte om vi kan göra textfärg.
Jag kommer att försöka skapa ytterligare en klass här.
>> PUBLIK: Hur får du så att den har förslag?
ALLISON Buchholtz-AU: So om ni är intresserade,
Detta är en annan text redaktör kallas sublima.
Du bör kunna installera det på din apparat.
Ibland blir det lite knepigt.
Om du vill ha hjälp med det, Jag är super glad att hjälpa dig
med det, eftersom gedit är stor och det är häftigt eftersom du kan kompilera den
på botten, men jag verkligen gillar Sublime eftersom det är ganska
och det gör saker liknande komplettera automatiskt.
>> Så du kan definitivt välkommen att Låt mig veta om du vill göra det.
Om du bara google "Sublime text, "den typiskt
har instruktioner om hur man installerar på olika operativsystem.
Det är riktigt coolt, jag tror, ​​enligt min mening.
Så p.
Jag tror att jag kan bara göra text-- eller Vi kan bara göra färgen är "vit".
Där.
>> Så vad jag gjorde här är att jag ändrade inte all text.
Men p här är bara en tagg som vi har, eller hur?
Denna punkt taggen.
Så jag bara skapat en CSS-element som sade, OK, något med denna tagg
p, göra färgen vit.
>> Så om du har märkt, gjorde det denna vita och denna vita.
Det gjorde inte vår lista vitt eftersom det är inte förknippas med det.
Du kan gå igenom och du kan säga--
>> PUBLIK: Gör bakgrundsfärg.
>> ALLISON Buchholtz-AU: Bakgrundsfärg?
>> PUBLIK: Bakgrund till rör i färg där du sätter p-taggen.
>> ALLISON Buchholtz-AU: OK.
Vill du ha den vita?
PUBLIK: Mmhmm.
ALLISON Buchholtz-AU: OK.
Där du går.
PUBLIK: Det är konstigt.
ALLISON Buchholtz-AU: Ganska coolt, eller hur?
Så om du bara röra runt, du kommer att lära sig mycket.
Och det kan vara ganska coolt.
Jag tycker det är definitivt mer glädjande än ibland
eftersom du inte behöver vänta för ditt program att kompilera.
Du kan bara trycka på Uppdatera och du är som, åh, titta,
det fungerade, eller åh, jag är antagligen missat något.
Och det är något som är riktigt cool om detta nästa del av klassen,
är det definitivt, jag tror, ​​lättare att kontrollera
när du går på vägen kontra behöva skriva dessa långa program
och önska och be att det fungerar i slutet.
>> Så med det, tror jag ni alla verkar bra.
Om du har några frågor, som alltid, komma och prata med mig, kom låt mig veta.
Jag kommer att vara precis utanför för de närmaste 15 minuter
Om du vill prata om allt och inget.
>> Så jag hoppas att du guys-- lycka till med detta pset.
Tidsfristen är fredag ​​vid lunchtid eftersom den släpptes sent.
Så jag kommer förmodligen att få se en hel del av er på torsdag,
men förhoppningsvis inte.
Kanske har du det gjort då.
Jag skulle vara super stolt.
>> Men om inte, kommer jag att se dig torsdag.
Du kan också använda ett sent datum, vilket utvidgar det till lördag kl.
Men jag don't-- va?
>> PUBLIK: Halloween.
>> ALLISON Buchholtz-AU: Det är Halloween, a och b,
Jag tror inte att det kommer att vara kontorstid på fredag.
Så verkligen försöka få det gjort av Fredag ​​så att vi alla kan fira
Hallow helgen.
Okej, jag ska se er nästa vecka.