[Musikken afspilles]
ALLISON Buchholtz-AU: Okay, alle sammen.
Velkommen tilbage til afsnittet.
Så vores dagsorden for i dag går i løbet af meget mere web dev stuff.
Jeg ved ikke, hvor mange af du har set dine psets
da det blev udgivet morges.
Jeg ville som hvor mange mennesker har læst spec,
men at se hvordan du har haft alle af, ligesom syv timer at se på det
og det er en mandag og du har sikkert haft klasse,
Jeg har tænkt mig at antage, at de fleste af jer har ikke.
Hvis du har, ekstra kudos.
>> Du er dybest set hjælper implementere en simpel web
server i C, som er en helt ny pset, så jer komme til at være forsøgskaniner.
Det kommer til at være en sjov, vild uge, men jeg tror, ​​det vil være en masse sjov
og det vil være en rigtig god oplevelse faktisk.
Så for at forberede dig til at der i afsnit i dag,
vi kommer til at gå chmod, TCP / IP, og så en lille smule af HTML og CSS.
>> I slutningen, vil vi faktisk kode en simpel webside sammen
at hjælpe jer slags får mere fortrolig med det.
Og så hvis du ikke har afhentet dine quizzer, de er i front,
men jeg er temmelig sikker på at alle her har deres quiz.
Og også på dette notat, løsninger er ikke op endnu,
men så snart vi finish-- vil, sidste par mennesker, der tager deres quizzes--
de vil være op.
Hvis du har spørgsmål i mellemtiden,
velkommen til at kontakte mig personligt.
Jeg vil svare igen med din individuelle spørgsmål, som jeg altid gør.
>> Så på dette notat, chmod.
Så dybest set alt, hvad du behøver at vide om chmod
er, at det bruges til at ændre filrettigheder, right?
Så det er bare nogle systemer kalder det en ændre tilladelser, som det hedder her.
Og hvis du nogensinde ønsker at se hvilke tilladelser en fil har,
i stedet for bare at gøre ls, kan du gøre ls -l.
l står for længe.
>> Så du vil gøre lange lister af alt, og det
vil give dig meget mere detaljeret oplysninger om hver af dine filer.
Og du vil se something-- jeg kommer til at springe fremad for en second--
men du vil se noget lignende at øverste linje der for hver fil.
Og vi vil gå igennem, hvad det betyder.
>> Så dybest set, at ændre din fil tilladelser,
du bare ønsker at bruge chmod.
Du kan tænke på det som enhver anden UNIX kalder ligesom ls eller cd eller whatnot.
Det er bare sådan en anden lignende opkald.
>> Så vi gør chmod og så vil vi har tre cifre typisk.
Der er et par måder at gøre det, hvoraf vi vil gå over.
Men typisk, vil du have tre cifre fra 0 til 7 hver gang.
>> Så én ting er, at der er tre forskellige tilladelser
at vi kan give hver fil.
Og det er læsbar, som er repræsenteret ved R, som giver mening
i en lille smule; w, som er skrivbar; og eksekverbare, som er x.
Jeg ved, at e ene, eksekverbar, måske ikke det mest mening, men vi
repræsentere det med x.
>> Og så sker der det, hver af disse også har nummeret repræsentation.
Så vi har 1, 2 og 4.
Og dybest set, hvad der sker, er hver af disse tre tal
her svarer til en andet sæt af brugere
at disse tilladelser vedrører.
>> Så du kan tænke på det første tal svarer til den faktiske bruger
eller ejeren af ​​filen, det andet nummer vil svare til gruppen,
og den sidste refererer til verden, OK?
Så hvad der sker, er at huske de numbers-- r er 4, w er 2,
x er 1, right?
Denne-- hvis du opsummere disse op, som giver dig første nummer
at vi måske input i vores chmod.
>> Så i dette tilfælde, hvad ville dette tal være?
Det ville være 4 plus 2 plus 1, som er en 7, right?
Og i dette tilfælde er disse ikke har noget,
så denne ret her ville oversætte til chmod 700, OK?
Og hvad det gør, er det giver alt af disse tilladelser til din bruger.
>> Så det betyder, at vores bruger kan gøre, hvad de vil.
De kan læse denne fil.
De kan udføre denne fil.
De kan skrive til denne fil.
Men gruppen og verden, nej overhovedet tilladelser, OK?
>> Så en anden måde at skrive det, vi kan gøre chmod af tre cifre, som hver
svarer til, hvad summen eller specifik gruppe er, specifik undergruppe.
Eller vi kan gøre faktisk en anden ting.
Hold på.
Vi kan gøre noget med disse her.
>> Hvor mange af jer har set et eksempel hvor det var ligesom at chmod et plus x?
Vidste du se, at i foredrag, jeg tror?
Så en står for alle.
Det betyder at give det til alle brugere, som jeg glemte at sætte her.
>> Men en plus x, hvis vi bemærke her, hvis vi gør
at chmod-- hvad gruppe vi er taler om plus tilladelserne
Vi ønsker at give dem.
Så dette kan være et plus eller et minus.
Plus tilføjer tilladelse.
Minus tager væk tilladelse.
Temmelig intuitiv, tror jeg.
>> Så et plus x betyder chmod.
Så ændre tilladelserne for alle mennesker Hvis dette er en en-- tilladelser add.
Og x-- det betyder hvad tilladelse vi yde alle.
Læse, skrive eller eksekvere?
>> PUBLIKUM: Udfør.
>> ALLISON Buchholtz-AU: Udfør.
Så vi giver alle brugere tilladelse til at udføre denne fil, OK?
Så hvad nu hvis vi ønskede at gøre at med den numeriske formular?
Så husk med numerisk, vi ønsker tre numre.
>> PUBLIKUM: 4.
ALLISON Buchholtz-AU: Hvad var det?
PUBLIKUM: 4.
ALLISON Buchholtz-AU: Not 4.
PUBLIKUM: 0, 0, 4.
ALLISON Buchholtz-AU: Godt, vi ønsker at give det til alle brugere, right?
Så vi bliver nødt til et nummer i hver slot.
Det kommer til at være den samme antal i hver spalte
fordi vi netop ønsker at give alles eksekverbare tilladelser.
Så eksekverbare er 1, men på rette spor.
>> Så hvis vi gjorde chmod 111, der ville være det samme som chmod et plus på x.
Giver det mening for alle?
Vi kommer til at gå igennem et par eksempler.
>> Så store takeaway her er et er ikke på her,
men en blot betyder give det til alle brugere.
u er hvis du bare vil at give eller tage væk
en særlig tilladelse fra brugeren eller ejeren.
g er for gruppen, således at midterste ciffer.
Og derefter andre du kan tænke på som verden, at sidste ciffer.
>> Så med dette, vil vi gå til et eksempel, fordi jeg har lyst til eksempler altid
gøre disse ting lettere at forstå.
Så rwx-- vi gik gennem denne-- kunne også være repræsentere som 700.
Det er det eksempel, vi kiggede på mere af billedet.
Så chmod 444 på nogle fil ville give, hvad tilladelser?
Du var virkelig tæt.
PUBLIKUM: læses af alle.
ALLISON Buchholtz-AU: læsbar.
Så læsbar for alle, right?
Og hvad er så en anden måde at gøre det?
Hvis vi ønsker at gøre chmod med enten R'er eller Ws, plus og minusser,
hvad ville det opkald se ud?
Det ville blive chmod hvad?
>> PUBLIKUM: et plus r.
>> ALLISON Buchholtz-AU: et plus r på 5.
OK, så det er det samme som det, blot to forskellige oversættelser
af de samme ting.
Så med dette, har vi disse.
Så jeg vil jer at prøve og skrive disse slags i deres modsatte måde.
>> Så med chmod 555, hvad ville det være?
Ville det være et plus eller u plus eller whatnot?
For u plus x, giv mig de tre tal.
Og så fortælle mig om hvilke tilladelser vi faktisk tildeling og til hvem?
>> Så jeg vil give jer to minutter til at arbejde på det.
Du er velkommen til at tale med hinanden.
For dem af jer, der kom i en lille sen, der er slik og skjorter.
Vi har tre skjorter til venstre, og vi har Kit Kats og stjerneskud.
Så velkommen til at komme grab nogle i denne lille mellemspil.
>> Også den sidste er tricky.
Det er to chmods for den sidste.
Faktisk, lad mig lukke døren mens du fyre arbejder på det.
Candy er altid nødvendigt på en mandag eftermiddag.
>> OK, så chmod 555.
Hvad er en anden måde, vi kunne skrive det?
Nogen idéer?
Ja.
>> PUBLIKUM: et plus rx.
>> ALLISON Buchholtz-AU: r plus rx.
Ønsker du at forklare, hvorfor det ville være rx?
>> PUBLIKUM: Fordi du har 5, så det er 4 plus 1,
så der er læst plus eksekverbare, og det er for alle.
ALLISON Buchholtz-AU: Right.
Så bare at gentage, 5 her vi kender som summen af ​​4 og 1,
fordi hvert nummer i vores trio er summen af ​​de tilladelser til at delmængde,
højre?
Enten brugeren, gruppe, eller verden.
Så i dette tilfælde ved vi, at 5 skal dannes ved 4 og 1.
>> Og 4 og 1 svarer til læsbar og eksekverbar.
Vi giver det til alle, så vi kan gøre chmod et plus rx.
Og selvfølgelig, vi gik bare gennem spørgsmålene der,
så nu denne fil er kørbar og læses af alle.
>> Hvad så om den anden?
Hvad kan det nummer for at man være?
Nogen idéer?
Gå fremad.
>> PUBLIKUM: 100 [uhørligt].
>> ALLISON Buchholtz-AU: 100.
Præcis.
Så vil du forklare, hvorfor 100?
PUBLIKUM: Fordi det er for bruger, så det er i første position.
Og så x eksekverbare er 1.
ALLISON Buchholtz-AU: Præcis.
Så vi yde eksekverbar tilladelser til blot brugeren.
Så i dette tilfælde ville det være 100.
Og jeg har alle svarene op på det næste lysbillede i tilfælde
du skriver masser af ting ned.
>> OK, så det næste er faktisk gjort med to chmods, kan du gøre det.
Så nogen der har nogen idé om, hvordan du kan
få chmod 640 omskrevet på anden måde?
Du kan ændre brugernavnet først og derefter du kan ændre gruppen er mit tip.
>> Så hvis vi bare ændre brugeren, hvilket er det første her,
hvad der kunne vores opfordring være?
Så bruger er u, right?
Så chmod u plus hvad?
Mmhmm?
>> PUBLIKUM: rw.
ALLISON Buchholtz-AU: RW.
Right, for læse og skrive, fordi læsning er 4, w er 2, de beløb sammen som 6.
Så vi får chmod u plus rw, og vi får vores første 6 der.
>> Så for at få den 4, vi nu ønsker at ændre vores gruppe indstillinger.
Så vi vil gøre chmod g plus hvad?
Hvad er en 4?
>> PUBLIKUM: r.
ALLISON Buchholtz-AU: r.
Præcist.
Så vi giver ejeren læse og skrive tilladelser
og vi giver gruppen læste tilladelser, som vi alle har heroppe.
Mmhmm?
>> PUBLIKUM: Hvis du kan skrive noget, betyder det betyde du kan udføre det?
>> ALLISON Buchholtz-AU: Du kan skrive til something--
Jeg tror ikke, at det betyder, at du kan udføre den.
Cool.
Så det er alt, vi bare gik igennem.
Så på denne næste, er det lige slags fælles sager
at du ønsker at holde i tankerne til dit problem indstillet.
Disse er typisk de tilladelser at vi kan lide dig at bruge.
>> Så for 711, der giver os, selvfølgelig, bruger
alle tilladelser, der har tendens til at give mening.
Og så er det udføres af den gruppe i verden, som giver mening
hvis du har en mappe, du vil være i stand til at krydse ind i det.
Folk har brug for adgang.
>> For enhver ikke-PHP-fil, du vil at bruge 644, hvilket ville gøre hvad?
Hvad betyder det indebærer, eller hvad tilladelser betyder det give?
Så ejeren kan hvad?
PUBLIKUM: Læse og skrive.
ALLISON Buchholtz-AU: Læse og skrive.
Og derefter gruppe og andre kan bare læse, right?
Og så chmod 600 for enhver PHP-filer, som du bruger,
din ejer, igen, kan læse og skrive til den
men alle andre er lige slags afspærret.
>> Så dette vil faktisk være mere nyttigt, når
du kommer til dit problem sat i næste uge, hvor
du faktisk opbygge et websted.
Så hvis du nogensinde løbe ind mærkelige problemer
hvor det indlæses ikke ordentligt, måske du
nødt til at tilføje en eksekverbar tilladelse, eller måske har du brug for en læse-
eller skriv tilladelse.
Små ting, der har tendens til at trippe folk op, men det er lidt ligesom go-to
når du starter næste uges pset.
Og jeg vil give dig mere tips om denne uges pset,
men jeg har endnu til at se på det, da det blev frigivet i morges.
Men du email mig, jeg vil have kigget på det ved den tid, jeg reagerer i morgen.
>> Så nu er alle godt med chmod?
Eventuelle dvælende spørgsmål?
Temmelig ligetil.
Bare lidt at holde styr på, hvad læse, skrive og udføre numre er
er sandsynligvis den sværeste del.
>> Så med TCP / IP, alle disse protokoller, slags ligesom med dine datastrukturer
i sidste uge, det er meget mere vigtigt at slags få
et højere niveau intuition af dem.
Dette er ikke CS143 hvor vi skal hen at bede dig om at implementere et netværk,
så du vil være fint, hvis du ikke forstår
Nitty Gritty af alle protokoller.
Hvad er vigtigt at forstå, er slags ligesom hvad de repræsenterer
og hvorfor de er vigtige.
>> Så TCP / IP, selvfølgelig, er det Transmission Control Protocol
eller Internet Protocol, som er dybest set bare et sæt love dybest set
eller standarder, der fortæller data hvordan det skal håndteres,
hvordan det skal pakkes, transmitteres og modtages.
Så det dybest set, ligesom det siger her, øger chancerne
at data bliver hvor du vil have det til at komme til.
>> Jeg er sikker på, hvis du fyre gik til foredrag eller set det online,
han has-- Jeg kender ikke hvis han gjorde det i år,
men jeg ved sidste år, havde han en demo, hvor han havde et billede af Rob
og han delt det op i fire og sætte det i kuverter
og forsøgte at få det på tværs af Sanders.
Og du kan slags tænk på det på den måde.
Det er bare et sæt regler, som fortælle data, hvordan man får et sted
og lader dig vide, hvis du mangler data,
på samme måde, at hvis du er tage flere sider med noter
og du mærke dem med side 104, side 204, og du går tilbage til at studere senere
og du mangler something-- du kan ikke finde side 304-- du kender
noget er galt, så du kan se gennem dine noter
igen eller spørge nogen til at sende dig foredraget bemærker fra denne dag.
På samme måde som med data på internettet.
Hvis jeg beder om noget fra nogle server
og det skal sende det i flere pakker,
sandsynligvis vil nummer det på en måde, så
mig vide, hvor mange jeg skulle have modtaget, og fortæl mig, åh, det er en af ​​10
eller dette er en af ​​10.000.
På den måde når jeg går at samle alle brikkerne sammen,
Jeg ved, hvis noget mangler og jeg kan bede om det igen.
Giver det mening?
Blot et sæt af regler.
På grundlag regelsæt, OK?
>> Så vi talte også en lidt om havne.
Dette er egentlig bare en standard, lader dig vide, hvilken type data
der overføres i disse pakker.
Hvis vi går med vores kuvert eksempel, vi ikke
ved, at det er et billede af Rob i der, medmindre vi skriver det
på ydersiden af ​​vores kuvert.
Så havne er stort set det samme.
Det er bare en måde at finde ud af, hvad type data der overføres.
>> Så vi har alle de mest almindelige her.
Så 21-- disse er også venlig ligesom gode ting at vide.
Det er lidt af et let quiz spørgsmål.
Være ligesom, hvad betyder port 80 gøre?
Eller hvad gør port 443 gøre?
Så gode ting at vide.
>> Så vi har her, 21 fil transfer protocol, så bare
de regler, der styrer filoverførsel.
25, noget, som vi alle bruge alt for meget, er e-mail.
53 er det domænenavn system, som er dybest set
bare sådan et opslag til IP-adressen på et domænenavn.
>> Så jeg er temmelig sikker på det var nævnt i foredrag, hvis du
gå til noget lignende google.com, det har en IP-adresse
der er forbundet med det.
Det er faktisk ikke google.com.
Og så 53 er den port der faktisk tager
pleje af slags oversætte det ind i denne IP-adresse til dig.
Og derefter 80 og 443 er meget almindelige.
Du har enten din webside eller du har din sikre webside,
som en masse websider er overføre over til nu.
>> Så det er lidt højt niveau oversigt over transfer protocol.
Jeg kan ikke se meget mere i dybden.
Det er slags cool stuff hvis du er interesseret.
Der er masser af ressourcer.
Wikipedia faktisk er en temmelig god side.
Så jeg ser på det bare et lille stykke tid siden,
så vil jeg stærkt anbefale at kigge på det, hvis du er interesseret
eller tage 143 på to år, fordi Jeg tror, ​​det er hvert andet år.
>> Så på enden af ​​dette, er vi taler om websider og HTTP,
som faktisk er vores næste emne for i dag, før vi går ind i HTML og CSS
og du kan faktisk kode op en webside.
Det bliver sjovt.
Vi vil have billeder af gækkebreve og det vil være stor.
>> Så HTTP, som du kan se her, er en af ​​de dejlige akronymer
for denne uge, hvilket er Hypertext Transfer Protocol.
Så igen, det er bare et andet sæt regler,
regulerer hypertekst overføre i dette tilfælde.
Så bedste måde at lære om dette er lige slags
at bryde det ned i disse individuelle ord
fordi der er en masse ord på skærmen der.
>> Så vi vil til at starte med hypertekst.
So "hyper", du kan tænke på "Ovenfor," som super-type ting.
Så det er virkelig blot tekst taget til næste niveau, så det er ligesom super tekst,
ligesom den næste tekst.
Så det er dybest set bare tekst, der giver os
mere information end normal tekst gør, OK?
>> Så i dette tilfælde her, det er hypertekst.
Det fortæller os, at vi har nogle link, som vi kommer til,
som er cs50.net, som er nu cs50.harvard.edu.
Disse slides er lidt gammel.
Og det kommer til at vise det, da dette, som et hyperlink,
og derefter en virkelig cool hjemmeside.
>> Så det er tekst, som er lidt bit af virkelig cool ting derinde.
Så du kan linke ting, og du kan indsætte billeder og kan du style ting.
Og det mest velkendte ting, som du fyre sandsynligvis med hypertekst
er HyperText Markup Language, HTML, hvilket naturligvis er alle af banen
at vi ser omkring os, der ydes med nogle CSS stil kastet i.
>> Men hvis nogen var virkelig store med MySpace,
Jeg er sikker på jer alle brugte HTML hele tiden at skabe
de perfekte profiler, right?
Jeg har lyst til at kunne være en forældet reference nu, men uanset hvad.
Bare en little-- jer er ikke så meget yngre.
Nogle af jer er ældre end mig.
MySpace var stadig en ting, da jeg var ung.
Jeg er ikke så gammel.
>> Anyways, HTML bare en form for hypertekst.
Så hypertext er lige tekst med ekstra funktioner.
Så transfer protocol er sandsynligvis mere iffy ting at forklare.
Det er klart, transfer-- blot overføre data.
Så enten mellem kunden, ligesom din web bror, og en server.
Så dybest set bare måde internettet fungerer.
>> Så den nøjagtige anmodning hvordan disse arbejde, men vi er
faktisk kommer til at se på et eksempel anmodning og svar.
Men hvordan vi anmode information fra en server
og hvordan serveren reagerer på os, er hvad denne transfer protocol styrer.
Så anmodningen og svaret har at følge disse specifikke regelsæt.
Det er standardiseret, således at ligegyldigt hvor du bruger internettet,
det fungerer altid det samme, OK?
>> Igen, protokol, sæt af regler.
Det er bare en normal interaktion på samme måde
at professor Malan taler om hvis nogen udvider deres hånd,
du ved, at det er almindelig høflighed at nå jeres ud og ryste deres hånd.
Det er en protokol, right?
>> Så jeg giver nogle standardiseret anmodning, hvilket er jeg ønsker at ryste din hånd,
og du giver nogle standardiserede svar, som er enten ikke tak
eller du kan prøve og ryste min hånd eller måske du kommer til at prøve
og knytnæve bump mig.
Og vi har ikke en protokol for det.
Det bryder ned.
Men hvis alle følger samme protokol, selvfølgelig,
det går langt mere problemfrit.
Folk kommer til at kende hinanden.
Alle er glade.
>> Så i verden af ​​internettet, alle følger den samme rules--
lidt bedre end sociale standarder.
Men med dette, vil vi se på et eksempel anmodning her.
Så der er denne lille Nøglen her på bunden
der fortæller dig de forskellige farver, hvad de er meningen at betyde.
>> Så hvid er ligesom din metode anmodning og protokol version--
så metode anmodning version.
Og så er det nogle felt navnet og værdien
af dette område, som vi vil gå ind i meget, meget snart.
Så dette er et eksempel anmodning.
Det er ligesom mig, der strækker sig ud, ønsker at præsentere mig selv.
>> Dette er, hvad klienten eller hvad din web browser
ville sende til din server.
Så dette er en get anmodning, så det er beder om noget fra serveren.
Og det er naturligvis HTTP og det er version 1.1.
>> Så resten af ​​denne her er, hvad vi kalder headeren, og dens ekstra information
det giver os en bedre idé om, hvad vi egentlig beder om,
eller oplysninger, som vi ønsker at give den server, der kan være relevant.
Så User-Agent giver nogle mere beskrivelse on-- for eksempel her,
krøller / 7.24.0 rent faktisk vil fortælle den server, bruger vi Google
Chrome som vores browser.
Så hvis du nogensinde hører om folk, der taler
om at lave en app lydhør til flere browsere,
dette er noget, de ville bruge, fordi hvis du
ikke ved, hvad browser anmodningen kommer fra,
du kan ikke skræddersy dataene til det.
Så i dette tilfælde bruger er bare at give denne slags
identificere information om hvad browser
din bruger er i øjeblikket bruger, OK?
>> Så har vi også vært, som er hvor vi faktisk ønsker at gå til.
I dette tilfælde, vi ønsker at gå til apple.com, købe nogle seje nye iPads
eller noget, måske nuttet lys på vores sovesale.
Og navn værdi ultimo er bare et fyldstof, blot en generel ting
for jer at se.
Det gør faktisk ikke svarer til noget her.
>> Så du kan have så meget eller så lidt som du ønsker i hvert enkelt tilfælde.
Det meste af tiden er disse valgfri.
Det bare afhænger af, hvad du har brug for fra browseren,
fra din bruger for at kunne korrekt giver anmodningen.
Eller det afhænger af, hvad din bruger faktisk ønsker at give op til serveren.
Så du kan have mange, mange af disse header feltnavne
eller du kunne bare have et par.
Som med så mange ting Jeg har sagt i denne sektion,
det virkelig afhænger af konteksten af hvordan du bruger dette.
>> Så gør, der giver mening for alle?
Dette er blot et eksempel på en anmodning, overskrifter, whatnot.
OK, så med det, vi har nogle svar.
>> Igen har vi vores status kode, protokol version og derefter feltnavn og felt
værdi som altid.
Så vores protokolversion og vores status kode er 200.
OK, hvilket betyder, at ja, alt gik godt.
Her er hvad du ønsker.
>> Serveren type, indhold Motortype- det fortæller os, OK, du er
kommer til at få noget tekst HTML.
Her er længden af ​​det, og her er hvad du skal gøre med forbindelsen.
OK, så igen, afhængigt på de data, du er
beder om, afhængigt af, hvad server ønsker at vende tilbage til dig,
du kan have flere af disse felt navne, har du måske mindre.
Fuldstændig kontekstafhængig.
>> Og så vidt denne status kode, selvfølgelig,
200 er ikke den eneste du kunne have, ikke?
Vi har masser af statuskoder.
Er der nogen der kan huske nogen af ​​de andre, at vi er nævnt i foredrag?
Mange af dem begynder med 4.
>> PUBLIKUM: 404.
>> ALLISON Buchholtz-AU: 404, som er?
>> PUBLIKUM: Filen blev ikke fundet?
>> ALLISON Buchholtz-AU: Fil ikke fundet.
Præcis.
Så hvad med 403?
PUBLIKUM: Forbudt.
ALLISON Buchholtz-AU: Forbudt.
Så hvad tror du det betyder med chmods?
>> PUBLIKUM: Det betyder, at du har ikke tilladelse til at læse den.
>> ALLISON Buchholtz-AU: Præcis.
På en eller anden måde, behøver du ikke tilladelse til at få adgang til det, right?
Så 404, 403.
Der er en virkelig sjovt en, som vi altid
introducere hvert år at Jeg burde have sat op her,
ligesom 413, som er jeg er en tepotte.
Du kan google det.
Det er sjovt ligesom, der er kode 413, og det er jeg er en tepotte.
Som jeg ved ikke, hvorfor du ville nogensinde får brug for at på internettet,
men jeg sidespring.
PUBLIKUM: Måske er du en te potten.
ALLISON Buchholtz-AU: Måske serveren er en tekande.
Hvem ved?
Okay, så vi er ved at overgangen til rigtige kodning.
Jeg føler at du fyre kommer til at komme ud af her temmelig hurtigt.
>> PUBLIKUM: Hvorfor gør det sige "server: to gange?
>> ALLISON Buchholtz-AU: Hm?
Server to gange?
Det er et godt spørgsmål.
Jeg er ikke sikker.
Jeg vil finde ud af, og Jeg vil emaile dig alle.
>> OK, alle andre spørgsmål udover det?
Godt?
Cool.
>> HTML og CSS, og nu er vi komme til alle de sjove dele.
Så som jeg nævnte før, HTML er formentlig en af ​​de ting,
du fyre er mest fortrolige med.
Så vi har HyperText Markup Language.
>> Den bedste måde at lære denne-- jeg ikke have nogen forberedt dias eller noget
til jer med HTML.
Det er virkelig om at lære syntaksen.
Og hvis du var i MySpace dag, ville du have det ned.
>> Så virkelig, den største ting er bare for at øve og eksperimentere.
En af de store ressourcer, jeg ville stærkt anbefales at bruge er W3Schools.
Så bare W, 3 og derefter Schools.
De har en masse af ressourcer på HTML, på CSS,
og de faktisk har en split screen slags ting
hvor de vil give dig eksempel kode.
Du kan rode med det, ændre det, og tryk på Update,
og det vil vise dig, hvad det faktisk gør til websiden.
>> Så vil jeg stærkt anbefale at bruge det.
Det er temmelig cool.
Du vil ikke få SEG fejl her, når tingene går galt.
Hvis du formår at få en seg fejl med HTML,
lad mig vide, fordi jeg er kommer til at blive virkelig fascineret.
Men det er virkelig cool, fordi du kan ændre tingene,
du kan se dem opdateret levende.
Og jeg tror du vil få en meget mere intuitiv forståelse af HTML
hvis du rent faktisk bare bruge lidt tid på at eksperimentere med det.
Så det er derfor, jeg sagde, praksis og eksperiment.
>> Google, herfra på ud, vil sandsynligvis være
en af ​​dine bedste ressourcer og venner.
Eller Bing-- Jeg arbejder hos Microsoft, så måske jeg skulle sige Bing.
Men stort set alt er bare at være syntaks,
så forstå, hvad tags er, understanding-- mindst med CSS--
hvordan man kan ændre visse egenskaber.
Det vil være super nyttig.
>> Så selvom vi ikke har tilberedte ting,
vi har sådan nogle bedste praksis at vi ønsker jer til at prøve og overholde
by-- eller rettere, bør du overholde indtil videre.
Så lukke alle dine tags.
Forhåbentlig alle has-- ved du hvad, hvis dette ikke giver mening lige nu,
Jeg lover, at det vil give mening når vi kodning op på siden.
Men luk alle dine tags.
Så hvis du nogensinde har nogle header, der er beslag,
H1, beslag, så sørg for at når du er færdig med det,
du lukke denne header.
Valider din side med W3 Validator.
Hvis du ikke lukke dine tags, du kan få uventet adfærd.
Det vil sige, at din side er ugyldig hvis du kører det gennem denne validator.
Så når i doubt-- og især på denne uges og næste uges
pset-- på samme måde, som vi beder dig at bruge kontrollere 50 og stil 50,
du kunne tænke på denne som en af ​​dine checks, OK?
>> Så hvis det ikke passerer W3 Validator.
Det er noget, vi vil forankre dig på.
Eller jeg fortæller dig ret nu, jeg vil forankre dig på.
Så sørg for at det validerer.
Det er ikke svært.
Du skal bare indsætte i din kode og det vil enten sige god job
eller du mangler noget på samme måde
at stil 50 fortæller dig hvor du griseri oppe.
>> Og så en sidste ting er du vil adskille
din markup, som er alt, HTML eller din tekst, og din styling.
Så vi vil gøre et eksempel af denne ret efter dette.
Så HTML og CSS skal være adskilt.
Og vi kommer til at tale om MVC, som er Model View Controller,
næste uge.
Du fyre bør formentlig lære om det i foredrag
i morgen, hvis du havde allerede lært det i dag.
>> Og det er bare lidt et paradigme, som vi har en tendens til
til at bruge, når du opretter web sider til at adskille tingene ud.
Du kan tænke på det på samme måde at vi har en tendens til at adskille funktioner i C
hvor vi hash at finde ting.
Det er bare en måde at gøre dit liv lettere.
Det adskiller sig attributter eller kode, du ville bruge igen og igen,
men på denne måde, den slags af holder det pænt og ryddeligt.
Og hvis du ønsker at ændre én ting, du ændre det én gang
og det er ændret andre steder.
Så det er mere for din lethed og fleksibilitet.
>> Så med CSS, det er meget ens til HTML, men i stedet for tags
som jeg nævnte for lidt siden, vi bruge, hvad der kaldes vælgere.
Og de dybest set bare lidt af knytte en bestemt tag
i HTML med forskellige attributter.
Og når jeg siger attributter, mener jeg ting som skrifttype farve, typografi,
farven af ​​baggrunden, farven på din tekst.
Den slags ting.
Ligesom hvis det er centreret, hvis det er ud til højre,
hvis det er inverted-- alle af disse seje ting.
Eventuelle stilistiske ting at du gør til din tekst,
dette er, hvad jeg mener med attributter.
>> Og derefter to vigtigste ting at vide, er, at selectors-- to af de vigtigste factors--
er id, som er unik.
Du kan kun bruge det til én ting.
Ellers går det til at råbe på dig.
Og når vi definerer det i en CSS-fil, vil det
være hash-id og derefter hvilke attributter vi ønsker.
Jeg lover, at vi kommer til at gå gennem et eksempel.
Det vil gøre en masse mere mening.
>> Klasse kan henvise til flere blokke.
Så du kan få din første og tredje afsnit
har den samme slags egenskaber, hvis du forbinder dem med den samme klasse.
Og når vi definerer dem i CSS, gør vi en prik klasse,
med klasse er hvad du ønsker det at blive navngivet.
>> Så jeg ved, at dette er det rigtige nu meget abstrakt.
Det er derfor, vi kommer til at kode.
Jeg ved, du fyrene elsker det, og du er alle
kommer til at hjælpe mig, fordi dette er din webside.
Dette er vores sektion webside, gutter.
Så er der nogen spørgsmål, før jeg slukke PowerPoint, eller noget
du vil have mig til at rulle tilbage til før vi begynder kodning?
>> PUBLIKUM: Når du siger match-tags, mener du selektorer eller tags?
ALLISON Buchholtz-AU: Du kan tænke på dem som den samme ting.
Det er bare forskellige ord.
Jeg mener, ligesom vælgere.
Men selektorer også kort til tags.
Så du kan tænke på dem som effektivt det samme.
Jeg lover, at det kommer til at gøre mere mening, når vi kode.
Noget fra PowerPoint eller eventuelle spørgsmål
lige nu, før vi faktisk skabe vores sektion side?
Alle klar?
Cool.
>> Så jeg har en gang.
Lad mig øge skriftstørrelsen for jer.
OK, så lige nu vil vi bare have en skelettet webside her.
>> Vi har nogle HTML.
Vi har nogle header, som vi se her som eksempel webside.
Nogle titel, nogle skrifttype.
Disse er tags, OK?
Så når jeg mener lukke dine tags, ser vi her dette beslag hoved er din åbning
tag, og dette beslag / Hoved er at lukke det, OK?
>> Så du kunne tænke på dette som dine seler i dine hvis forholdene
eller din for sløjfer.
Hvis du har et i begyndelsen, du vil have en i slutningen.
Det vil stadig arbejde det meste af tiden hvis du ikke har en lukket tag,
men bedste praksis er at lukke dine tags.
>> Så i dette tilfælde, lad os ændre dette.
Vi bliver nødt til afsnit syv.
"Afsnit webside."
Så jeg bare kommer til at ændre dette.
>> Og hvis vi gå over her, og vi reload-- mĺ gemme og reload--
Vi bemærker, at op her det ændret, right?
Cool.
Så dette ændrer titlen.
Dette er hvad der nu er på din fane.
>> Så dette er en slags søger slags kedelige.
Jeg ved ikke om fyre.
Jeg tror, ​​vi vil noget andet her.
>> Så det, vi kan gøre, er det header er der bare.
Lad os gøre en slags krop.
Så vi har nogle krop her.
Jeg gør altid åben og lukker mine tags til at starte,
på samme måde, som jeg gør seler.
Ah.
Vent, hvad?
>> PUBLIKUM: [uhørligt].
ALLISON Buchholtz-AU: Ah.
Du fyre fik mig.
Godt stykke arbejde.
Guld stjerne.
>> OK, så vi har nogle organ her.
Og lad os nu begynde med at tilføje noget tekst.
Så du har et par anderledes muligheder for at tilføje tekst.
Vi har ting som overskrifter.
Vi har bare normal tekst.
Så lad os bare starte med en header.
Faktisk, hvis du fyre ønsker at trække op W3 School HTML,
du kan slags se dig omkring og hvis der er noget
især, at du ønsker at afprøve med denne webside, kan vi gøre det.
Så i dette tilfælde, lad os bare gøre nogle h1.
Så h1 er ligesom den højeste header.
Det vil give dig noget der er meget stor og fed.
>> Og i dette tilfælde, hvad ønsker vi for den første tekst på vores webside?
Noget.
Du fyre kommer til at skabe dette.
Jeg bare at skrive.
PUBLIKUM: Velkommen.
>> ALLISON Buchholtz-AU: Velkommen.
OK, så hvis vi gemme det, og vi genindlæse, vi har en stor stor velkommen.
Så bare så du kan se den forskelle, lad os gøre noget på H6.
Hvad ønsker vi lige her?
Right?
>> OK, så bare så kan du se forskellen.
Yeah, Sublime.
Så hvis du bemærker, h1, meget, meget stort.
h6, ligesom fed, men meget mindre, og du har alt i mellem.
Så du kunne have h2, h3, h4.
Og disse er blot overskrifter, så hvis du forsøger
at oprette en webside, har forskellige sektioner,
måske du ønsker at bruge overskrifter derinde et sted.
>> Cool.
Så vi vil tilføje nogle mere ting i vores krop.
Jeg kan se, at det vil være så venlig cool, hvis vi havde et billede.
Jeg føler mig som alle kunne bruge måske en sød bunny billede lige omkring nu,
så vi kommer til at finde en kanin billede først.
>> Jeg ved ikke, hvis du fyre har nogen præferencer, som vi ønsker.
Har du nogen præferencer?
Denne ene her?
Down.
OK.
Det ene er det.
Gode ​​valg.
>> OK, så vi kommer til at se vores image.
Kig på det.
Kig på den bedårende ting.
Hvordan kan du være ked af på en mandag med dette?
>> Så vi bare at kopiere billedet URL.
Og hvad vi ønsker at gøre, er, lad os bare sige, at vi har nogle p for stykke.
Vi kommer til at sige "Look se på de søde bunny.
d'awwww ".
Jeg elsker mine kaniner.
Jeg har en kanin derhjemme.
Jeg savner min kanin.
Så det, vi kommer til at do-- Jeg ved ikke, hvis du fyre ønsker
at google denne-- men med HTML, hvordan kan du medtage et billede?
Bogstaveligt, hvis du google "Indbefatter billede HTML,"
Hvorfor tager du ikke fyre fortælle mig hvad dette mærke skal være?
>> PUBLIKUM: img source--
>> ALLISON Buchholtz-AU: img source--
PUBLIKUM: --equals--
ALLISON Buchholtz-AU: --equals--
PUBLIKUM: --quote-- ja.
ALLISON Buchholtz-AU: Perfect.
Dejligt.
Se, MySpace generation, right?
Publikum: Neopets.
ALLISON Buchholtz-AU: Neopets.
Åh, OK.
Wow.
Det har været vanvittigt.
OK.
>> Så sørg for at jeg får denne ret.
Cool.
Så det bør være her.
Og derefter, hvis vi genindlæse, har vi vores bunny på siden Er det ikke sød?
>> Dette er så søde.
Du har valgt en stor, stor foto.
Jeg grave det.
>> OK, så vi har denne bedårende bunny nu.
Vi var i stand til at tilføje en billede, ligesom det.
Så dybest set, hvis der er et billede du vil føje til din webside,
du kan tilføje det ligesom dette.
En anden ting ville være, hvis du har billedet gemt
i den samme mappe som denne fil, kan du bare
skrive, hvad navnet på denne billede er i stedet for at have en web-link.
>> Det vil stadig være i anførselstegn.
Det ville bare være ligesom hvis vi havde navngivet denne--
hvis billedet var blevet gemt i mappen med HTML-fil
at jeg redigere og det blev kaldt bunny.jpg.
Vi kunne også gøre det og det ville dukke op.
Men jeg har ikke dette gemt i filen, og jeg ønsker at holde bunny,
så vi kommer til at holde forbindelsen.
>> PUBLIKUM: Hvad er rabbit.org?
>> ALLISON Buchholtz-AU: rabbit.org.
Det er en appropriate-- se, du kan vedtage det.
Adoption.
bunny.jpg.
Jeg ønsker at vedtage denne bunny.
Åh, gud, det er så søde.
>> OK, så vi har tilføjet overskrifter.
Vi har tilføjet et billede.
Naturligvis har vi tilføjet noget tekst her, right?
Hvis vi ønskede at tilføje andre tekster, vi ville gå sådan her.
Så dette er et andet stykke.
>> Og vi siger "dette er en anden stykke."
Også, jeg er en forfærdelig speller, så jeg kan staver ting.
Bare FYI.
>> Så vi har en anden afsnit her, right?
Så måske du ønsker at gøre noget lidt mere interessant end blot
har alle din tekst, ligesom højrejusteret.
Måske du ønsker at centrere din tekst, OK?
>> Så hvis nogen ønsker at bruge dem, handy computere foran dig
og fortæl mig, hvordan du er kommer til at centrere denne tekst,
>> PUBLIKUM: p align.
>> ALLISON Buchholtz-AU: So p align lig med "center".
Han dræbe det, gutter.
Y'all er nødt til at optrappe.
Og vi har "Dette er centreret."
Og nu har vi noget centreret.
>> På samme måde, hvis du ønsker det venstrejusteret,
du kunne gøre Juster ligemænd venstre, align lig ret.
Helt op til dig.
Hvis jeg gjorde her, så er dette should-- nu er det højrejusteret.
>> PUBLIKUM: Allison?
Ved image source, hvorfor ikke der tæt på IMG kilde?
ALLISON Buchholtz-AU: Undskyld.
Dette bør være der Nu er du god.
Nu er vi godt.
PUBLIKUM: Har du ikke at lukke det der, eller ej?
ALLISON Buchholtz-AU: Nå, så img kilde, er denne ene bare-- med billede,
det er bare ses som et element, hvorimod hvis du bemærker for resten af ​​disse,
vi har nogle tag derefter information, det vedrører, og derefter en afsluttende tag.
Men med billedet, alt er lige slags selvstændig.
Cool.
Så du fyre vide, hvordan du opretter en header, du ved, hvordan du indtaster tekst,
du ved, hvordan man kan sætte et billede i nu, kan du justere ting.
>> En anden ting, som du måske ønsker at være i stand til at gøre
er at oprette en liste i CS-- vi er slags går ind i næste uges pset.
De ting, som vi typisk underviser i denne uge
går rigtig godt med næste uges pset, så vi er
slags blanding, overlappende ting her.
Men det vil være nyttigt for næste uge.
>> Så hvis vi ønskede at skabe nogle liste, hvordan kan vi gøre det?
Du kan ikke svare på dette tidspunkt.
Nogen har til.
Det er ikke svært, gutter, lover.
Google "uordnet liste HTML."
Hvad var det?
>> PUBLIKUM: [uhørligt].
ALLISON Buchholtz-AU: Right.
Så ønsker vi, ordnet og uordnet?
Lad os gøre en uordnet.
Så vi har nogle ul, som står for usorteret liste.
Og hvad har vi for hvert element?
Betyder det skal have sin egen tag?
Kan vi bare begynde at skrive ting?
>> PUBLIKUM: li.
>> ALLISON Buchholtz-AU: li.
Så hvad er vores liste kommer til at være?
Hvad ønsker vi her?
Vi skal bare gøre navne.
Bare gør Jakob.
>> PUBLIKUM: kanin fødevarer.
>> ALLISON Buchholtz-AU: Kanin fødevarer.
OK Jeg kan godt lide dette.
Kanin fødevarer.
>> OK, så vi har gulerødder.
Jeg kan lide denne kanin tema.
Jeg grave det en masse.
PUBLIKUM: Faktisk troede jeg at Jakob ville være en legit.
ALLISON Buchholtz-AU: Jacob?
Jacob er kaninfoder.
Hvis du så Jakobs foto fra kontortid,
du måske have troet, han fik angrebet af en killer kanin.
>> PUBLIKUM: Jeg har en kanin nu.
Jeg har en killer kanin nu.
>> ALLISON Buchholtz-AU: Are you kidding me?
>> PUBLIKUM: Jeg vil bringe det næste afsnit.
Jeg har det.
>> ALLISON Buchholtz-AU: Det er latterligt.
Anyway.
>> PUBLIKUM: [uhørligt]
>> PUBLIKUM: Ja, min proctor har en kanin samt.
>> ALLISON Buchholtz-AU: Jeg vil have en kanin.
OK, hvem bringer en reel kanin til næste afsnit samlede brownies punkter.
PUBLIKUM: [uhørligt]
PUBLIKUM: Åh, det er ikke reel.
Det er en udstoppet kanin.
>> ALLISON Buchholtz-AU: Oh yeah, kan vi lukke disse.
Ser rad.
PUBLIKUM: Er det egentlig noget?
ALLISON Buchholtz-AU: Det gør det ikke.
Med de fleste af disse ting, behøver du ikke lukke tag,
99% af tiden noget dårligt sker til at ske, men det er god stil, også.
Så Jakob.
Og vi har salat.
PUBLIKUM: For links, det er virkelig vigtigt.
ALLISON Buchholtz-AU: Hm?
PUBLIKUM: For hyperlinks.
ALLISON Buchholtz-AU: For hyperlinks.
Ja, hyperlinks brug for det.
OK, så lad os se her.
Og vi har tæt på vores liste.
Og vi ser på det.
Vi har all-- Jacob, lige der.
Kaninfoder.
Minder mig om Bunnicula.
>> PUBLIKUM: [uhørligt]
ALLISON Buchholtz-AU: jeg bringer tilbage al den gamle skole referencer i dag,
er jeg ikke?
Bare alle de gamle skole referencer.
Skulle have bragt ligesom Gogurts eller noget for snacks.
>> PUBLIKUM: Or Gushers.
ALLISON Buchholtz-AU: Oh.
OK.
Jeg vil se om jeg kan spore ned Gushers for næste uge.
Jeg tror, ​​jeg kan gøre det.
Jeg tror, ​​vi kunne have nogle på kontoret.
>> OK, så vi har dækket en masse forskellige ting, du kan gøre med HTML, right?
Og som du nok kan se, er det nothing-- forhåbentlig ikke alt for intim--
hvis det er, mener jeg ikke at nedgøre nogen.
Hvis du har problemer, bedes komme tale til mig.
>> Men det meste af det er bare ser på syntaksen, right?
Hvis du ønsker en uordnet liste, hvis du ønsker en slags liste,
hvis du ønsker at justere noget eller format noget, det handler om bare
slags kigge op syntaks for HTML, right?
Og én ting, der er pretty cool faktisk
er, hvis du går at-- lad os se, hvad er en nice hjemmeside, som vi kan lide?
Nogen der har nogen foretrukne hjemmesider der er OK at opdrage online?
Ved du hvad, lad os bare gøre CS50.
Det er rart og sikkert, right?
>> OK, så CS50 her.
Åh se, er der en sektion lige nu.
Hvis du kan lide den måde, det ser ud.
>> PUBLIKUM: [uhørligt].
ALLISON Buchholtz-AU: Vi er ikke vil gøre meta sektion, gutter.
Det sker ikke.
Det ville være cool, men vi ikke kommer til at gøre det.
>> Så hvad gør du kunne gøre, hvis du kan lide den måde
dette virker, er du altid ret klikke på en webside, som du kan lide
og du kan gøre View Page Source.
Det vil bringe op alle HTML.
Og det er faktisk en rigtig god måde at style din egen webside.
Gå til en webside, som du virkelig gerne og se på HTML
og regne ud, hvordan de gjorde det.
>> Og bogstaveligt, så længe som du nævner ting,
så længe du ikke bare stjæle fra folk, det er OK.
Især for CS50 [? finansiere?], er vi
slags forventer du at få inspiration fra anden hjemmeside.
Så velkommen.
Kig gennem hjemmesider, du synes er virkelig smuk
og finde ud af hvordan de bruger HTML og CSS til at gøre disse ting.
>> Så som du kan se her, er der naturligvis ligesom links og vi har en klasse her.
Vi har et link her.
Vi har en liste.
Vi har sandsynligvis nogle billeder i her et sted.
>> Vi har fået nogle cool stil her.
Dette er den næste ting vi kommer til at gøre.
Så stil, når du ser disse stil parentes, det er CSS dybest set.
Ben, har du et spørgsmål?
>> PUBLIKUM: Hvad er div?
>> ALLISON Buchholtz-AU: div er lige en-- hvad er div?
PUBLIKUM: Division.
ALLISON Buchholtz-AU: Division.
Ja, det er ligesom adskillelse af forskellige elementer.
OK, så her er, hvad vi er gå i næste.
Så det kan ikke være den bedste stil, fordi, hvis du bemærker
vi har HTML og stil i samme side, og vi faktisk ønsker at adskille dem,
OK?
Og lad mig faktisk åbne op for min rigtige
fordi dette formodes at være PDF, så vi har style.css.
>> Så hvad vi kan gøre her er disse er cool ting som nogle fade
og vi kunne forsøge at gøre det, men jeg føler ligesom jeg ville rod, op på flue,
så jeg vil opfordre jer til gå prøve det på egen hånd,
men jeg har ikke tænkt mig at gøre det lige nu.
Så hvis du fyre, så husk, hvis du nogensinde ramt problem sæt,
noget styrtdykker i fra siden.
Det har at gøre med fade og overgangen og whatnot.
>> PUBLIKUM: Og det er alt CSS og HTML?
>> ALLISON Buchholtz-AU: Alt CSS og HTML.
Ja.
Så du kan gøre en masse virkelig seje ting med CSS og HTML.
Så med vores awesome bunny webside her, vi
kommer til at gøre lidt bit af CSS styling med det.
>> Så hvis du nogensinde har en stil ark, som vi har her,
du kan bare ringe style.css.
Du kan kalde det hvad du vil.
Hvad der er vigtigt er, at vi vil at referere det i vores web.html her.
>> Så hvad vi skal gøre, er at we-- så jeg ikke rode dette up--
vi kommer til at forbinde disse to filer sammen.
Så i samme way-- jeg har tænkt mig at drage en analogi til C her.
På samme måde, som hvis du har nogle library-- og vi har cs50.h--
vores compiler forbinder det.
Dette er blot et eksplicit link på vores side.
Så på samme måde, som vi gør hash omfatter nogle fil, hvad
Jeg er ved at skrive er lige HTML / CSS svarer til det.
>> Vi siger bare, OK, denne webside kommer til at bruge dette stylesheet, OK?
Så vi har link rel lig stylesheet.
Og så har vi typen, css.
Og derefter href lig.
>> OK.
Så alt dette gjorde her er du kan tænke på dette som det samme
som en hash omfatter.
Naturligvis det ser lidt mere kompliceret, men i alle tilfælde,
det er effektivt det samme.
Så dette er blot nogle sammenkobling af en style sheet, det er af typen tekst / css,
og navnet på det er style.css.
>> Hvad er vigtigt at vide er, at den webside
at jeg arbejder ret nu-- web.html og style.css-- er i samme mappe.
Fordi der i forskellige mapper, du nødt til at give den faktiske rod
til det, eller stien til den.
Men i dette tilfælde, vi holder det super enkel og det kommer til at være her.
Så hvis vi gør det, jeg har nogle ting allerede stod i kø her.
>> Så vi har nogle organ, som vil at have vores baggrundsfarve, som
lige nu er lyseblå.
Vi kan ændre det, hvis vi vil, men hvis jeg husker det korrekt,
det skal bare ændre det til lyseblå.
Og nu har vi en lyseblå baggrund.
Og vi havde her-- kan nogen huske hvoraf den ene er hash-id eller klasse?
>> PUBLIKUM: ID.
>> ALLISON Buchholtz-AU: ID.
Cool.
Så hvad vi ønsker at gøre hvilken af ​​disse fonte
eller which-- ønsker vi "Se på den søde bunny "for at være lilla?
Jeg tror, ​​vi ønsker at det skal være lilla.
Jeg er temmelig ned med det at være lilla.
>> Så hvad du skal gøre er du gør ID equals-- i dette tilfælde
Jeg sagde, hvad, smuk farve her.
Vi genindlæse.
Pludselig, det er lilla.
OK, så med ID, husk det skal være unikt,
så jeg bør aldrig være hjælp dette id andre steder.
Men med klasse, som vi har her med en smuk skrifttype,
Jeg skulle være i stand til at bruge at overalt jeg vil.
>> Så lad os gøre denne ene her.
Så vi kan sige klasse lig temmelig skrifttype.
Og hvis vi ser nu, har vi denne cool smukke skrifttype her.
Så måske jeg ønsker at gøre begge dele.
OK, jeg faktisk ikke vide, om dette er kommer til at arbejde, men jeg vil gerne prøve det.
Og dette er, hvordan du lærer CSS og HTML.
Du er ligesom, du ved hvad, jeg ønsker at prøve dette.
Jeg er ikke sikker på, om det kommer til at fungere.
Lad os se om det virker.
>> Og se på det.
Nu er det i lilla og det er en temmelig skrifttype.
OK, så du har alle disse forskellige ting, du kan gøre.
Har du et spørgsmål?
>> PUBLIKUM: Ja.
Nå, ligesom farver du bruger er ord.
Er der en måde at gøre farver med den hexadecimale RGB?
ALLISON Buchholtz-AU: Du kan også gør det med hexidecimal, tror jeg.
Ja.
Men det er lidt rart, hvis du ønsker ikke at slå dem op.
Du kan bare være ligesom, lilla eller blå.
PUBLIKUM: Lad os håbe, at de vide, hvad det betyder.
ALLISON Buchholtz-AU: Right.
Så lad os gøre denne læse- eller chartreuse.
Hvorfor ville du nogensinde vælge chartreuse?
Det er en interessant farve.
>> OK, så selvfølgelig kan vi se, vi kan ændre på tingene, men vi ønsker.
Hvis du ønskede at create-- lad os sige Vi ønskede at skabe en anden klasse.
Hvad kan du fyre ønsker at ændre?
Hvis du trækker op W3Schools ' CSS dokumentation,
Jeg overlader ordet til jer.
Vi kan forsøge at gøre noget cool med dette i de sidste par minutter.
Fordi jeg har slags givet dig en Lynkursus på en masse fede ting
at du kan gøre.
Men i sidste ende, som jeg sagde, hvis du bare eksperiment, vil du lære en masse.
>> PUBLIKUM: Har du kigger op på den skrifttype?
>> ALLISON Buchholtz-AU: Yeah, Jeg kiggede op på den skrifttype.
Så ligesom bogstaveligt, jeg gik at-- hvad gjorde jeg?
Jeg gjorde CSS liste over skrifttyper, og så jeg gjorde font stak,
og så var jeg ligesom, se, her er alle de seje skrifttyper, du kan gøre.
Og der var denne ene, så Jeg kopierede det til min clipboard.
Og så jeg var ligesom, OK, cool, der vi gå.
Alle gjort.
>> PUBLIKUM: Så du nødt til at sørge at CSS ved, hvad det skrifttype er.
>> ALLISON Buchholtz-AU: Ja.
>> PUBLIKUM: Hvordan er det at sige i slutningen?
Cursive?
>> ALLISON Buchholtz-AU: Cursive.
Ja.
>> PUBLIKUM: baggrundsbillede.
>> ALLISON Buchholtz-AU: baggrundsbillede.
OK.
Så du ønsker at fortælle mig, hvordan du gør dette.
Jeg overlader det til dig.
Jeg er bare at skrive op her nu.
Hjulet er i dine hænder.
>> PUBLIKUM: OK
>> ALLISON Buchholtz-AU: OK.
Hvad laver jeg?
>> PUBLIKUM: Doing-- Jeg ved, hvad kommer efter den krøllede parentes.
ALLISON Buchholtz-AU: OK.
Så sandsynligvis i kroppen, jeg ville påtage sig, fordi vi er
gør med baggrundsbilledet.
>> PUBLIKUM: Ja, lad os gøre det.
>> ALLISON Buchholtz-AU: OK.
PUBLIKUM: OK, så baggrunden kolon, og så vi
har brug for en URL-adresse af dette billede.
Måske pseudo-kode, for nu, måske.
>> ALLISON Buchholtz-AU: Hvad vil du have mig at--
PUBLIKUM: Jeg tænker som en GIF.
ALLISON Buchholtz-AU: A GIF?
Det kommer til at være interessant.
OK, hvad skal jeg googling her?
>> PUBLIKUM: Nej, det er dit valg.
>> ALLISON Buchholtz-AU: Hvorfor ikke we-- hvis det er en kanin,
Jeg føler, at vi bør have en dejlig græsplæne eller noget.
>> PUBLIKUM: Meadow.
En eng.
>> ALLISON Buchholtz-AU: A eng?
OK.
PUBLIKUM: Eller Rachel Maddow.
ALLISON Buchholtz-AU: Denne ene ser temmelig.
Åh, det er meget lille, selv om.
Vi har brug for en god størrelse billede.
Lad os se.
Åh, se.
Det er en temmelig eng.
Ved du hvad, jeg kan lide denne ene.
Lad os kopiere denne.
>> PUBLIKUM: OK, så jeg synes, det er URL, åbne parenteser.
>> ALLISON Buchholtz-AU: OK, URL.
>> PUBLIKUM: Så adresse.
>> ALLISON Buchholtz-AU: OK.
Er det alt, vi har brug for?
>> PUBLIKUM: Luk parenteser semikolon, og derefter plads, baggrund bindestreg
vedhæftet fil kolon faste, og krøllet parentes.
>> ALLISON Buchholtz-AU: OK.
Lad os se, om det virker.
Det kommer til at være temmelig sejt, hvis det gør.
Jeg er rigtig spændt lige her.
Det fungerede ikke.
Jeg spekulerer på, hvorfor.
PUBLIKUM: Måske URL skal være i citater.
ALLISON Buchholtz-AU: Måske.
Og dette er, hvordan vi lærer, gutter.
>> PUBLIKUM: Kan vi få baggrund farve og baggrundsbillede?
>> PUBLIKUM: Nej.
Den ene erstatter den anden.
>> ALLISON Buchholtz-AU: I dunno.
Lad os se.
Lad os tjekke det ud og se.
>> PUBLIKUM: Åh, måske, ja.
[Indskyde VOICES]
>> ALLISON Buchholtz-AU: OK, det er obviously-- jeg [uhørligt] her.
Så OK.
PUBLIKUM: Baggrund vedhæftet fil.
ALLISON Buchholtz-AU: Ah.
>> PUBLIKUM: OK, jeg ikke kender.
ALLISON Buchholtz-AU: Det ligner det burde virke.
Er du sikker på det er kolon efter URL'en?
>> PUBLIKUM: Nej, det semikolon.
ALLISON Buchholtz-AU: Det er semikolon.
PUBLIKUM: Har jeg sagt kolon?
ALLISON Buchholtz-AU: Du sagde et kolon.
PUBLIKUM: Åh nej.
ALLISON Buchholtz-AU: Der går du.
PUBLIKUM: Åh, vent, nu vi kan ikke læse teksten.
ALLISON Buchholtz-AU: Nu du kan ikke læse teksten,
men vi har baggrundsbilledet.
Mmhmm?
>> PUBLIKUM: Er HTML understøtter dynamisk indhold?
Ligesom, kan du ændre størrelsen på det billede afhængigt af vinduets størrelse,
eller at en CSS--
>> ALLISON Buchholtz-AU: Så CSS har at gøre det.
Så hvis du fyre er interesseret i at lære avanceret CSS,
Jeg co-undervisning en seminar om CSS på 7..
Og jeg lover, at det vil være meget mere i dybden
og gøre meget mere cool ting i dette afsnit.
Og min co-lærer er ligesom total frontend web dev master.
Så det vil være temmelig cool, hvis du ønsker at lære om alle de seje ting
at CSS kan gøre.
>> Men hvad vi har her med hans tilknytning baggrund
fixed-- så det er nogle fast size-- men du kan faktisk dynamically--
hvis du nogensinde se websider, som de fleste gode websider vil gøre,
når du justerer Størrelsen på din browser,
det justerer baggrund eller hvor meget viser eller genformaterer ting, right?
Så det er, hvad vi kalder relativ positionering.
>> Og CSS kan faktisk få fat i hvor stor din browser bredde er, eller hvor høj den er,
og du kan placere ting i henhold til de relative størrelser
versus absolutte størrelser.
Og det er naturligvis mere avanceret CSS, men det er noget, du kan gøre.
Hvis du ønsker at lære mere, så kom til mit seminar.
>> Så det er noget, du kan gøre.
Og CSS kan faktisk do-- CSS og JavaScript,
som vi vil komme ind på næste week-- kan give dig mulighed for dynamisk at ændre
sider uden at skulle genindlæse dem hele tiden.
Og du får at gøre nogle pretty cool stuff.
>> Så er der en anden ting at du fyrene måske ønsker at gøre
eller noget du ønsker at udforske?
Vi har 10 minutter tilbage.
Vi kan også forlade tidligt, men hvis du ønsker at gøre nogle flere web stuff,
vi kan, men jeg er ikke kommer til at tvinge dig til.
Men vi kan også bare spise slik.
PUBLIKUM: Fremhæv tekst hvid, så du kan læse den.
ALLISON Buchholtz-AU: OK.
Så i dette tilfælde, vi ønsker nogle s.
PUBLIKUM: Skal vi gøre det i krop, så den gælder for hele siden?
ALLISON Buchholtz-AU: Ja, det kan vi faktisk.
Det er en god idé.
Så vi have-- gøre dig vide, hvad vi skal være?
Jeg ved ikke, om vi kan gøre tekst farve.
Jeg ville prøve og oprette en anden klasse her.
>> PUBLIKUM: Hvordan får du så at den har forslag?
ALLISON Buchholtz-AU: So hvis du fyre er interesseret,
dette er en anden tekst editor kaldet Sublime.
Du bør være i stand til installere det på dit apparat.
Nogle gange bliver det lidt tricky.
Hvis du vil hjælpe med det, Jeg er super glad for at hjælpe dig
med det, fordi Gedit er stor og det er fantastisk, fordi du kan kompilere det
på bunden, men jeg virkelig ligesom Sublime, fordi det er temmelig
og det gør gøre tingene ligesom auto-komplet.
>> Så du kan helt sikkert velkommen til at lad mig vide, hvis du ønsker at gøre det.
Hvis du bare google "Sublime tekst, "det typisk
har instruktioner om, hvordan du installerer på forskellige operativsystemer.
Det er virkelig cool, jeg tænke, efter min mening.
Så s.
Jeg tror, ​​jeg kan bare gøre text-- eller vi kan bare gøre farven er "hvid".
Der.
>> Så hvad jeg gjorde her, er, at jeg ikke ændre hele teksten.
Men p her er bare en tag, vi har, ikke?
Dette stykke tag.
Så jeg har lige oprettet en CSS element, sagde, OK, noget med dette tag
p, gør farven hvid.
>> Så hvis du har bemærket, det gjorde denne hvide og denne hvide.
Det gjorde ikke gøre vores liste hvid, fordi det er ikke forbundet med dette.
Du kan gå igennem, og du kan say--
>> PUBLIKUM: Må baggrundsfarve.
>> ALLISON Buchholtz-AU: Baggrundsfarve?
>> PUBLIKUM: Baggrund for rør i farve hvor du sætter p tag.
>> ALLISON Buchholtz-AU: OK.
Du ønsker det hvide?
PUBLIKUM: Mmhmm.
ALLISON Buchholtz-AU: OK.
Der kan du gå.
PUBLIKUM: Det er underligt.
ALLISON Buchholtz-AU: Pretty cool, right?
Så hvis du bare rode rundt, du kommer til at lære en masse.
Og det kan være temmelig cool.
Jeg tror, ​​det er helt sikkert mere glædeligt end undertiden
fordi du ikke behøver at vente for dit program til at kompilere.
Du kan bare trykke Refresh og du er ligesom, åh, se,
det virkede, eller åh, jeg er sandsynligvis mangler noget.
Og det er noget, der er virkelig cool om den næste del af klassen,
er det er helt sikkert, jeg tror, ​​lettere at kontrollere
som du går langs vejen versus skulle skrive disse lange programmer
og ønsker og bede at det virker i slutningen.
>> Så med dette, tror jeg jer alle synes godt.
Hvis du har spørgsmål, som altid, komme tale til mig, kom lad mig det vide.
Jeg vil være lige udenfor for de næste 15 minutter
hvis du ønsker at chatte om noget og alting.
>> Så jeg håber du guys-- held og lykke med dette pset.
Fristen er fredag ​​ved middagstid fordi det blev udgivet sent.
Så jeg vil sandsynligvis være at se en masse af jer på torsdag,
men forhåbentlig ikke.
Måske vil du have det gjort inden da.
Jeg ville være super stolt.
>> Men hvis ikke, vil jeg se dig torsdag.
Du kan også bruge en sen dato udvider det til lørdag kl.
Men jeg don't-- hva?
>> PUBLIKUM: Halloween.
>> ALLISON Buchholtz-AU: Det er Halloween, a, b,
Jeg tror ikke, der vil være kontortid på fredag.
Så virkelig forsøge at få det gjort af Fredag, så vi alle kan fejre
Hallow weekend.
Okay, jeg kan se du fyre næste uge.