[Predvajanje glasbe] ALLISON BUCHHOLTZ-AU: Vse je v redu, vsi. Dobrodošli nazaj v oddelku. Torej, naša agenda za danes se dogaja nad veliko več web dev stvari. Ne vem, koliko od ste videli svoje psets saj je bila sproščena prej to jutro. Jaz bi, koliko ljudje Prebral spec, ampak ko vidim, kako ste imeli vse od kot sedem ur, da pogled na to in to je v ponedeljek in ste verjetno imeli razred, Bom domnevati, da večina od vas še ni. Če imate, dodatne sloves. Ste v bistvu pomaga izvajajo preprosto splet Strežnik v C, kar je čisto nov pset, tako fantje dobili, da bo na morskih prašičkih. To se dogaja, da je zabavno, divje teden ampak mislim, da bo zelo zabavno in to bo res dobra izkušnja pravzaprav. Tako da vas pripravijo da je v današnjem oddelka, smo šli chmod, TCP / IP, in potem malo HTML in CSS. 

Na koncu bomo dejansko koda gor enostavno spletno stran skupaj da bi vam pomagal fantje nekako priti bolj seznanjeni s tem. In potem, če še niste pobrali vaše kvizi, oni spredaj, vendar sem prepričan, vsi Tu ima svoj kviz. In tudi na to opombo, rešitve niso gor še, ampak takoj, ko bomo finish-- všeč, Zadnjih nekaj ljudi, ki jemljejo svojo quizzes-- oni bodo gor. Če imate vprašanja v tem času, vas prosimo, da email mi osebno. Bom odgovoriti z vašim osebnim vprašanja, kot vedno. 

Torej, na tem pojasnilu, chmod. Torej v bistvu vsi ti morate vedeti o chmod je, da jo uporabite, da spremenite Dovoljenja datoteke, kajne? Torej, to je le nekaj sistemov je poklical spremeni dovoljenja, kot piše tukaj. In če si kdaj želeli videti kakšna dovoljenja datoteko ima, namesto da samo delaš ls, bi lahko naredil ls -l. l stoji za dolgo. 

Torej boš naredil dolge sezname za vse, in to vam bo veliko bolj natančne informacij o posameznih datotek. In videli boste, something-- sem gre za preskok naprej za second-- vendar pa boste videli nekaj podobnega da top linija je za vsako datoteko. In bomo šli skozi, kaj to pomeni. 

Torej v bistvu, spremeniti vaši datotečni dovoljenj, si želite uporabiti chmod. Lahko si o njej mislijo kot katera koli druga UNIX pokličite kot ls ali cd ali drugih malenkosti. To je samo vrsta drugega kot klic. 

Torej delamo chmod in potem bomo imajo tri števke tipično. Obstaja nekaj načinov, kako to, od katerih je eden bomo šli čez. Vendar je običajno, da boste imeli tri številke variira od 0 do 7 Vsaka časa. 

Torej, ena stvar je, da obstaja tri različne dovoljenj da lahko damo vsako datoteko. In to je berljiva, kar je z r zastopa, ki bo smiseln v malo; w, ki je pisalnega; in izvršljiv, ki je x. Vem, da je e ena, program, morda ni najbolj smiselno, vendar smo ga bo zastopal pri x. 

In kaj se zgodi potem je vsak od teh imajo tudi zastopanje številko. Torej imamo 1, 2 in 4. In v bistvu kaj se zgodi, vsak izmed teh treh številk Tukaj ustreza druga skupina uporabnikov da ti dovoljenj nanašajo. 

Torej si lahko zamislite, da je prvi številka ustreza dejanskemu uporabnika ali lastnik datoteke, druga številka bo enak skupini, in zadnja nanaša na svetu, OK? Torej, kaj se zgodi, ne pozabite tistih numbers-- r 4, w je 2, x je 1, kajne? This-- če povzamem ti gor, ki vam omogoča, da prvo številko da bomo morda vhod v našem chmod. 

Torej, v tem primeru, kaj bi ta številka? To bi bilo 4 plus 2 plus 1, ki je 7, kajne? In v tem primeru te nimajo nič, tako da je to prav tu bi prevesti na chmod 700, OK? In kaj počne, da se ji podeli vse teh dovoljenj vašega uporabnika. 

Torej to pomeni našo uporabnika lahko počnejo, kar hočejo. Ki jih lahko bere to datoteko. Jih lahko izvaja to datoteko. Znajo napisati v to datoteko. Ampak skupina in svet, ni Dovoljenja nobenih, OK? 

Torej še en način, da bi napisal, da smo lahko naredi chmod treh številk, od katerih vsak ustreza kateri koli vsoto ali da posebna skupina je posebna podskupina. Ali lahko storimo dejansko še ena stvar. Počakaj. Mi lahko nekaj storiti z njimi tukaj. 

Koliko od vas videl zgled kjer je bilo všeč, da chmod plus x? Ste videli, da je v predavanju, mislim? Da stoji za vsem. To pomeni, da ga dajo za vse uporabnike, ki sem pozabil dati tukaj. 

Ampak plus x, če bomo Opazili tukaj, če delamo da chmod-- kaj skupina smo govorimo o plus dovolilnice želimo, da bi jih. Torej, to je lahko plus ali minus. Plus dodaja dovoljenje. Minus odvzame dovoljenje. Zelo intuitiven, mislim. 

Torej plus x pomeni chmod. Tako da spremenite dovoljenja za vse ljudi Če je to a-- add dovoljenj. In x-- to pomeni, kaj dovoljenje smo dodelitev vsem. Branje, pisanje, ali izvršitev? 

OBČINSTVO: Execute. 

ALLISON BUCHHOLTZ-AU: Execute. Zato dajemo vse uporabnike dovoljenja za izvajanje te datoteke, OK? Pa kaj, če smo želeli narediti da s številski obliki? Torej, ne pozabite s številčnico, želimo tri številke. 

OBČINSTVO: 4. ALLISON BUCHHOLTZ-AU: Kaj je to? OBČINSTVO: 4. ALLISON BUCHHOLTZ-AU: Not 4. OBČINSTVO: 0, 0, 4. ALLISON BUCHHOLTZ-AU: No, želimo dati vsem uporabnikom, kajne? Torej bomo imeli število v vsaki reži. To se dogaja, da Enako število v vsaki reži saj smo samo želim, da bi vsakdo izvršljiv dovoljenj. Torej izvršljiv je 1, ampak na pravi poti. 

Torej, če nismo chmod 111, da bi se enakovredno chmod plus x. Ali to smiselno za vsakogar? Smo šli skozi nekaj primerov. 

Tako velikem takeaway tukaj je ni tukaj, ampak samo pomeni, da daje vsem uporabnikom. u je, če si želite dati ali odvzeti posebno dovoljenje od uporabnik ali lastnik. g je za skupino, tako da srednji mestna. In potem drugi, si lahko zamislite kot po svetu, to zadnjo številko. 

Torej, s tem, bomo šli na primer, ker se počutim kot primeri vedno bi te stvari lažje razumeti. Torej rwx-- smo šli skozi this-- lahko prav tako predstavljajo kot 700. To je primer, smo pogledali na več slike. Torej chmod 444 na neki datoteki bi dal kakšna dovoljenja? Ste bili zelo blizu. OBČINSTVO: berljivi za vse. ALLISON BUCHHOLTZ-AU: berljivo. Tako berljiva za vse, kajne? In kaj potem je še en način za to? Če želimo narediti chmod bodisi r ali W, plus in minuse, kaj bi ta klic izgledal? To bi chmod kaj? 

OBČINSTVO: plus r. 

ALLISON BUCHHOLTZ-AU: plus r na 5. OK, tako da je to isto kot to, le dve različni prevodi za isto stvar. Torej, s tem, imamo te. Torej, želim vama, da poskusite in pisati te vrste v njihovem obratno. 

Torej z chmod 555, kaj bi bilo všeč? Bi bilo plus ali u plus ali malenkosti? Za u plus x, daj mi tri številke. In potem mi je povedal, kakšna dovoljenja smo dejansko priznanje za koga? 

Tako da vam bom dal fantje dve minut, da delajo na tem. Vas prosimo, da se pogovorite s seboj. Za tiste, ki ste prišli v malo pozno, je sladkarije in majice. Imamo tri srajce levo, in imamo Kit Kats in zvezdne vzorce. Zato vas prosimo, da pridejo zgrabi nekateri v tej mali premorom. 

Prav zadnja je zapleteno. To je dva chmods za zadnjega. Pravzaprav, naj zapre vrata vidva pa delajo na tem. Candy je vedno potrebno v ponedeljek popoldne. 

OK, tako chmod 555. Kaj je še en način, da bi lahko napisali, da je? Vse ideje? Da. 

OBČINSTVO: plus rx. 

ALLISON BUCHHOLTZ-AU: r plus rx. Ali želite, da pojasni, zakaj bi bilo treba RX? 

OBČINSTVO: Ker imate 5, tako da je 4 plus 1, tako da je prebral plus izvršljiv, in to je za vse. ALLISON BUCHHOLTZ-AU: Right. Torej samo ponoviti, 5 tukaj poznamo kot vsota 4 in 1, saj vsaka številka v našem triu je Vsota dovoljenj za podskupino, kajne? Bodisi si, skupina, ali svet. Torej, v tem primeru pa vemo, da 5 mora biti oblikovana s 4 in 1. 

In 4 in 1 ustrezajo berljiva in izvršljiv. Mi smo ga daje za vse, tako da lahko naredimo chmod plus rx. In seveda, smo samo šli skozi vprašanja tam, tako da zdaj ta datoteka izvedljiva in berljiva za vse. 

Torej, kaj drugega pa? Kaj bi se lahko število, da je ena biti? Vse ideje? Pojdi naprej. 

OBČINSTVO: 100 [neslišno]. 

ALLISON BUCHHOLTZ-AU: 100. Točno tako. Torej hočeš, da pojasni, zakaj 100? OBČINSTVO: Ker je za uporabnik, tako da je na prvem mestu. In potem x izvršljiv 1. ALLISON BUCHHOLTZ-AU: Točno tako. Zato smo podelitev izvršljiv Dovoljenja do pravičnega uporabnika. Torej v tem primeru, bi bilo 100. In imam vse odgovore navzgor na naslednji diapozitiv v primeru pišete veliko stvari navzdol. 

OK, tako da je ta naslednjič dejansko opravljeno z dvema chmods, lahko to storite. Torej, ali ima kdo kakšno idejo, kako bi lahko dobili chmod 640 predelajo na drug način? Spremenite lahko uporabnik najprej in potem lahko spremenite skupina je moj namig. 

Torej, če smo le spremembo uporabnik, ki je ta prva tod kaj bi lahko naš klic bilo? Torej si je u, kajne? Torej u chmod plus, kaj? Mmhmm? 

OBČINSTVO: rw. ALLISON BUCHHOLTZ-AU: rw. Desno, za branje in pisanje, ker prebrane je 4, w je 2, tiste vsota skupaj kot 6. Tako smo dobili chmod u plus rw, in smo dobili našo prvo 6 tam. 

Torej, da bi dobili 4, hočemo sedaj da spremenite svoje nastavitve skupine. Tako bomo storili chmod g plus kaj? Kaj je 4? 

OBČINSTVO: r. ALLISON BUCHHOLTZ-AU: r. Prav. Tako da smo kar na lastnika brati in pisati dovoljenja in mi daje skupinsko branje Dovoljenja, ki jih imamo vsi tukaj gor. Mmhmm? 

OBČINSTVO: Če lahko napisali nekaj, tako ne pomeni, ga lahko izvede? 

ALLISON BUCHHOLTZ-AU: You lahko pišete na something-- Ne verjamem, da je to pomeni, ga lahko izvrši. Cool. Tako, da je vse, kar smo pravkar šla skozi. Torej, o tem naslednjič, to je samo vrsta skupnih zadev da želite, da ostanejo v moti pri nastavite vaš problem. To so običajno dovoljenja, da mi je všeč, da jo uporabite. 

Torej za 711, ki daje nas, seveda, si vseh dovoljenj, ki ponavadi smisla. In potem je to izvedljivo s skupina na svetu, ki ima smisel Če imate nekaj imenik, želijo biti sposoben prečkati vanjo. Ljudje potrebujejo dostop. 

Za katero koli non-PHP datoteke, boste za uporabo 644, ki bi naredil kaj? Kaj to pomeni, ali kaj Dovoljenja pa to dal? Torej lastnik lahko kaj? OBČINSTVO: branje in pisanje. ALLISON BUCHHOLTZ-AU: branje in pisanje. In potem skupina in drugi lahko samo brati, kajne? In nato chmod 600 za katero koli PHP datoteke, ki jih uporabljate, tvoj lastnik, še enkrat, lahko brati in pisati ampak vsi ostali, je le nekako blokiran. 

Torej, to bo dejansko bolj koristno, če prideš na vašo težavo nastavite naslednji teden, ko ste dejansko izgradnjo spletne strani. Torej, če ste že kdaj zašli v vse čudne težave kjer to ni nakladanje pravilno, morda vam morali dodati izvršljiv dovoljenje, ali pa boste potrebovali za branje ali pisati dovoljenje. Malo stvari, ki se nagibajo k potovanje ljudi gor, ampak to je nekako kot go-to ko začnete pset naslednji teden. In ti bi dal več namigi o pset ta teden, vendar imam še pogled na to, ker pa je izšla danes zjutraj. Vendar me po e-pošti, sem se pogledal pri tem ko sem se odzove jutri. 

Torej sedaj, so vsi dobri z chmod? Morebitne dolgotrajne vprašanja? Precej preprosta. Samo nekako sledenja kaj branje, pisanje in izvajanje številke je verjetno najtežji del. 

Torej s TCP / IP, vseh teh protokolov, nekako kot pri podatkovnih struktur prejšnji teden, to je veliko bolj pomembno, da nekako znebiti višja raven intuicija od njih. To ni CS143 kam gremo vas prosimo, da izvaja omrežje, tako da bo v redu, če ti ne razumeš gnjidama kašaste vseh protokolov. Kaj je pomembno razumeti, je nekako kot tisto, kar predstavlja in zakaj so pomembne. 

Torej TCP / IP, seveda, da je Transmission Control Protocol ali Internet Protocol, ki je v bistvu samo skupek zakonov bistvu ali standardi, da poveste podatke kako je treba ravnati, kako jo je treba packetized, prenašajo, in prejela. Tako da v bistvu, tako kot njega Tukaj piše, povečuje možnosti da so podatki, kjer dobi si želim, da bi dobili. 

Prepričan sem, da če vidva šla Predavanje ali ga gledal na spletu, je has-- Ne vem če je to storil letos, vendar sem lani veste, je imel demo, kjer je imel sliko Rob in ga je razdeljeno na štiri in ga dal v kuverte in skušal priti čez Sanders. In lahko nekako pomislite, da na ta način. To je samo skupek pravil, ki povej podatke, kako priti nekam in vam omogoča, da veš, če vam manjkajo podatki, na enak način, če ste ob več strani opomb in jih označiti s strani 104 strani 204, in greš nazaj na študij kasneje in vam manjka something-- ne najdete stran 304-- veš je nekaj narobe, zato vas lahko ogledate s pomočjo zapiskov enkrat ali prosite nekoga, da vam ponovno poslati predavanje ugotavlja, od tega dne. Isti način s podatki na internetu. Če sem prosil za nekaj iz nekega strežnika in ga je potrebno poslati je v več paketov, Verjetno bo število je na nek način, naj jaz vem, koliko bi moral sem prejel, in mi povej, oh, to je ena od 10 ali to je eden od 10.000. Na ta način, ko sem šel na ponovno sestavite vsi kosi skupaj, Vem, če manjka nekaj in lahko zaprosi za to še enkrat. Ali to smiselno? Samo skupek pravil. Na njegovi podlagi, zbirko pravil, OK? 

Tako smo govorili tudi malo o pristaniščih. To je res samo standard, ki vam omogoča, da vedo, kakšne vrste podatkov se prenašajo v teh paketih. Če gremo z našimi ovojnica primer, ne bomo veš, da je slika Rob tam, če smo ga napisali na zunanji strani našega ovojnice. Torej, vrata so v bistvu ista stvar. To je samo način, da ugotovimo, kaj vrsta podatkov, ki se prenašajo. 

Tako da imamo vse Najpogostejše tukaj. Torej 21-- so to tudi vrsta od kot dobrih stvari vedeti. To je nekako enostavno vprašanje kviza. Všeč, kaj port 80 ne? Ali pa, kaj port 443 naredim? Tako dobre stvari vedeti. 

Torej imamo tukaj, 21 je datoteka protokol za prenos, tako da samo pravila, ki urejajo prenos datotek. 25, nekaj, kar smo vsi uporabite preveč, je email. 53 je ime domene Sistem, ki je v bistvu le nekakšen lookup za IP naslov domensko ime. 

Tako da sem precej prepričan, da je bil omenjeno v predavanju, če vas pojdite na nekaj podobnega google.com, da ima IP naslov ki je povezana z njim. To je pravzaprav google.com ne. In tako je 53 port da dejansko pride nega vrste prevodom v ta IP naslov za vas. In nato 80 in 443, so zelo pogosti. Vi ali imajo svojo spletno stran ali imate varno spletno stran, ki je veliko spletnih strani so prenos preko do sedaj. 

Tako da je nekako visoka raven Pregled protokola prenosa. Ne vidim bolj v globino. To je nekako kul stvari če ste zainteresirani. Obstaja veliko virov. Wikipedia je dejansko zelo dobra stran. Torej sem iskal na to Samo nekaj časa nazaj, tako da bi zelo priporočam gledaš na to, če ste zainteresirani ali pa 143 v dveh letih zaradi Mislim, da je vsako drugo leto. 

Torej, na koncu to, da smo Govorimo o spletnih straneh in HTTP, ki je pravzaprav naša naslednja tema danes preden gremo v HTML in CSS in lahko dejansko kodo do spletne strani. To bo zabavno. Bomo imeli slike zajčki in to bo super. 

Torej HTTP, kot lahko vidite tukaj, je eden od ljubkih kratic za ta teden, ki je Hypertext Transfer protokol. Torej, še enkrat, to je samo en sklop pravil, ki ureja hipertekstovno prenos, v tem primeru. Torej, najboljši način, da se naučijo pri tem je le nekako da razdeliti te posamezne besede ker obstaja veliko besede na zaslonu tam. 

Torej bomo začeli s hipertekst. Torej "hiper", si lahko zamislite "Zgoraj", kot super-type stvar. Torej, to je res samo Besedilo vzeto na naslednjo raven, tako da je kot super besedila, kot v naslednjem besedilu. Tako da je v bistvu samo besedilo, ki nam daje več informacij kot normalno besedilo ne, OK? 

Torej, v tem primeru tukaj, to je hipertekst. To nam pove, da imamo nekaj vez, ki bomo, ki je cs50.net, ki Zdaj je cs50.harvard.edu. Ti diapozitivi so malo prestar. In to se dogaja, da se prikaže pa saj to je kot hiperpovezave, in potem res kul spletno stran. 

Tako da je besedilo, ki je malo bit res kul stvari tam. Tako lahko povežete stvari in lahko vstavljate slike in si lahko stil stvari. In najbolj pozna stvar, ki vas fantje so verjetno s hipertekst je HyperText Markup Language, HTML, kar seveda vsi spletu da vidimo okoli nas, dodeljena z nekaj CSS stil vrže v. 

Ampak če je kdo res velik s MySpace, Prepričan sem, da vse znamke HTML ves čas za oblikovanje ti popolni profili, kajne? Počutim se, kot da bi bil zastarele sklic zdaj, ampak karkoli. Samo little-- vidva se ne da veliko mlajši. Nekateri ste starejši od mene. MySpace je bil še vedno stvar, ko sem bil mlad. Nisem tako star. 

Kakorkoli, HTML samo oblika hipertekst. Torej hypertext je le besedilo z dodanimi funkcijami. Torej protokol za prenos je verjetno več iffy stvar razložiti. Očitno je, da transfer-- samo za prenos podatkov. Torej, ali med stranko, kot je vaš spletni brat in strežnik. Torej, v bistvu samo Tako internet deluje. 

Torej točno zahtevo kako to delo, smo dejansko dogaja, poglej Primer zaprosilo in odgovor. Toda kako smo zahtevo Podatki iz strežnika in kako se strežnik odzove na nas kaj je ta protokol za prenos ureja. Tako zahteva in odgovor ima da sledite tem poseben sklop pravil. To je standardizirana, tako da ni važno, kam ste z uporabo interneta, vedno deluje enako, OK? 

Again, protokol, sklop pravil. To je samo normalen interakcija enako da profesor Malan govori o če nekdo razširja svojo roko, veste, da je skupno vljudnost do dosežejo tvoje ven in stresemo svojo roko. To je protokol, kajne? 

Zato sem dal nekaj standardizirano zaprosilo, kar želim stisnem roko, in daš nekaj standardiziranih odziv, ki se bodisi ne maslu ali lahko poskusite in stresamo my ročno ali pa boste poskušali in fist bump me. In nimamo protokol za to. Se pokvari. Ampak, če bi vsi takole istega protokola, seveda, gre veliko bolj neopazno. Ljudje spoznavajo med seboj. Vsakdo je vesel. 

Tako v svetu spleta, vsi sledijo isti rules-- nekoliko boljši od socialnih standardov. Ampak s tem si bomo pogledali na zahtevo primer tukaj. Tako da je to malo Ključno na dnu ki vam pove, različne barve, tisto, kar naj bi pomenilo. 

Tako bela kot tvoja metoda Zahteva in protokol version-- tako zahteva metoda, različica. In potem je to nekaj ime polja in vrednost tega področja, ki jo bomo gredo v zelo, zelo kmalu. Torej, to je zahteva primer. To je tako, kot me razširitev ven, želijo, da se predstavim. 

To je tisto, kar stranka ali kaj je tvoj spletni brskalnik bi bilo pošiljanje na vaš strežnik. Torej, to je zahteva get, tako da je prosi za nekaj, kar v strežniku. In to je, seveda, HTTP in to je različica 1.1. 

Tako ostali to, tukaj je tisto, čemur pravimo glavo, in njegova tretja informacija ki nam daje boljšo predstavo kaj smo dejansko prosi za, ali informacije, ki jih želimo dati strežnik, ki bi lahko opredeliti. Torej, User-Agent daje nekaj več Opis on-- na primer, tukaj, curl / 7.24.0 se dejansko dogaja, da povem strežnik, da bomo s pomočjo Google Chrome kot naš brskalnik. Torej, če ste že kdaj slišali o ljudje, ki govorijo o oblikovanju app odziven na več brskalnikih, To je nekaj, kar ker bi uporabili, če Ne vem, kaj brskalnik Zahteva prihaja iz, ne morete prilagoditi podatke, ki. Torej v tem primeru uporabnika se samo daje tovrstne za ugotavljanje istovetnosti o tem, kaj brskalnik uporabniško trenutno uporablja, OK? 

Torej imamo tudi gostitelja, ki je kjer smo dejansko želijo iti. V tem primeru želimo kraju apple.com, kupiti nekaj kul nove iPads ali kaj podobnega, morda luštna Lučke na naših prostorih domu. In ime Vrednost na koncu je le polnilo samo splošno stvar za vaju videti. To dejansko ne ustrezajo karkoli tukaj. 

Tako da lahko imate kot veliko ali malo, kot želite, v vsakem primeru. Večino časa, to so neobvezna. To je odvisno samo od tega, kaj morate iz brskalnika, od svojega uporabnika, da bi pravilno dala zahtevo. Ali pa je to odvisno od tega, kaj vaš uporabnika dejansko želi, da bi do strežnika. Zato boste morda morali veliko, veliko teh imen header terenu ali pa morda samo še nekaj. Kot pri mnogih stvareh Rekel sem v tem poglavju, res je odvisno od konteksta kako boste uporabljali to. 

Tako da ne, da je smiselno, da se vsakogar? To je samo primer zahteva, glave, malenkosti. OK, tako da s tem, imamo nekaj odziva. 

Spet imamo kodo stanja, protokol različica, nato ime in polje polje cenijo kot vedno. Torej, naši različici protokola in naša statusna koda 200. OK, kar pomeni, da, ja, vse je šlo dobro. Tukaj je tisto, kar želite. 

Tip strežnika, vsebina type-- nam pove, OK, ste bo dobil nekaj besedila HTML. Tu je dolžina, in tukaj je kaj morate storiti s povezavo. OK, da še enkrat, odvisno na podlagi podatkov, ki jih boste prosi za, odvisno od tega, kaj Strežnik se želi vrniti k tebi, lahko imate več teh področju imena, imate morda manj. Popolnoma odvisni od konteksta. 

In kolikor je ta status Koda tukaj, seveda, 200 ni le ena bi lahko imeli, kajne? Imamo veliko statusnih kod. Ali kdo spomni od drugi, ki smo jih omenili v predavanju? Veliko izmed njih začnejo z 4. 

OBČINSTVO: 404. 

ALLISON BUCHHOLTZ-AU: 404, kar je? 

OBČINSTVO: Datoteke ni mogoče najti? 

ALLISON BUCHHOLTZ-AU: Datoteke ni mogoče najti. Točno tako. Torej, kaj pa 403? OBČINSTVO: Forbidden. ALLISON BUCHHOLTZ-AU: Forbidden. Torej, kaj misliš to pomeni, da z chmods? 

OBČINSTVO: To pomeni, da vas Nimate dovoljenja, da ga preberete. 

ALLISON BUCHHOLTZ-AU: Točno tako. Na nek način, nimate dovoljenje za dostop do njega, kajne? Torej 404, 403. Tam je res smešno ena, da smo vedno uvede vsako leto, Moral bi dal gor, kot 413, kar je sem čajnik. Lahko to google. To je smešno, kot, da je koda 413 in to sem čajnik. Ki ne vem, zakaj bi jo kdaj potrebovali, da je na internetu, ampak jaz vstran kreniti. OBČINSTVO: Mogoče ste čaj pot. ALLISON BUCHHOLTZ-AU: Maybe Strežnik je čaj pot. Kdo ve? Vse je v redu, tako da smo na tem, da prehod v realnem kodiranja. Počutim se, kot vi greste priti ven od tu precej hitro. 

OBČINSTVO: Zakaj to počne reči "server: dvakrat? 

ALLISON BUCHHOLTZ-AU: Hm? Server dvakrat? To je dobro vprašanje. Nisem prepričan. Bom ugotoviti in Vse vas bomo po e-pošti. 

OK, vsa druga vprašanja, poleg tega? Dobro? Cool. 

HTML in CSS, in zdaj smo priti do vseh zabavnih delov. Tako kot prej sem omenil, HTML je verjetno ena od stvari, fantje so najbolj poznajo. Torej imamo Hypertext Markup Language. 

Najboljši način za učenje this-- jaz ne imate pripravljene diapozitive ali karkoli za vaju z HTML. To je res učenje sintakse. In če ste bili v MySpace dan, bi to imelo navzdol. 

Torej res, največja stvar je le za opravljanje in eksperiment. Ena od velikih sredstev, bi jaz Toplo priporočam uporabo je W3Schools. Torej samo W, 3, nato šole. Imajo veliko Sredstva za HTML, na CSS, in jih dejansko imajo split screen reč če ti dam primer kode. Lahko ukvarjati z njo, spremeniti, in pritisnite Update in to ti bom pokazal, kaj jo dejansko počne na spletni strani. 

Torej, jaz bi zelo priporočam, da uporabljate. To je zelo kul. Ne boste dobili SEG napake tu, ko gredo stvari narobe. Če vam je uspelo dobiti seg napaka s HTML, ne povej mi, ker sem dogaja se pravi spletka. Ampak to je res kul, ker lahko spremeni stvari, lahko vidite, jih posodobiti v živo. In mislim, da boste dobili veliko bolj intuitivno razumevanje HTML če ste dejansko samo preživeti nekaj čas eksperimentirati z njim. Torej, to je, zakaj sem rekel, praksa in eksperiment. 

Google, od tu naprej ven, bo verjetno eden od vaših najboljših virov in prijateljev. Ali Bing-- delam pri Microsoftu, tako da morda bi moral reči Bing. Vendar precej karkoli je le, da bo lahko sintakso, tako razumevanje, kaj so oznake so, understanding-- vsaj CSS-- kako spremeniti nekatere lastnosti. To bo zelo koristno. 

Torej kljub temu, da ne imate pripravljene stvari, mi zdaj nekako nekaterih najboljših praks da želimo vama, da poskusite in spoštujejo by-- ali bolje, morate spoštovati do nadaljnjega obvestila. Torej zaprite vse svoje oznake. Upajmo vsi has-- veš kaj, če to nima smisla zdaj, Obljubim, da bo smiseln ko smo kodiranje gor stran. Ampak zapreti vse svoje oznake. Torej, če ste kdaj imeli nekaj Glava, ki je nosilec, H1, nosilec, se prepričajte, da vsakič, ko ste končali s tem, zapreš to glavo. Potrditi svojo stran z W3 Validator. Če se ne zapreš oznake, lahko dobite nepričakovano vedenje. To bomo rekli, da je vaša stran neveljaven če jo vodijo skozi ta validator. Torej, ko v doubt-- in zlasti na ta teden in naslednji teden je pset-- na enak način, da sprašujemo vas, da uporabite preveriti 50 in slog 50, si lahko misliš o tem kot enega od pregledov, OK? 

Torej, če se ne opravi W3 validator. To je nekaj, kar vas bo dock naprej. Ali Povem ti prav Zdaj vas bom pristati na. Zato poskrbite, da preveri. To ni težko. Samo prilepite v kodi in ga bomo tako pravijo dobro delo ali ste manjka nekaj enako da slog 50 vam pove kam ste zajebavam. 

In potem ena zadnja stvar se želite ločiti Vaše markup, ki je vse, HTML ali vaše besedilo, in vaš styling. Torej bomo naredili primer te pravice po tem. Zato HTML in CSS biti ločeni. In bomo govorili o MVC, ki je Model View Controller, naslednji teden. Vi bi morali verjetno spoznajo, da je v predavanju Jutri, če ste imeli že naučili danes. 

In to je samo neke vrste paradigma, ki smo vajeni uporabiti pri ustvarjanju spletu Strani ločiti stvari. Lahko si o njej mislijo na enak način da smo nagnjeni k ločenih funkcij v C kjer smo izbrskali, da bi našli stvari. To je samo način, da da bo vaše življenje lažje. To loči atribute ali kodo, ki bi uporabljali znova in znova, vendar na ta način, da vrsta o vodi je lepo in urejeno. In če želite spremeniti ena stvar, jo spremenite enkrat in to je spremenilo povsod drugje. Torej, to je bolj za vaš enostavnost in fleksibilnost. 

Torej s CSS, je zelo podobna HTML, temveč oznak da sem omenil šele zdaj, smo uporabite tisto, kar se imenuje selektorje. In so v bistvu samo vrste od povezati določeno oznako v HTML z različnimi lastnostmi. In ko rečem atribute, mislim stvari, kot so barve, pisave, slog pisave, barva ozadja, Barva besedila. Te vrste stvari. Všeč mi je, če je to na sredini, če je off na desno, če je inverted-- vse od teh kul stvari. Morebitne stilske stvari da vam za vaše besedilo, To je tisto, kar mislim z atributi. 

In potem dve glavni stvari vedeti, je, da selectors-- dve glavni factors-- so ID, ki je edinstven. Uporabite lahko le to, da za eno stvar. V nasprotnem primeru, se dogaja, da kričati na vas. In ko smo jo definirate v datoteki CSS, pa bo biti hash ID in potem kakšne atribute želimo. Obljubim, da se bomo iti skozi primer. To bom naredil veliko bolj smiselno. 

Razred se lahko nanaša na več blokov. Tako imate lahko vaš Prvi in ​​tretji odstavek imajo enako vrsto atribute ste jih vključili v isti razred. In ko smo jih opredeljujejo v CSS, naredimo razred dot, pri čemer ne glede na razred si želi, da se ga ne navaja. 

Torej, vem, da je to prava sedaj zelo abstraktna. Zato bomo kodo. Vem, da fantje radi da, in ti so vsi dogaja, da mi pomaga, ker to je vaša spletna stran. To je spletna stran našega dela je, fantje. Torej, ali obstajajo kakršne koli vprašanja, preden sem izklopite PowerPoint, ali karkoli Hočeš, da se pomaknete nazaj preden začnemo kodiranje? 

OBČINSTVO: Ko rečeš ujemajo oznake, misliš selektorje ali označbe? ALLISON BUCHHOLTZ-AU: Lahko misliš o njih, kot isto stvar. To je samo različni besedi. Mislim, kot selektorji. Ampak selektorji karto tudi oznake. Torej si lahko misliš o njih, kot dejansko ista stvar. Obljubim, da se dogaja, da se bolj smiselno, ko smo kodo. Karkoli od PowerPoint ali na vsa vprašanja zdaj, preden smo dejansko nastanek strani naše strokovne? Vsi pripravljeni? Cool. 

Torej imam eno začelo. Dovolite mi, povečati pisavo za vas. OK, tako da zdaj moramo samo še gole kosti spletni strani tukaj. 

Imamo nekaj HTML. Imamo nekaj glavo, ki smo jo glej tukaj kot primer spletne strani. Nekateri naslov, nekaj črk. To so oznake, OK? Torej, ko mislim zapreš oznake, vidimo, tukaj je ta nosilec glava je tvoja odprtina tag, in ta nosilec / Glava jo zaprejo, OK? 

Torej lahko si misliš o tem, kot je vaše oporniki v vaših če pogoji ali si za zanke. Če imate eno na začetku, hočeš eno na koncu. To bo še vedno dela večino časa Če nimate zaprto oznako, ampak najboljša praksa je zapreš oznak. 

Torej, v tem primeru pa bi to spremenili. Bomo imeli poglavje sedem. "Oddelek Webpage." Tako da sem le, da bo to spremenilo. 

In če gremo tja in mi reload-- moram shraniti in reload-- smo opazili, da se tu gor to spremenilo, kajne? Cool. Torej, to spremeni naslov. To je ne glede na kartici. 

Torej, to je nekako išče vrste dolgočasno. Ne vem, o fantje. Mislim, da želimo nekaj drugega tukaj. 

Torej, kaj lahko storimo, je, Glava je samo tam. Naredimo neko telo. Torej imamo neko telo tukaj. Vedno sem narediti odprto in Zaprem oznake za začetek, na enak način, da naredim naramnice. Ah. Čakaj, kaj? 

OBČINSTVO: [neslišno]. ALLISON BUCHHOLTZ-AU: Ah. Vidva me. Dobro delo. Zlata zvezda. 

OK, tako da imamo neko telo tukaj. In zdaj začnimo dodal nekaj besedila. Tako da boste morali nekaj drugačna Možnosti za dodajanje besedila. Imamo stvari, kot so glave. Imamo samo normalno besedilo. Torej, kaj je šele začetek z glavo. Pravzaprav, če želite vi dvigni W3 šole HTML, lahko nekako razglejte in če je kaj zlasti tistim, ki si želijo poskusiti s te spletne strani, to lahko storimo. Torej, v tem primeru, kaj je samo še nekaj H1. Torej h1 je kot najvišji podajo. To vam bo dala nekaj da je zelo velika in drzna. 

In v tem primeru, kaj hočemo za prvo besedilo na naši spletni strani? Karkoli. Vidva se bosta ustvarili to. Jaz sem le, da bo tip. OBČINSTVO: Pozdravljeni. 

ALLISON BUCHHOLTZ-AU: Pozdravljeni. OK, tako da, če smo ga shranite in mi osvežite, imamo veliko veliko dobrodošlico. Torej, le tako boste lahko videli razlike, dajmo narediti nekaj na H6. Kaj želimo tukaj? Kajne? 

OK, tako da samo tako lahko videli razliko. Ja, Sublime. Torej, če ste opazili, h1, zelo, zelo velika. h6, kot so krepko, vendar precej manjši, in imate vse, kar je vmes. Tako da bi lahko imeli H2, H3, H4. In to so le glave, tako da, če ste poskušali ustvariti spletno stran, ki ima različne oddelke, morda želite uporabiti glave tam nekje. 

Cool. Torej bomo dodali nekaj več stvari v našem telesu. Vidim, da bi bilo nekako kul, če bi imeli sliko. Počutim se, kot bi lahko vsak uporablja morda srčkan zajček slika desno pa zdaj, tako da bomo našli slika zajček prvi. 

Ne vem, če imata vidva koli preference na katero želimo. Ali imate kakšne nastavitve? Tale tukaj? Dol. OK. Da je eden je. Dobra izbira. 

OK, tako da bomo, da si ogledate naše slike. Poglej. Poglej to čudovit stvar. Kako si lahko žalosten v ponedeljek s tem? 

Tako da smo le, da bo kopirati URL slike. In tisto, kar smo želeli storiti, je, kaj je samo pravijo, da imamo nekaj strani za odstavkom. Bomo rekli: »Poglej poglej ljubek zajček. d'awwww. " Rada imam svoje zajčke. Imam zajčka doma. Pogrešam zajčka. Torej, kaj bomo do-- Ne vem, če želite, vidva to google this-- temveč s HTML, kako se lahko vključite sliko? Dobesedno, če google "Vključujejo slike HTML" Zakaj ne fantje povejte mi kaj naj bi to bilo tag? 

OBČINSTVO: img source-- 

ALLISON BUCHHOLTZ-AU: img source-- OBČINSTVO: --equals-- ALLISON BUCHHOLTZ-AU: --equals-- OBČINSTVO: --quote-- ja. ALLISON BUCHHOLTZ-AU: Popolna. Lovely. Glej, generacija MySpace, kajne? Publika: Neopets. ALLISON BUCHHOLTZ-AU: Neopets. Oh, OK. Wow. To je bilo noro. OK. 

Zato poskrbite, da sem dobil to pravico. Cool. Zato bi to moralo biti tukaj. In potem, če smo osvežite, imamo zajček na strani ni to čudovit? 

To je tako srčkan. Izbrali ste veliko, veliko fotografijo. Jaz sem ga kopati. 

OK, tako da imamo to čudovit zajček zdaj. Smo lahko dodate slike, kar tako. Torej v bistvu, če je kakšna slika želite dodati na svojo spletno stran, ga lahko dodate tako kot je ta. Druga stvar bi bila, če ki ste jih slika shranjena v isti mapi kot te datoteke, lahko samo napisati karkoli ime te slike je namesto imajo spletne povezave. 

To bi bilo še vedno v narekovajih. Treba bi bilo samo všeč če smo poimenovali this-- če bi bila ta slika shranjena V mapi s to datoteko HTML da sem za urejanje in ga je bil imenovan bunny.jpg. Lahko bi tudi to, da in bi se prikazal. Vendar nimam to shranjeno v Datoteka in želim, da bo zajček, tako bomo obdržati povezavo. 

OBČINSTVO: Kaj je rabbit.org? 

ALLISON BUCHHOLTZ-AU: rabbit.org. To je appropriate-- poglej, jo lahko sprejme. Sprejetje. bunny.jpg. Želim, da sprejme to zajčka. Oh, bog, to je tako srčkan. 

OK, tako da smo dodali glave. Dodali smo slike. Očitno je, da smo dodali nekaj besedila tukaj, kajne? Če bi želeli dodati drugo Besedila, bi šel takole. Torej je to še en odstavek. 

In smo rekli, "to je še en odstavek." Tudi jaz sem grozno Speller, tako da sem lahko misspell stvari. Samo v vednost. 

Torej imamo še en točka tukaj, kajne? Mogoče hočeš nekaj storiti malo bolj zanimiva kot samo imajo vse vaše besedilo, kot je desno poravnano. Morda želite centrirati besedilo, OK? 

Torej, če nekdo želi uporabiti tiste priročni računalniki pred vami in mi povej, kako ste bo osredotočilo to besedilo, 

OBČINSTVO: p align. 

ALLISON BUCHHOLTZ-AU: Torej p align enaka "center". On jo ubije, fantje. Y'all morali pospešiti. In imamo "To je v sredini." In zdaj imamo nekaj v sredini. 

Na enak način, če ti želim, da levo poravnana, ki jo lahko naredite poravnate enaka levo, poravnava je enaka pravica. Povsem odvisno od vas. Če sem prav tukaj, potem je to should-- zdaj je desno poravnano. 

OBČINSTVO: Allison? S slikovnega vira, zakaj ni tam blizu vira img? ALLISON BUCHHOLTZ-AU: Žal mi je. To bi morali biti Zdaj pa si dober. Zdaj smo dobri. OBČINSTVO: Ali ne imate zapreti tam, ali ne? ALLISON BUCHHOLTZ-AU: No, tako img vir, to je ena just-- s sliko, to je samo videti kot en element, medtem če opazite, za preostanek teh, imamo nekaj oznako nato informacije, ki se nanaša na in zapiralni tag. Ampak s podobo, vse je nekako v enem kosu. Cool. Torej, fantje vedo, kako ustvariti header, veste, kako vnos besedila, veš, kako postaviti sliko v Zdaj lahko poravnate stvari. 

Druga stvar, ki se vam bi želeli, da bi lahko storili je, da ustvarite seznam v CS-- smo nekako gredo v pset naslednji teden. Stvari, ki smo običajno poučujejo ta teden gre zelo dobro z pset naslednji teden, tako da smo vrste mešanje, prekrivajočih se stvari tukaj. Vendar bo to uporabno za naslednji teden. 

Torej, če smo želeli ustvariti nekaj seznam, kako lahko to storimo? Ne moreš odgovoriti na to čas. Nekdo drug je. To ni težko, fantje, obljubim. Google "Neurejen seznam HTML." Kaj je to? 

OBČINSTVO: [neslišno]. ALLISON BUCHHOLTZ-AU: Right. Torej želimo naročiti ali neurejenega? Naredimo neurejenega. Torej imamo nekaj UL, ki stojala za neurejen seznam. In kaj imamo za vsak element? Ali potrebuje svojo značko? Lahko smo samo začeti pisati stvari? 

OBČINSTVO: li. 

ALLISON BUCHHOLTZ-AU: li. Torej, kaj je naš seznam bo? Kaj želimo tu? Pravkar delamo imena. Pač Jakob. 

OBČINSTVO: Rabbit živila. 

ALLISON BUCHHOLTZ-AU: Rabbit živila. OK To mi je všeč. Rabbit živila. 

OK, tako da imamo korenje. Všeč mi je ta zajec temo. Jaz sem se veliko kopali. OBČINSTVO: Pravzaprav sem mislil, da bi Jacob zakonit. ALLISON BUCHHOLTZ-AU: Jacob? Jacob je zajec hrane. Če ste videli Jakoba Fotografija iz uradnih ur, ste morda mislili, da je dobil napadel morilec zajca. 

OBČINSTVO: Imam zajca zdaj. Imam morilec zajec zdaj. 

ALLISON BUCHHOLTZ-AU: Se šališ? 

OBČINSTVO: Jaz bom pa naslednji odsek prinašajo. Imam jo. 

ALLISON BUCHHOLTZ-AU: To je smešno. Kakorkoli že. 

OBČINSTVO: [neslišno] 

OBČINSTVO: Ja, moja Proctor ima zajca, kot dobro. 

ALLISON BUCHHOLTZ-AU: Želim zajca. OK, kdor prinaša resnično zajec na Naslednji razdelek, skupno Brownie točk. OBČINSTVO: [neslišno] OBČINSTVO: Oh, to ni realno. To je polnjene zajec. 

ALLISON BUCHHOLTZ-AU: Oh ja, lahko zaprete to. Izgleda rad. OBČINSTVO: Ali je v resnici pomembno? ALLISON BUCHHOLTZ-AU: To pa ne. Z večino teh stvari, vam ne zaprete oznako, 99% časa nič slabega se dogaja zgodilo, ampak to je dobra stil, preveč. Torej Jakoba. In imamo solato. OBČINSTVO: Za povezave to je res pomembno. ALLISON BUCHHOLTZ-AU: Hm? OBČINSTVO: Za povezave. ALLISON BUCHHOLTZ-AU: Za povezave. Da, hiperpovezave jo potrebujete. OK, tako da je videti tukaj. In imamo v bližini našega seznama. In gledamo na to. Smo all-- Jakoba, prav tam. Rabbit hrane. Spominja me na Bunnicula. 

OBČINSTVO: [neslišno] ALLISON BUCHHOLTZ-AU: Jaz sem obuditev Vse je danes stara reference šola, ne jaz? Le vse stare šolske viri. Bi morala biti vložena kot Gogurts ali kaj za prigrizke. 

OBČINSTVO: Ali Gushers. ALLISON BUCHHOLTZ-AU: Oh. OK. Bom videl, če bom lahko spremljali dol Gushers za naslednji teden. Mislim, da lahko to storim. Mislim, da bi morali nekaj v pisarni. 

OK, tako da smo iz veliko drugačna stvari, ki jih lahko storite s HTML, kajne? In kot si verjetno lahko videli, da je nothing-- upam, da ne preveč intim-- če je, ne mislim omalovaževati nikomur. Če imate težave, prosim pridi govoriti z mano. 

Večino pa je le gledamo na sintakso, kajne? Če želite neurejen seznam, če hočeš neke vrste seznama če želite, da kaj poravnati ali Nekaj ​​format, to je vse o pravkar nekako je videti up sintaksa za HTML, kajne? In ena stvar, ki je precej kul dejansko je, če greš to-- poglejmo, kaj je lepo, spletna stran, ki vam je všeč? Kdo kakšne najljubše spletne strani da so OK, da bi na spletu? Veš kaj, kaj je samo naredil CS50. To je lepo in varno, kajne? 

OK, tako CS50 tukaj. Oh poglej, tam je oddelek zdaj. Če vam je všeč, kako izgleda. 

OBČINSTVO: [neslišno]. ALLISON BUCHHOLTZ-AU: Nismo naredili meta poglavje, fantje. To se ne dogaja. Bilo bi kul, ampak ne bomo, da to storite. 

Torej, kaj storiti, si lahko storiti, če vam je všeč način to deluje, je lahko vedno prav kliknite na katero koli spletno stran, ki vam je všeč in lahko storite Ogled vira. To bo odprlo vse HTML. In to je pravzaprav res dober način, da stil svojo spletno stran. Pojdite na spletno stran, ki vas Res mi je všeč in poglej HTML in ugotoviti, kako je to naredil. 

In dobesedno, tako dolgo, kot navajajo stvari, Dokler nisi samo krasti od ljudi, to je OK. Posebej za CS50 [? financiranje?] smo nekako vas pričakuje, da bi dobili Navdih iz druge spletne strani. Zato vas prosimo. Poglej prek spletne strani, misliš, da so res lepa in ugotovimo, kako jih uporabiti HTML in CSS narediti te stvari. 

Torej, kot vidite tu, tam je očitno kot povezave in imamo tukaj razred. Imamo povezavo tukaj. Imamo seznam. Verjetno imamo nekaj slik v tu nekje. 

Imava nekaj kul slog tukaj. To je naslednja stvar, bomo storili. Torej slog, ko boste videli te slog nosilci, je CSS bistvu. Ben, pa imate vprašanje? 

OBČINSTVO: Kaj je div? 

ALLISON BUCHHOLTZ-AU: div je samo a-- kaj je div? OBČINSTVO: Division. ALLISON BUCHHOLTZ-AU: Division. Ja, to je tako kot ločevanje različnih elementov. OK, tako da tukaj je tisto, kar smo dogaja, da gredo v naslednjo. Tako da to morda ni najboljša slog, saj če opazite imamo HTML in slog na isti strani, in dejansko želimo ločiti tiste, OK? In pravzaprav, kaj me odpreti svoj pravega ker naj bi to bilo PDF, tako da imamo style.css. 

Torej, kaj lahko storimo, tukaj je to so kul stvari, kot neke fade in bi lahko poskusila narediti, vendar menim, kot bi jaz nered, ki se na letenje, zato vam spodbujajo fantje poskusite, da gredo na svoje, ampak ne bom, da to storite zdaj. Torej, če ste fantje, ne pozabite, če si kdaj udaril problem niz, nekaj swoops v od strani. Ima opraviti z fade in prehod in malenkosti. 

OBČINSTVO: In to je vse, CSS in HTML? 

ALLISON BUCHHOLTZ-AU: Vse CSS in HTML. Ja. Tako da lahko naredite veliko zares kul stvari z CSS in HTML. Torej, z našimi super zajček spletno stran tukaj smo naredili malo malo CSS styling z njim. 

Torej, če ste kdaj imeli stil stanja, ki ga imamo tukaj, lahko samo poklicati style.css. Lahko ga pokličete, kar želite. Kar je pomembno, je, da bomo da jo reference v naši web.html tukaj. 

Torej, kaj bomo storili, je we-- tako da ne nered to up-- bomo povezali Ti dve datoteki skupaj. Torej, v istem way-- grem potegniti analogijo s C tukaj. Na enak način, če imate nekateri library-- in imamo cs50.h-- naš prevajalnik ga povezuje. To je samo eksplicitno Povezava na naši strani. Torej, na enak način, da delamo hash vključujejo nekatere datoteke, kaj Jaz sem na tem, da bi napisal je samo HTML / CSS ekvivalent tega. 

Mi smo samo rekel, OK, to spletno stran se bo uporaba te slogovne, OK? Torej imamo povezavo rel enak slogi. In potem imamo tipa, CSS. In potem href enaka. 

OK. Torej, vse to naredil, tukaj je lahko misliti, da je to isto stvar kot hash vključujejo. Očitno je videti malo bolj zapleteno, vendar v vseh primerih, to je dejansko ista stvar. Torej je to samo nekaj povezovanje slogi, je tipa text / css, in ime ji je style.css. 

Kaj je pomembno vedeti je, da spletne strani da delam prav now-- web.html in style.css-- so v isti mapi. Ker v različnih mapah, morate dati dejansko koren za to, ali je pot do nje. Toda v tem primeru, smo ga držimo super enostavno in to se dogaja tukaj. Torej, če bomo to storili, imam nekaj stvari, ki so že v čakalni vrsti tukaj. 

Torej imamo neko telo, ki se dogaja da imamo barvo ozadja, ki zdaj je svetlo modre barve. Lahko ga spremenite, če želimo, vendar če sem te prav spomnim, bi bilo samo zamenjati za svetlo modro. In zdaj imamo svetlo modro ozadje. In smo imeli here-- lahko vsakdo zapomniti ki je eden hash ID ali razred? 

OBČINSTVO: ID. 

ALLISON BUCHHOLTZ-AU: ID. Cool. Torej, kaj želimo narediti je katera od teh pisav ali which-- hočemo "Poglej srčkan zajček ", da je vijolična? Mislim, da želimo, da bi bila vijolične barve. Sem dol s tem pa vijolične barve. 

Torej, kaj morate storiti, je vam ID equals-- v tem primeru Rekel sem, kaj, lepa barva tukaj. Mi osvežite. Naenkrat, je vijolične barve. OK, tako da z ID, se spomnite da mora biti edinstvena, tako da nikoli ne sme biti s pomočjo Ta ID nikjer drugje. Vendar z razredom, saj imamo tukaj z lepo pisavo, Moral bi biti sposobni uporabljati da kjerkoli hočem. 

Torej, kaj je naredil tole tukaj. Tako lahko rečemo, razred enak lepo pisavo. In če pogledamo zdaj imamo to kul lepo pisavo tukaj. Mogoče hočem narediti oboje. OK, jaz zdaj ne vem, če je to bo šlo, ampak želim, da ga preizkusite. In to je, kako ste izvedeli, CSS in HTML. Ste kot veste kaj, rad bi poskusil s tem. Nisem prepričan, če se bo šlo. Bomo videli, če deluje. 

In poglej to. Zdaj je v vijolični in to je lepa pisava. OK, tako da boste imeli vse te različnih stvari, ki jih lahko storite. Imate vprašanje? 

OBČINSTVO: Ja. No, tako kot barve boste uporabljali, so besede. Ali obstaja način za barve s šestnajstiško RGB? ALLISON BUCHHOLTZ-AU: Lahko tudi to storite s heksadecimalni, verjamem. Ja. Ampak to je nekako lepo, če vas Ne želim, da jih poiščete. Lahko samo všeč, vijolična ali modra. OBČINSTVO: Pa upam, da vem, kaj to pomeni. ALLISON BUCHHOLTZ-AU: Right. Torej, kaj je, da to branje ali Chartreuse. Zakaj bi si kdaj izbrati Chartreuse? To je zanimiva barva. 

OK, torej je očitno, da lahko vidimo lahko spremeni stvari, vendar želimo. Če bi želeli create-- recimo smo želeli ustvariti še en razred. Kaj bi vi želeli spremeniti? Če se povlečejo navzgor W3Schools " CSS dokumentacija, Pustim besedo vas. Mi lahko poskusiti in narediti z nekaj kul to v zadnjih nekaj minutah. Ker sem nekako dal crash seveda na veliko kul stvari da lahko to storite. Ampak na koncu, kot sem rekel, če vas samo poskus, boste izvedeli veliko. 

OBČINSTVO: Si pogledal gor to pisavo? 

ALLISON BUCHHOLTZ-AU: Ja, Pogledal sem to pisavo. Tako kot dobesedno, sem šel to-- Kaj sem naredil? Sem CSS seznam pisav in Nato sem naredil font kup, in potem sem si mislil, poglej tukaj so vsi kul pisave se jih lahko storite. In tam je bil ta, da Sem ga kopiral v mojo odložišče. In potem sem si mislil, OK, kul, pa gremo. Vse narejeno. 

OBČINSTVO: Torej vam morajo zagotoviti, da CSS, da ve, kaj to je pisava. 

ALLISON BUCHHOLTZ-AU: Da. 

OBČINSTVO: Kaj piše na koncu? Poševno? 

ALLISON BUCHHOLTZ-AU: ležeči. Ja. 

OBČINSTVO: Ozadje. 

ALLISON BUCHHOLTZ-AU: Ozadje. OK. Torej hočeš, da mi poveš, kako to storiti. Pustim to za vas. Jaz sem samo tipkanje tu zdaj. Kolo je v vaših rokah. 

OBČINSTVO: OK 

ALLISON BUCHHOLTZ-AU: OK. Kaj počnem? 

OBČINSTVO: Doing-- vem kaj prihaja po kodrasti naramnicami. ALLISON BUCHHOLTZ-AU: OK. Torej, verjetno v telesu, sem bi prevzeli, ker smo delaš s sliko v ozadju. 

OBČINSTVO: Ja, kaj je storil. 

ALLISON BUCHHOLTZ-AU: OK. OBČINSTVO: OK, tako da ozadje kolona, ​​in nato smo Potrebujete URL naslov te slike. Mogoče pseudo-code, ki za zdaj, morda. 

ALLISON BUCHHOLTZ-AU: Kaj mi bi radi to-- OBČINSTVO: Razmišljam kot GIF. ALLISON BUCHHOLTZ-AU: GIF? To bo zanimivo. OK, kaj sem googling tukaj? 

OBČINSTVO: No, to je vaša izbira. 

ALLISON BUCHHOLTZ-AU: Zakaj ne we-- če je zajček, Počutim se, kot da bi morali imeti lepa travnata zelenica ali kaj podobnega. 

OBČINSTVO: Travnik. Travnik. 

ALLISON BUCHHOLTZ-AU: travnik? OK. OBČINSTVO: Ali Rachel Maddow. ALLISON BUCHHOLTZ-AU: Tole izgleda precej. Oh, to je majhen, čeprav. Potrebujemo dobre slike. Poglejmo. Oh, poglej. To je precej travnik. Veš kaj mi je všeč. Oglejmo kopirati to. 

OBČINSTVO: OK, tako da mislim, da je URL, odprti oklepaji. 

ALLISON BUCHHOLTZ-AU: OK, URL. 

OBČINSTVO: Potem naslov. 

ALLISON BUCHHOLTZ-AU: OK. Je to vse, kar potrebujemo? 

OBČINSTVO: Close oklepaje podpičje, in potem prostor, ozadje vezaj navezanost debelega črevesa fiksno in kodrasti brace. 

ALLISON BUCHHOLTZ-AU: OK. Poglejmo, če to deluje. To se dogaja, da je precej kul, če to počne. Jaz sem pravi navdušena tukaj. To ni delo. Sprašujem se, zakaj. OBČINSTVO: Mogoče URL mora biti v ponudbah. ALLISON BUCHHOLTZ-AU: Maybe. In to je, kako smo se naučili, fantje. 

OBČINSTVO: Ali imamo ozadje barve in slike ozadja? 

OBČINSTVO: No. Ena nadomešča drugega. 

ALLISON BUCHHOLTZ-AU: Ne vem. Poglejmo. Poglejmo ven in videti. 

OBČINSTVO: Oh, morda, ja. [Interposing GLAS] 

ALLISON BUCHHOLTZ-AU: OK, to je obviously-- I [neslišno] tukaj. Torej OK. OBČINSTVO: navezanost Ozadje. ALLISON BUCHHOLTZ-AU: Ah. 

OBČINSTVO: OK, ne vem. ALLISON BUCHHOLTZ-AU: It izgleda da bi bilo delo. Ali ste prepričani, da je debelo črevo po URL-ju? 

OBČINSTVO: No, to je podpičjem. ALLISON BUCHHOLTZ-AU: To je podpičje. OBČINSTVO: Sem rekel debelo črevo? ALLISON BUCHHOLTZ-AU: Rekli ste, da je debelo črevo. OBČINSTVO: Oh no. ALLISON BUCHHOLTZ-AU: Tukaj imaš. OBČINSTVO: Oh, čakaj, zdaj ne moremo prebrati besedilo. ALLISON BUCHHOLTZ-AU: Zdaj ne moreš prebrati besedila, vendar imamo sliko za ozadje. Mmhmm? 

OBČINSTVO: Ali HTML podpreti dinamične vsebine? Všeč mi je, lahko spremenite velikost te slike odvisno od velikosti okna, ali pa je, da je CSS-- 

ALLISON BUCHHOLTZ-AU: Torej CSS ima za to. Torej, če ste fantje zanima učenje napredne CSS, Jaz sem co-poučevanje seminar o CSS na 7.. In obljubim, da bo veliko bolj v globino in še mnogo več kul stvari v tem oddelku. In moja co-učitelj je kot Skupno front end web dev master. Torej bo to zelo kul, če hočeš da se naučijo o vseh lepih stvareh, da CSS lahko storite. 

Ampak kaj imamo tukaj z njegova navezanost ozadje fixed-- tako da je nekatere fiksne size-- vendar pa lahko dejansko dynamically-- če ste že kdaj videli spletne strani, kot so večina dobrih spletnih strani bo naredil, ko prilagajate velikost vašega brskalnika, da prilagodi ozadje ali koliko prikazuje ali formatirali stvari, kajne? Torej, to je tisto, čemur pravimo relativno pozicioniranje. 

In CSS lahko dejansko zgrabi, kako velik je vaš Širina brskalnik ali kako visok je, in si lahko postavite stvari po katerem relativne velikosti in absolutna velikostih. In to je očitno bolj napredni CSS, ampak to je nekaj, kar lahko storite. Če želite izvedeti več, pridi na moj seminar. 

Tako, da je nekaj, kar lahko storite. In CSS lahko dejansko do-- CSS in JavaScript, ki jih bomo dobili v naslednjem week-- vam omogoča, da dinamično spreminjanje strani, ne da bi morali jim naložiti ves čas. In dobiš, da naredite nekaj precej kul stvari. 

Torej obstaja še ena stvar da bi vidva želite storiti ali karkoli želite, da razišče? Imamo 10 minut levo. Mi lahko pustite tudi predčasno, če pa želite storiti nekaj več spletnih stvari, smo lahko, vendar nisem vas bo prisilil, da. Lahko pa tudi samo jesti sladkarije. OBČINSTVO: Označite besedilo bela tako da ga lahko preberete. ALLISON BUCHHOLTZ-AU: OK. Torej v tem primeru želimo nekaj str. OBČINSTVO: Ali bi morali to storiti v telo, tako da velja za celotno stran? ALLISON BUCHHOLTZ-AU: Ja, lahko dejansko smo. To je dobra ideja. Tako vam have-- storiti vem, kaj bi morali biti? Ne vem, če bomo zmogli barvo besedila. Hotel sem poskusiti in ustvarite nov razred tukaj. 

OBČINSTVO: Kako si dobil tako da ima predloge? ALLISON BUCHHOLTZ-AU: Torej če sta vidva zanima, To je še en tekst urednik imenuje sublimno. Moral bi imeti možnost, da ga namestite na vašo napravo. Včasih postane precej zapleteno. Če želite pomagati pri tem, Jaz sem zelo vesel, da vam pomaga s tem, ker gedit je velik in to je super, ker si lahko prevedete na dnu, ampak res kot so Sublime, saj je precej in to počne stvari kot auto-popolna. 

Torej lahko zagotovo vas prosimo, da povej mi, če želite, da to storim. Če ste pravkar google "Sublime besedilo, "je tipično ima navodila za namestitev na različnih operacijskih sistemih. To je res kul, I mislim, po mojem mnenju. Torej, str. Mislim, da lahko pač text-- ali bomo pač barva je "belo". Tam. 

Torej, kaj sem naredil, tukaj je, da sem ni spremenila vse besedilo. Vendar p tu je le tag, da imamo, kajne? Ta odstavek tag. Tako sem ustvaril CSS element, ki je rekel, OK, kaj s to oznako p, da barva bela. 

Torej, če ste opazili, da je ta beli in ta bela. To ni, da naš seznam belo, ker to ni povezano s tem. Lahko bi šel skozi in lahko say-- 

OBČINSTVO: Ali barvo ozadja. 

ALLISON BUCHHOLTZ-AU: Barva ozadja? 

OBČINSTVO: Ozadje vodu Barva, kjer si dal p tag. 

ALLISON BUCHHOLTZ-AU: OK. Želite, da bela? OBČINSTVO: mmhmm. ALLISON BUCHHOLTZ-AU: OK. Tukaj imaš. OBČINSTVO: To je čudno. ALLISON BUCHHOLTZ-AU: Precej kul, kajne? Torej, če vas le igral, boste veliko naučili. In je lahko precej kul. Mislim, da je vsekakor bolj razveseljivo, kot včasih saj vam ni treba čakati, za vaš program za pripravo. Lahko samo hit Refresh in ti si všeč, oh, poglej, je delal, ali oh, jaz sem Verjetno nekaj manjka. In to je nekaj, kar je res cool o tem naslednjem delu v razredu, je, da je definitivno sem mislim, lažje preveriti kot greš na poti v primerjavi z da bi morali pisati te dolge programe in želi in moli ki deluje na koncu. 

Torej, s tem mislim, vi vsi videti dobro. Če imate kakršnakoli vprašanja, kot vedno, prihajajo govoriti z menoj, pridi mi sporočite. Bom tik pred za naslednjih 15 minut Če želite klepetati o karkoli in vse, kar je. 

Zato upam, da guys-- veliko sreče s tem pset. Rok za prijavo je petek opoldne ker je bila sproščena pozno. Tako da bom verjetno videli Veliko vaju v četrtek, vendar upam, da ne. Morda boste morali to storiti do takrat. Jaz bi bil zelo ponosen. 

Če pa ne, bom videti četrtek. Uporabite lahko tudi pozno datum, ki razširja do sobote opoldne. Vendar sem don't-- huh? 

OBČINSTVO: Halloween. 

ALLISON BUCHHOLTZ-AU: To je noč čarovnic, a in b, Jaz ne mislim, da bo se uradne ure v petek. Torej res poskusiti in zaslužiti to storiti z Petek, tako da bomo lahko vsi praznujemo Hallow vikend. Vse je v redu, bom videli fantje naslednji teden.