[Speel van musiek] ALLISON Buchholtz-AU: Alle reg, almal. Welkom terug na afdeling. So ons agenda vir vandag gaan oor veel meer web dev dinge. Ek hoeveel van weet nie jy jou psets gesien sedert dit vrygestel is vroeër vanoggend. Ek sou as hoeveel mense het die spec te lees, maar sien hoe julle almal het ' van, soos, sewe uur om te kyk na dit en dit is 'n Maandag en jy het waarskynlik het klas, Ek gaan om te aanvaar dat die meeste van julle het nie. As jy het, ekstra roem. Jy is basies help 'n eenvoudige web implementeer bediener in C, wat is 'n splinternuwe pset, sodat julle ouens kry om die Guinee varke. Dit gaan 'n pret te wees, wilde week, maar ek dink dit sal 'n baie pret te wees en dit sal 'n werklik goeie ondervinding eintlik. Sodat jy om voor te berei vir wat in artikel vandag ons gaan chmod, TCP / IP te gaan, en dan 'n bietjie van HTML en CSS. Aan die einde, sal ons eintlik kode 'n eenvoudige webblad saam om jou te help ouens soort van kry meer vertroud met dit. En dan as jy het nie opgetel jou vasvrae, hulle is in die voorkant, maar ek is redelik seker dat almal hier het hul toets. En ook op daardie noot, oplossings is nog nie op, maar sodra ons finish-- hou, die laaste paar mense wat hul quizzes-- hulle sal op. As jy enige vrae het In die tussentyd, voel vry om my persoonlik te e-pos. Ek sal reageer met jou individuele vrae, soos ek altyd doen. So op daardie noot, chmod. So basies alles wat jy nodig het om te weet oor chmod is dat dit gebruik word om te verander permissies, reg? So dit is net 'n paar stelsels noem dit 'n verander regte, soos dit hier sê. En as jy ooit wil sien wie toestemming verleen om 'n lêer het, in plaas van net te doen LS, kan jy doen ls-l. l staan ​​vir 'n lang. So sal jy 'n lang lys doen van alles, en dit sal jy baie meer gedetailleerde gee inligting oor elk van jou lêers. En jy sal sien something-- ek gaan om voort te slaan vir 'n second-- maar jy sal iets soortgelyks te sien dat die top line is daar vir elke lêer. En ons gaan deur middel van wat dit beteken. So basies, te verander permissies, jy wil net chmod te gebruik. Jy kan dink dat dit as enige ander UNIX noem soos LS of cd of iets anders. Dit is net 'n soort van 'n ander soos oproep. So ons doen chmod en dan sal ons drie syfers tipies. Daar is 'n paar maniere om te doen dit is een van wat ons gaan oor. Maar tipies, sal jy drie syfers wat wissel 0-7 elke keer. So een ding is dat daar drie verskillende regte dat ons kan elke lêer gee. En dit is leesbaar, wat verteenwoordig deur r, wat sin maak in 'n bietjie; w, wat skryfbare; en uitvoerbare, wat is x. Ek weet dat die e een uitvoerbare, Miskien nie die meeste sin, maar ons verteenwoordig dit met x. En dan wat gebeur is elk van hierdie ook die aantal verteenwoordiging. Dus het ons 1, 2, en 4. En basies wat gebeur is elk van hierdie drie getalle hier ooreen met 'n verskillende stelle gebruikers dat diegene regte betrekking het op. So jy kan dink dat die eerste getal ooreenstem met die werklike gebruiker of die eienaar van die lêer, die tweede getal sal stem ooreen met die groep, en die laaste een verwys aan die wêreld, OK? So wat gebeur is onthou diegene numbers-- r is 4, w is 2, x is 1, reg? This-- as jy som dit op, wat gee jou die eerste getal sodat ons kan insette in ons chmod. So in hierdie geval, wat sou hierdie getal wees? Dit sou wees 4 plus 2 plus 1, wat 'n 7, reg? En in hierdie geval, is hierdie nie iets, sodat hierdie reg sou hier vertaal na chmod 700, OK? En wat dit doen, is dit gee al van hierdie regte aan jou gebruikers. So dit beteken dat ons die gebruiker kan doen wat hulle wil. Hulle kan hierdie lêer lees. Hulle kan hierdie lêer uit te voer. Hulle kan skryf aan hierdie lêer. Maar die groep en die wêreld, geen regte hoegenaamd, OK? So 'n ander manier om dit te skryf, kan ons chmod van drie syfers, wat elk stem ooreen met wat die som of wat spesifieke groep, spesifieke subset. Of ons kan eintlik nie 'n ander ding. Hou op. Ons kan iets met hierdie hier doen. Hoeveel van julle het 'n voorbeeld waar dit was soos 'n plus x te chmod? Het jy sien dat in lesing, dink ek? So 'n staan ​​vir almal. Dit beteken gee dit aan alle gebruikers, wat ek vergeet het om hier te sit. Maar 'n plus x, of ons sien hier, as ons dit doen te chmod-- wat groep ons praat oor plus die regte Ons wil aan hulle te gee. So dit kan 'n plus of minus 'n wees. Plus voeg toestemming. Minus wegneem toestemming. Pretty intuïtief, dink ek. So 'n plus x beteken chmod. So verander die regte van alle mense As dit is 'n a-- add regte. En x-- dit beteken wat toestemming ons toestaan ​​almal. Lees, skryf, of uit te voer? Publiek: voer. ALLISON Buchholtz-AU: voer. So gee ons alle gebruikers toestemming om hierdie lêer uit te voer, OK? So wat as ons wou doen dat met die numeriese vorm? So onthou met numeriese, Ons wil drie nommers. Publiek: 4. ALLISON Buchholtz-AU: Wat was dit? Publiek: 4. ALLISON Buchholtz-AU: Nie 4. Publiek: 0, 0, 4. ALLISON Buchholtz-AU: Wel, ons wil om dit te gee aan alle gebruikers, reg? So ons gaan hê 'n aantal in elke gleuf. Dit gaan die wees dieselfde getal in elke gleuf want ons wil net te gee almal uitvoerbare regte. So uitvoerbare is 1, maar op die regte pad is. So as ons het chmod 111 wat sou die ekwivalent van chmod 'n plus x. Maak dit sin maak vir almal? Ons gaan om te gaan deur 'n paar voorbeelde. So die groot afhaal hier is 'n nie hier, maar 'n beteken net gee dit aan alle gebruikers. u is as jy net wil te gee of weg te neem 'n spesifieke toestemming van die gebruiker of die eienaar. g is vir die groep, sodat middelste syfer. En dan ander wat jy kan dink as die wêreld, wat verlede syfer. So met dit, sal ons gaan na 'n voorbeeld, want ek voel soos voorbeelde altyd maak hierdie dinge makliker om te verstaan. So rwx-- ons het deur this-- kan ook verteenwoordig as 700. Dit is die voorbeeld wat ons gekyk op meer van die foto. So chmod 444 op 'n lêer sou gee wat regte? Jy was baie naby. Publiek: leesbare vir almal. ALLISON Buchholtz-AU: leesbare. So leesbare aan almal, reg? En dan wat is 'n ander manier om dit te doen? As ons wil hê chmod te doen met óf r se of w's, plus en minuses, wat wil hê dat die oproep lyk? Dit sou chmod word wat? Publiek: 'n plus r. ALLISON Buchholtz-AU: 'n plus r op die 5. OK, so dit is dieselfde as hierdie, net twee verskillende vertalings van die dieselfde ding. So met dit, ons het hierdie. So ek wil julle ouens om te probeer en skryf hierdie soort in hul teenoorgestelde manier. So met chmod 555, wat sou dit wees? Sou dit 'n plus of u plus of iets anders? Vir u plus x, gee my die drie getalle. En dan vir my sê oor wat regte ons is eintlik die toekenning en wie? So ek gee julle twee minute om te werk aan dit. Voel vry om te praat met mekaar. Vir dié van julle wat in 'n bietjie kom laat, is daar lekkergoed en hemde. Ons het drie hemde links, en ons het Kit Kats en Starbursts. So voel vry gryp om te kom sommige in hierdie klein tussenspel. Ook, die laaste een is moeilik. Dit is twee chmods vir die laaste een. Eintlik, laat my sluit die deur terwyl julle ouens is besig om op daardie. Lekkergoed is altyd nodig op 'n Maandag middag. OK, so chmod 555. Wat is 'n ander manier waarop ons kan skryf wat? Enige idees? Ja. Publiek: 'n plus rx. ALLISON Buchholtz-AU: r plus rx. Wil jy om te verduidelik waarom dit sou Rx word? Publiek: Omdat jy 5, so dit is 4 plus 1, sodat ons lees plus uitvoerbare, en dit is vir almal. ALLISON Buchholtz-AU: Right. So net om te herhaal, 5 hier ons weet as die bedrag van 4 en 1, omdat elke getal in ons trio is die som van die regte vir die subset, reg? Óf die gebruiker, die groep of die wêreld. So in hierdie geval, ons weet dat 5 moet gevorm word deur 4 en 1. En 4 en 1 stem ooreen met leesbare en uitvoerbare. Ons gee dit aan almal, sodat ons kan chmod 'n plus rx. En natuurlik, ons het net deur die vrae is daar, So nou hierdie lêer is uitvoerbare en leesbaar vir almal. So, wat oor die tweede een? Wat kan die aantal vir daardie een wees? Enige idees? Gaan voort. Publiek: 100 [onhoorbaar]. ALLISON Buchholtz-AU: 100. Presies. So wil jy verduidelik hoekom 100? Publiek: Want dit is vir die gebruiker, so dit is in die eerste posisie. En dan x uitvoerbare is 1. ALLISON Buchholtz-AU: Presies. So ons is die toekenning van uitvoerbare regte om net die gebruiker. So in hierdie geval, sou dit 100 wees. En ek het al die antwoorde op die volgende skuif in die geval jy skryf baie dinge af. OK, so hierdie volgende een is eintlik gedoen met twee chmods, kan jy dit doen. So daar iemand geen idee hoe jy dalk kry chmod 640 herskryf in die ander manier? Jy kan die gebruiker die eerste en dan verander jy kan verander die groep is my wenk. So as ons net die verandering van die gebruiker, wat is die eerste een hier, wat kan ons oproep wees? So gebruiker is u, reg? So chmod u plus wat? Mmhmm? Publiek: rw. ALLISON Buchholtz-AU: rw. Reg vir lees en skryf nie, omdat lees 4, w is 2, die som saam as 6. Sodat ons chmod kry u plus rw, en ons kry ons eerste 6 daar. So dan kry die 4, wil ons nou ons groep instellings te verander. So ons gaan chmod g plus wat om te doen? Wat is 'n 4? Publiek: r. ALLISON Buchholtz-AU: r. Presies. So ons is die eienaar gee lees en skryf regte en ons is die groep lees gee regte, wat ons al hier. Mmhmm? Publiek: As jy iets kan skryf, beteken dit jy kan dit uit te voer? ALLISON Buchholtz-AU: Jy kan skryf aan something-- Ek glo nie dat dit impliseer jy kan dit uit te voer. Cool. So dit is al wat ons het net deur. So, op die volgende een, dit is ' net soort van algemene gevalle wat jy wil in te hou omgee vir jou probleem stel. Dit is tipies die regte dat ons u graag gebruik. So vir 711, wat gee ons, natuurlik, gebruikers alle regte, wat geneig om sin te maak. En dan is dit uitvoerbaar deur die groep in die wêreld, wat sin maak As jy 'n paar gids, jy wil in staat wees om oor te steek in dit. Mense moet toegang. Vir enige nie-PHP lêer, jy gaan te gebruik 644, wat sal doen wat? Wat beteken dit impliseer, of wat regte beteken dit gee? So wat kan die eienaar? Publiek: lees en skryf. ALLISON Buchholtz-AU: lees en skryf. En dan groep en ander kan net lees nie, reg? En dan chmod 600 vir enige PHP lêers wat jy gebruik, jou eienaar, weer, kan lees en skryf dit maar almal is net soort van afgesper. So dit sal eintlik meer nuttig wanneer jy vir jou probleem stel volgende week waar jy is eintlik die bou van 'n webwerf. So as jy ooit in enige vreemde probleme waar dit nie laai behoorlik, miskien het jy nodig om 'n uitvoerbare voeg toestemming, of miskien moet jy 'n lees of skryf toestemming. Klein dingetjies wat geneig is om mense te reis , maar dit is soort van soos die go-to wanneer jy volgende week se pset begin. En ek sal jou meer wenke oor hierdie week se pset, maar ek het nog te kyk na dit sedert dit is vrygestel vanoggend. Maar jy my e-pos, sal ek gekyk het na dit deur die tyd wat ek reageer môre. So nou, is almal goed met chmod? Enige voortslepende vrae? Redelik eenvoudig. Net soort van die dop van wat lees, skryf, en uit te voer getalle is waarskynlik die moeilikste deel. So met TCP / IP, al hierdie protokolle, soort van soos met jou data strukture verlede week, is dit soveel meer belangrik om te soort kry 'n hoër vlak intuïsie van hulle. Dit is nie CS143 waar ons gaan om jou te vra om 'n netwerk te implementeer, sodat jy sal goed wees indien jy nie verstaan ​​nie die fyner kunsies van al die protokolle. Wat is belangrik om te verstaan, is soort van soos wat hulle verteenwoordig en waarom hulle belangrik is. So TCP / IP, natuurlik, dit is die Transmission Control Protocol of Internet Protocol, wat basies net 'n stel wette basies of standaarde wat vertel data hoe dit hanteer moet word, hoe dit moet packetized word, oorgedra en ontvang word. So is dit basies, net soos dit hier sê, verhoog die kanse dat data kry waar jy wil om dit te kry om te. Ek is seker dat as jy ouens het na lesing of gekyk het dit aanlyn, Hy has-- Ek weet nie As hy dit gedoen het hierdie jaar, maar ek weet verlede jaar, het hy 'n demo waar hy 'n foto van Rob en hy verdeel dit in vier en sit dit in koeverte en probeer om dit te kry oor Sanders. En jy kan soort dink dit so. Dit is net 'n stel reëls wat vertel hoe data iewers te kry en kan jy weet as jy mis data, op dieselfde manier dat as jy neem verskeie bladsye van notas en jy merk hulle met bladsy 104, bladsy 204, en jy gaan terug na later studeer en jy is weg something-- jy kan nie bladsy vind 304-- jy weet iets is verkeerd, so jy kan kyk deur jou notas weer of vra iemand om jou te herstuur die lesing notas van daardie dag. Op dieselfde manier met die data op die internet. As ek vra vir iets van 'n paar bediener en dit moet stuur dit in verskeie pakkies, waarskynlik gaan om te nommer dit in een of ander manier, laat my weet hoeveel ek moet ontvang het, en sê vir my, o, dit is een van 10 of is dit een van 10,000. Op dié manier wanneer ek gaan weer saam te stel al die stukkies bymekaar, Ek weet as daar iets ontbreek en ek kan vra vir dit. Maak dit sin maak? Net 'n stel reëls. Op sy basis, stel reëls, OK? So het ons ook gesels bietjie oor hawens. Dit is eintlik net 'n standaard wat kan jy weet watter tipe van data word oorgedra in hierdie pakkies. As ons gaan met ons koevert Byvoorbeeld, ons dit nie doen nie weet dat dit is 'n foto van Rob daar tensy ons skryf dit aan die buitekant van ons koevert. So hawens is basies dieselfde ding. Dit is net 'n manier om uit te vind wat tipe data oorgedra word. So het ons al van die mees algemene hiervan hier. So 21-- dit is ook soort van soos goeie dinge te weet. Dit is soort van 'n maklike vasvra vraag. Wees, wat beteken poort 80 doen? Of, wat beteken poort 443 doen? So goed om te weet. Dus het ons hier, 21 is lêer oordrag protokol, sodat net die reëls wat lêer oordrag. 25, iets wat ons almal gebruik te veel, is e-pos. 53 is die domein naam stelsel, wat basies net soort van 'n soek vir die IP adres van 'n domein naam. So ek is redelik seker dit was genoem in lesing, as jy na iets soos google.com, dit het 'n IP-adres dit is wat verband hou met dit. Dit is nie eintlik google.com. En so 53 is die hawe wat eintlik neem versorging van aard van die vertaling van dit in daardie IP-adres vir jou. En dan 80 en 443 is baie algemeen. Jy het jou webblad of jy het jou veilige web bladsy, wat 'n baie van die web bladsye oordrag van meer as tot nou toe. So dit is soort van 'n hoë vlak oorsig van die oordrag protokol. Ek het nie veel meer in diepte kyk nie. Dit is soort van cool stuff as jy belangstel. Daar is baie van die hulpbronne. Wikipedia eintlik is 'n goeie bladsy. So ek was op soek na dit net 'n kort rukkie gelede so ek sou raai kyk na dit as jy belangstel of neem 143 in twee jaar, omdat Ek dink dit is elke ander jaar. So op die einde van hierdie, ons is praat oor web bladsye en HTTP, wat eintlik ons ​​volgende onderwerp vir vandag voor ons gaan in HTML en CSS en jy kan eintlik die kode van 'n web bladsy. Dit sal pret wees. Ons het gaan foto's van hasies en dit sal wonderlik wees. So HTTP, as jy hier kan sien, is een van die pragtige akronieme vir hierdie week, wat Hypertext Transfer Protocol. So weer, dit is net 'n ander stel reëls wat regeer hiperteks oordra, in hierdie geval. So die beste manier om te leer oor hierdie is net 'n soort van dit af te breek in hierdie individuele woorde want daar is 'n baie woorde op die skerm is daar. So ons gaan om te begin met hiperteks. So "Hyper," jy kan dink "Bo" soos super-tipe ding. So dit is regtig net die teks van die geneem volgende vlak, so dit is soos Super teks, soos die volgende teks. So dit is basies net teks wat ons gee meer inligting as normale teks nie, OK? So in hierdie geval hier, dit is hiperteks. Dit sê vir ons dat ons sommige skakel wat ons gaan, wat cs50.net, wat nou cs50.harvard.edu. Hierdie skyfies is 'n bietjie oud. En dit gaan om te wys nie, aangesien dit as 'n skakel, en dan 'n baie cool website. So dit is teks, wat 'n bietjie bietjie regtig cool dinge daar in. So jy dinge kan skakel en jy kan voeg beelde, en jy kan dinge stileer. En die mees bekende ding wat jy ouens het waarskynlik met hiperteks is HyperText Markup Language, HTML, wat van die kursus is om al die web dat ons rondom ons sien, toegestaan met 'n paar CSS style gegooi. Maar as iemand was baie groot met MySpace, Ek is seker dat jy almal gebruik HTML al die tyd te skep diegene perfekte profiele, reg? Ek voel soos wat dalk 'n verouderde verwysing nou nie, maar wat ook al. Net 'n little-- julle ouens is nie veel jonger. Sommige van julle is ouer as ek. MySpace nog 'n ding toe ek jonk was. Ek is nie so oud nie. In elk geval, HTML net 'n vorm van hiperteks. So hiperteks is net teks met meer funksies. So oordrag protokol is waarskynlik die meer Iffy ding om te verduidelik. Dit is duidelik dat, transfer-- net die oordrag van die data. So óf tussen die kliënt, soos jou web broer en 'n bediener. So basies net die manier waarop die internet werk. So het die presiese versoek van hoe hierdie werk, ons is eintlik gaan om te kyk na 'n byvoorbeeld versoek en reaksie. Maar hoe ons versoek inligting vanaf 'n bediener en hoe die bediener reageer op ons is wat hierdie oordrag protokol regeer. So het die versoek en die antwoord het hierdie spesifieke stel reëls te volg. Dit is gestandaardiseer sodat geen saak waar jy die gebruik van die internet, dit werk altyd dieselfde, OK? Weer, protokol, stel reëls. Dit is net 'n normale interaksie op dieselfde manier dat Professor Malan praat oor As iemand strek hul hand, jy weet dat dit is algemeen vergunning aan bereik joune uit en skud hulle hand. Dit is 'n protokol, reg? So gee ek 'n paar gestandaardiseerde versoek wat ek wil om jou hand te skud, en jy gee 'n paar gestandaardiseerde reaksie, wat óf nee dankie of jy kan probeer en skud my hand of miskien jy gaan om te probeer en vuis stamp my. En ons het nie 'n protokol vir wat. Dit breek. Maar as almal volg die dieselfde protokol, natuurlik, dit gaan baie meer moeiteloos. Mense kry om mekaar te leer ken. Almal is gelukkig. So in die wêreld van die web, almal volg dieselfde rules-- effens beter as die sosiale standaarde. Maar met wat, sal ons kyk na 'n voorbeeld versoek hier. So daar is hierdie klein sleutel hier op die onderste wat vertel jy die verskillende kleure, wat hulle veronderstel is om te beteken. So wit is net soos jou metode versoek en protokol version-- so metode versoek weergawe. En dan is dit 'n gebied en die waarde van daardie gebied, wat ons sal gaan in baie, baie kort. So, dit is 'n voorbeeld versoek. Dit is soos ek brei uit wil myself voor te stel. Dit is wat die kliënt of wat jou webblaaier sou stuur na jou bediener. So, dit is 'n get versoek, so dit is vra vir iets van die bediener. En dit is natuurlik HTTP en dit is weergawe 1.1. So het die res van hierdie hier is wat ons noem die kop, en die ekstra inligting dit gee ons 'n beter idee van die wat ons eintlik vra vir, of inligting wat ons wil gee die bediener wat pertinent kan word. So User-agent, gee 'n paar meer beskrywing on-- byvoorbeeld hier, krul / 7.24.0 eintlik gaan vertel die bediener wat ons gebruik Google Chrome as ons leser. So as jy ooit hoor oor mense wat praat oor die maak van 'n app reageer om verskeie implementeer, dit is iets wat hulle sou gevolg gebruik as jy Ek weet nie wat die leser die versoek kom, jy kan nie op maat van die data dat. So in hierdie geval, gebruikers is bloot om hierdie soort van die identifisering van inligting oor wat die leser jou gebruikers gebruik tans, OK? So dan het ons ook die gasheer, wat waar ons eintlik wil om te gaan. In hierdie geval, ons wil om te gaan na apple.com, koop 'n paar cool nuwe iPads of iets, miskien oulike ligte by ons studente kamers. En die naam van waarde aan die einde is net 'n toevoeg, net 'n algemene ding vir julle om te sien. Dit maak nie eintlik ooreenstem met enigiets hier. So kan jy so veel of so het min as wat jy wil in elke geval. Die meeste van die tyd, dit is opsioneel. Dit hang net af wat jy nodig het van die leser, van jou gebruiker om behoorlik aan die versoek. Of dit hang af van wat jou gebruikers eintlik wil gee tot die bediener. So jy kan baie, baie van hierdie kop veld name of jy mag dalk net 'n paar. Soos met so baie dinge Ek het in hierdie afdeling het, dit hang af van die konteks van hoe jy die gebruik van hierdie. So doen wat sin maak vir almal? Dit is net 'n voorbeeld van 'n versoek, kop, noem maar op. OK, so met dit, ons het 'n paar reaksie. Weereens, ons het ons status kode, protokol weergawe, en dan in die veld naam en veld Waarde soos altyd. So ons protokol weergawe en ons status kode is 200. OK, wat beteken dat, Ja, alles het goed gegaan. Hier is wat jy wil. Die bediener tipe, die inhoud type-- dit vertel ons, OK, jy is gaan 'n paar teks HTML te kry. Hier is die lengte en hier is wat jy moet doen met die verband. OK, so weer, afhangende op die data wat jy vra vir, afhangende van wat die bediener wil na julle terugkeer, nie meer van hierdie veld kan hê name, kan jy minder. Heeltemal konteks afhanklik. En so ver as die status kode hier, natuurlik, 200 is nie die enigste een jy kan hê, reg? Ons het baie van die status kodes. Is daar iemand onthou enige van die ander wat ons in lesing genoem word nie? Baie van hulle begin met 4. Publiek: 404. ALLISON Buchholtz-AU: 404, wat is? Publiek: Lêer nie gevind nie? ALLISON Buchholtz-AU: Lêer nie gevind nie. Presies. So, wat oor 403? Publiek: verbode. ALLISON Buchholtz-AU: verbode. So, wat dink jy wat beteken dat met chmods? Publiek: Dit beteken dat jy het nie toestemming om dit te lees. ALLISON Buchholtz-AU: Presies. In een of ander manier, jy nie het nie toestemming om toegang te verkry, reg? So 404, 403. Daar is 'n baie snaakse een wat ons altyd stel elke jaar wat Ek moet sit het hier, soos 413, wat ek is 'n teepot. Jy kan google dit. Dis snaaks soos wat is die kode 413 en dit is Ek is 'n teepot. Wat ek nie weet waarom jy ooit nodig wat op die internet, maar ek afdwaal. Publiek: Miskien is jy 'n tee pot. ALLISON Buchholtz-AU: Miskien die bediener is 'n tee pot. Wie weet? Alle reg, so ons is op die punt om oorgang na die werklike kodering. Ek voel soos jy ouens gaan kry redelik vinnig hier uit. Publiek: Hoekom dit doen sê "bediener: twee keer? ALLISON Buchholtz-AU: Hm? Bediener twee keer? Dit is 'n goeie vraag. Ek is nie seker nie. Ek sal uitvind en Ek sal julle alle e-pos. OK, enige ander vrae behalwe dat? Goed? Cool. HTML en CSS, en nou is ons kry al die pret dele. So as ek voorheen genoem, HTML is waarskynlik een van die dinge wat julle is die meeste vertroud is met. Dus het ons HyperText Markup Language. Die beste manier om te leer this-- ek doen nie enige voorberei skyfies of enigiets vir julle met HTML. Dit is regtig oor die leer van die sintaksis. En as jy in die MySpace dag, sou jy dit af. So regtig, die grootste ding is net om te oefen en eksperimenteer. Een van die groot hulpbronne sou ek raai die gebruik is W3Schools. Dus net W, 3, en dan Skole. Hulle het 'n baie hulpbronne op HTML, op CSS, en hulle het eintlik 'n gesplete skerm soort van ding waar hulle sal gee jou voorbeeld kode. Jy kan peuter met dit, verander dit, en druk Update, en dit sal jou wys wat dit eintlik nie aan die webblad. So ek sou raai die gebruik van daardie. Dit is nogal cool. Jy sal nie seg foute kry hier wanneer dinge verkeerd gaan. As jy daarin slaag om te kry 'n seg fout met HTML, nie laat weet my, want ek is gaan werklike geboei word. Maar dit is werklik 'n koel, want jy dinge kan verander, jy kan sien hulle op hoogte live. En ek dink jy sal 'n baie kry meer intuïtief begrip van HTML as jy eintlik net spandeer tyd eksperimenteer met dit. So dit is waarom ek gesê het, praktyk en eksperiment. Google, van hier af uit, sal waarskynlik een van jou beste hulpbronne en vriende. Of Bing-- ek werk by Microsoft, so miskien moet ek sê Bing. Maar pretty much enigiets net gaan sintaksis te wees, so verstaan ​​wat die etikette is, understanding-- ten minste met CSS-- hoe sekere eienskappe te verander. Dit sal super nuttig wees. So selfs al het ons dit nie doen nie enige bereid dinge, ons het soort van 'n paar beste praktyke wat ons wil julle ouens om te probeer en bly deur- of eerder, behoort jy hou by tot verdere kennisgewing. So maak al jou tags. Hopelik almal has-- jy weet wat, As dit nie nou sin maak, Ek belowe dit sal sin maak wanneer ons kodering op die bladsy. Maar sluit al jou tags. So as jy ooit het 'n paar kop wat bracket, H1, bracket, maak seker dat wanneer jy klaar is met wat, jy maak dat kop. Bevestig jou bladsy met W3 Validator. As jy nie jou etikette sluit nie, jy kan onverwagte gedrag kry. Dit sal sê dat jou bladsy is ongeldig as jy loop dit deur hierdie validator. So wanneer in doubt-- en veral op hierdie week se en volgende week se pset-- in die dieselfde manier as wat ons vra om jou te gebruik nagaan 50 en styl 50, jy kon dink hierdie as een van u tjeks, OK? So as dit nie die W3 Validator slaag. Dit is iets wat ons sal dok jy op. Of ek vertel jou reg Nou ja, ek sal dok jy op. So maak seker dat dit bekragtig. Dit is nie moeilik. Jy plak net in jou kode en dit sal nie sê goeie werk of jy mis iets in die dieselfde manier die styl 50 vertel waar jy geknoei. En dan 'n laaste ding is wat jy wil om te skei jou opmaak, wat is al wat HTML of jou teks en jou stilering. So sal ons 'n voorbeeld te doen van daardie reg na hierdie. So HTML en CSS aparte moet wees. En ons gaan om te praat oor MVC, wat Model View Controller, volgende week. Julle moet waarskynlik leer oor wat in lesing môre as jy vandag reeds geleer het. En dit is net 'n soort van 'n paradigma wat ons geneig is om te gebruik wanneer die skep van web bladsye dinge te skei. Jy kan dink dit op dieselfde manier dat ons geneig is om te skei funksies in C waar ons hash dinge te vind. Dit is net 'n manier om te maak jou lewe makliker te maak. Dit skei uit eienskappe of kode wat jy sou gebruik word om oor en oor weer, maar op hierdie manier, is dit soort van hou dit mooi en netjies. En as jy wil verander een ding, jy dit weer verander en dit is oral anders verander. So dit is meer vir jou gemak en buigsaamheid. So met CSS, dit is baie soortgelyk HTML, maar in plaas van etikette dat ek nou net genoem het, ons gebruik wat genoem keurders. En hulle het basies net 'n soort Mede 'n sekere etiket in HTML met verskillende eienskappe. En as ek sê eienskappe, ek bedoel dinge soos lettertipe kleur, lettergrootte styl, die kleur van die agtergrond, die kleur van jou teks. Hierdie soort dinge. Asof dit gesentreer, As dit is af na regs, As dit is inverted-- al van hierdie cool dinge. Enige stilistiese dinge wat jy doen om jou teks, dit is wat ek bedoel met eienskappe. En dan twee belangrikste dinge om te weet, is dat selectors-- twee van die belangrikste factors-- is ID, wat uniek is. Jy kan net gebruik wat vir een ding. Andersins, dit gaan skreeu op jou. En wanneer ons dit definieer in 'n CSS-lêer, sal dit wees hash ID en dan Watter eienskappe wat ons wil hê. Ek belowe ons gaan gaan deur 'n voorbeeld. Dit sal 'n baie meer sin maak nie. Klas kan verwys na verskeie blokke. Sodat jy kan jou eerste en derde paragraaf dieselfde soort eienskappe as jy hulle assosieer met die dieselfde klas. En wanneer ons dit definieer in CSS, doen ons 'n dot-klas, met die klas om alles jy wil dit genoem word. So ek weet dit is reg nou baie abstrakte. Dit is hoekom ons gaan code. Ek weet julle is lief vir dat, en julle almal is gaan om my te help, want dit is jou webblad. Dit is ons afdeling se webblad, ouens. So is daar enige vrae voordat ek draai af van die PowerPoint, of enigiets jy wil my om terug te blaai voor ons begin kodering? Publiek: Wanneer jy sê pasmaat etikette, bedoel jy keurders of etikette? ALLISON Buchholtz-AU: Jy kan dink aan hulle as die dieselfde ding. Dis net verskillende woorde. Ek bedoel, soos keurders. Maar keurders het ook die kaart te etikette. So jy kan dink van hulle as effektief dieselfde ding. Ek belowe dit gaan maak meer sin as ons kode. Iets van die PowerPoint of enige vrae nou voor ons eintlik skep ons afdeling se bladsy? Almal gereed? Cool. So ek het 'n begin. Laat my verhoog die lettergrootte vir julle. OK, so nou het ons net 'n kaal bene webblad hier. Ons het 'n paar HTML. Ons het 'n paar kop, wat ons sien hier as voorbeeld webblad. Sommige titel, sommige skrif. Dit is etikette, OK? So wanneer ek bedoel sluit jou etikette, sien ons hier bracket kop is jou opening tag, en hierdie inkomstegroep / Kop is om dit te sluit, OK? So jy kan dink van hierdie as jou draadjies in jou as toestande of jou vir sirkelroetes. As jy een het aan die begin, jy een aan die einde. Dit sal nog steeds die meeste van die tyd werk As jy nog nie 'n geslote tag, maar die beste praktyk is naby jou tags. So in hierdie geval, laat ons dit verander. Ons gaan artikel sewe te hê. "Artikel webblad." So ek gaan net om dit te verander. En as ons gaan oor hier en ons reload-- gotta red en reload-- sien ons dat hier dit verander, reg? Cool. So dit verander die titel. Dit is net die op jou blad. So dit is soort soek soort van saai. Ek weet nie van ouens. Ek dink ons ​​wil iets anders hier. So wat ons kan doen is om die kop is net daar. Kom ons doen 'n soort van die liggaam. So ons het 'n paar liggaam hier. Ek het altyd oop te doen en sluit my etikette te begin, in dieselfde manier as wat ek doen draadjies. Ag. Wag, wat? Publiek: [onhoorbaar]. ALLISON Buchholtz-AU: Ag. Julle het my. Goeie werk. Goue ster. OK, so ons het 'n paar liggaam hier. En nou, laat ons begin 'n teks te voeg. So jy het 'n paar verskillende opsies vir die toevoeging van die teks. Ons het dinge soos kop. Ons het net gewone teks. So laat ons net begin met 'n kop. Eintlik, as jy ouens wil te trek W3 Skool se HTML, jy kan soort van kyk rond en as daar enigiets veral wat jy wil om te probeer om uit te met hierdie webblad, kan ons dit doen. So in hierdie geval, laat ons net doen 'n paar H1. So H1 is soos die hoogste kop. Dit sal jou iets gee dit is 'n baie groot en vet. En in hierdie geval, wat wil ons vir die eerste teks op ons webblad? Enigiets. Julle gaan hierdie te skep. Ek gaan net om te tik. Publiek: Welkom. ALLISON Buchholtz-AU: Welkom. OK, so as ons dit red en laai, ons het 'n groot groot welkom. So net so kan jy sien die verskille, laat ons iets doen op H6. Wat wil ons hier? Reg? OK, so net sodat jy kan sien die verskil. Ja, Sublime. So as jy sien, H1, baie, baie groot. h6 soos vet, maar baie kleiner, en jy het alles tussenin. Sodat jy kan hê h2, H3, h4. En dit is net kop, So as jy probeer 'n webblad te skep wat het verskillende afdelings, Miskien het jy wil gebruik kop in is daar iewers. Cool. So ons sal meer by te voeg dinge in ons liggaam. Ek sien dat dit soort sou wees cool as ons het 'n foto. Ek voel soos almal dalk kan gebruik 'n oulike bunny prentjie reg oor die nou, so ons gaan om uit te vind 'n bunny prentjie eerste. Ek weet nie of julle enige voorkeure op watter een ons wil hê. U enige voorkeure nie? Hierdie een hier? Af. OK. Dat 'n mens dit is. Goeie keuses. OK, so ons gaan ons beeld te sien. Kyk na daardie. Kyk na daardie pragtige ding. Hoe kan jy hartseer op 'n Maandag met hierdie? So ons is maar net gaan die beeld URL te kopieer. En wat ons wil doen, is, laat ons net sê ons het 'n paar p paragraaf. Ons gaan om te sê: "Kyk kyk na die oulike haas. d'awwww. " Ek hou van my hasies. Ek het 'n hasie by die huis. Ek mis my haas. So, wat gaan ons do-- Ek weet nie of julle wil this-- maar met HTML Google Hoe kan jy 'n beeld? Letterlik, as jy Google "Sluit beeld HTML," Hoekom vertel jy nie ouens my wat hierdie merker moet wees? Publiek: img source-- ALLISON Buchholtz-AU: img source-- Publiek: --equals-- ALLISON Buchholtz-AU: --equals-- Publiek: --quote-- ja. ALLISON Buchholtz-AU: Perfect. Pragtige. Kyk, MySpace geslag, reg? Publiek: Neopets. ALLISON Buchholtz-AU: Neopets. O, OK. Sjoe. Dit was mal. OK. So maak seker ek kry dit reg. Cool. So dit moet hier wees. En dan as ons herlaai, ons het ons bunny op die bladsy Is dit nie adorable? Dit is so oulik. Jy verkies om 'n groot, groot foto. Ek grawe nie. OK, so ons het hierdie pragtige bunny nou. Ons was in staat om 'by te voeg beeld, net soos dit. So basies as daar enige beeld jy wil toe te voeg tot jou webblad, jy kan dit voeg net soos hierdie. Nog 'n ding sou wees as jy het die beeld gestoor in dieselfde gids as hierdie lêer, kan jy net skryf wat die naam van die beeld is in plaas van 'n web-skakel. Dit sou nog steeds in aanhalingstekens. Dit sou net soos as ons die naam this-- As hierdie foto is gered in die gids met hierdie HTML lêer dat ek redigering en dit genoem bunny.jpg. Ons kan ook doen en dit sou opdaag. Ek het egter nie hierdie gestoor in die lêer, en ek wil die hasie te hou, so ons gaan die skakel te hou. Publiek: Wat is rabbit.org? ALLISON Buchholtz-AU: rabbit.org. Dit is 'n appropriate-- kyk, kan jy dit aanvaar. Aanneming. bunny.jpg. Ek wil hierdie bunny te neem. O, God, dit is so oulik. OK, so ons het kop bygevoeg. Ons het 'n foto bygevoeg. Natuurlik, ons het bygevoeg teks hier, reg? As ons wou ander te voeg tekste, sal ons gaan soos hierdie. So, dit is 'n ander punt. En ons sê: "Dit is nog 'n punt." Ook, ek is 'n verskriklike speller, sodat ek kan spelfoute dinge. Ter inligting. So ons het 'n ander paragraaf hier, reg? So miskien het jy wil om iets te doen 'n bietjie meer interessant as net al jou teks, soos reg in lyn. Miskien wil jy jou teks te sentrum, OK? So as iemand wil diegene te gebruik handig rekenaars in die voorkant van jou en my vertel hoe jy gaan hierdie teks sentrum, Publiek: p align. ALLISON Buchholtz-AU: So p align gelyk "sentrum." Hy is die dood nie, ouens. Y'all nodig om te stap. En ons het "Dit is gesentreer." En nou het ons iets gesentreer. In dieselfde manier, as jy wil dit in lyn links, jy align gelykes kan doen links, sluit gelyk aan reg. Heeltemal aan jou. As ek het hier, dan is dit should-- nou is dit reg in lyn. Publiek: Allison? Deur die beeld bron, waarom nie daar naby van die img bron? ALLISON Buchholtz-AU: Jammer. Hierdie een moet wees daar Nou is jy goed. Nou is ons goed. Publiek: Het jy nie ' om dit daar te sluit, of nie? ALLISON Buchholtz-AU: Wel, so img bron, is hierdie een just-- met die beeld, dit is net gesien as een element, terwyl as jy sien vir die res van hierdie, Ons het 'n paar tag dan inligting wat dit betrekking het op en dan 'n sluittag. Maar met die beeld, alles net soort van self-vervat. Cool. So julle weet hoe om 'n te skep kop, jy weet hoe om insette teks, jy weet hoe om 'n beeld te sit nou kan jy bring dinge. Nog 'n ding wat jy dalk wil in staat wees om te doen is 'n lys te skep in CS-- ons soort van gaan in die volgende week se pset. Die dinge wat ons hierdie week tipies leer gaan baie goed met volgende week se pset, so ons is soort vermenging, oorvleuel dinge hier. Maar dit sal nuttig wees vir die volgende week wees. So, as ons wou 'n paar te skep lys, hoe kan ons dit doen? Jy kan nie antwoord op hierdie tyd. Iemand anders het om te. Dit is nie moeilik, ouens, belowe. Google "On-geordende lys HTML." Wat was dit? Publiek: [onhoorbaar]. ALLISON Buchholtz-AU: Right. So wil ons bestel of geordende? Kom ons doen 'n geordende. So ons het 'n paar ul, wat staan ​​vir On-geordende lys. En wat het ons vir elke element? Is dit nodig het om sy eie etiket? Kan ons net begin skryf nie? Publiek: li. ALLISON Buchholtz-AU: li. So, wat is die lys gaan wees? Wat doen ons hier? Ons doen net name. Net doen Jakob. Publiek: Rabbit kos. ALLISON Buchholtz-AU: Rabbit kos. OK Ek hou van hierdie. Haas kos. OK, so ons het wortels. Ek hou van hierdie haas tema. Ek grawe dit baie. Publiek: Eintlik het ek gedink Jakob sou wees om 'n wettig. ALLISON Buchholtz-AU: Jakob? Jakob is haas kos. As jy gesien het Jakob se foto van kantoorure, jy dalk gedink het hy het aangeval deur 'n moordenaar haas. Publiek: Ek het 'n haas nou. Ek het 'n moordenaar haas nou. ALLISON Buchholtz-AU: Is jy laf? Publiek: Ek sal dit volgende artikel te bring. Ek het dit. ALLISON Buchholtz-AU: Dit is belaglik. In elk geval. Publiek: [onhoorbaar] Publiek: Ja, my Proctor het 'n haas as well. ALLISON Buchholtz-AU: Ek wil 'n haas. OK, wie bring 'n werklike haas die volgende afdeling, totale poeding punte. Publiek: [onhoorbaar] Publiek: O, dit is nie werklik nie. Dit is 'n opgestopte haas. ALLISON Buchholtz-AU: O Ja, ons kan toemaak hierdie. Lyk rad. Publiek: Is dit werklik saak? ALLISON Buchholtz-AU: Dit maak nie. Met die meeste van hierdie dinge, jy maak nie die merker, 99% van die tyd niks sleg gaan gebeur nie, maar dit is 'n goeie styl ook. So het Jakob. En ons het blaarslaai. Publiek: Vir skakels, dit is baie belangrik. ALLISON Buchholtz-AU: Hm? Publiek: Vir skakels. ALLISON Buchholtz-AU: Vir skakels. Ja, hiperskakels dit nodig het. OK, so laat ons sien hier. En ons het die einde van die lys. En ons kyk na dit. Ons het all-- Jakob net daar. Haas kos. Herinner my aan Bunnicula. Publiek: [onhoorbaar] ALLISON Buchholtz-AU: Ek is terug te bring al die ou skool verwysings vandag is ek nie? Net al die ou skool verwysings. Wil gebring het Gogurts of iets vir snacks. Publiek: Of OORBRUISING. ALLISON Buchholtz-AU: Oh. OK. Ek sal kyk of ek kan dop af OORBRUISING vir volgende week. Ek dink ek kan dit doen. Ek dink ons ​​kan hê sommige in die kantoor. OK, so ons het onder 'n baie verskillende dinge wat jy kan doen met HTML, reg? En as jy dalk kan sien, is dit nothing-- hopelik nie te intim-- As dit is nie, ek bedoel nie iemand te verkleineer. As jy probleme het, kom asseblief met my praat. Maar die meeste van dit is net kyk na die sintaksis, reg? As jy wil 'n geordende lys As jy wil 'n soort van die lys, As jy iets wil bring of formaat iets, dit is al oor die net soort soek na die sintaksis vir HTML, reg? En een ding wat pretty cool eintlik is as jy gaan aan- laat sien, Wat is 'n lekker webwerf wat ons wil? Iemand enige gunsteling webwerwe wat OK aanlyn te bring nie? Jy weet wat, laat ons net doen CS50. Dit is lekker en veilig is, reg? OK, so CS50 hier. O sien, is daar 'n artikel op die oomblik. As jy graag die manier waarop dit lyk. Publiek: [onhoorbaar]. ALLISON Buchholtz-AU: Ons is nie gaan meta artikel te doen, ouens. Dit is nie gebeur nie. Dit sou cool wees, maar ons is nie van plan om dit te doen. So, wat doen jy kon doen as jy hou van die manier hierdie werk is wat jy kan altyd reg Klik op 'n webblad wat jy wil en wat jy kan doen View Page Bron. Dit sal bring al die HTML. En dit is eintlik 'n baie goeie manier om jou eie webblad te stileer. Gaan na 'n webblad wat jy regtig wil en kyk na die HTML en uit te vind hoe hulle dit gedoen het. En letterlik, solank as jy noem dinge, so lank as wat jy is nie net steel van mense, dit is OK. Veral vir CS50 [? finansier?], ons is soort van verwag om jou te kry inspirasie uit ander webwerf. So voel vry. Kyk deur webwerwe wat jy dink is baie mooi en uit te vind hoe hulle gebruik HTML en CSS van hierdie dinge te doen. So as jy hier sien, is daar natuurlik soos links en ons het 'n klas hier. Ons het 'n skakel hier. Ons het 'n lys. Ons het waarskynlik 'n paar foto's hier iewers. Ons het 'n paar koel styl hier. Dit is die volgende ding ons gaan doen. So styl, wanneer jy sien dat hierdie styl hakies, dit is CSS basies. Ben, het jy 'n vraag? Publiek: Wat is div? ALLISON Buchholtz-AU: div is net a-- wat div? Publiek: Afdeling. ALLISON Buchholtz-AU: Afdeling. Ja, dit is net soos skei verskillende elemente. OK, so hier is wat ons is gaan om te gaan na die volgende. So is dit dalk nie die beste styl, want as jy sien ons het HTML en styl in dieselfde bladsy, en ons wil eintlik diegene te skei, OK? En eintlik, laat my open my regte een omdat dit veronderstel is om te wees die PDF, so ons het style.css. So, wat kan ons hier doen, is om hierdie koel dinge soos 'n vervaag en ons kan probeer en dit doen, maar ek voel soos ek sou gemors wat op die vlieg, so ek moedig julle aan gaan probeer om op jou eie, maar ek is nie van plan om dit reg te doen nou. So as jy ouens, onthou, As jy al ooit getref probleem stel, iets swiep uit die kant. Dit het te doen met die vervaag en die oorgang en noem maar op. Publiek: En dit is al wat CSS en HTML? ALLISON Buchholtz-AU: All CSS en HTML. Ja. So kan jy 'n baie te doen regtig koel dinge met CSS en HTML. So met ons ontsagwekkende bunny webblad hier, ons gaan 'n bietjie te doen bietjie CSS styling met dit. So as jy ooit 'n styl vel, wat ons hier het, jy kan net noem style.css. Jy kan dit noem wat jy wil. Wat belangrik is, is dat ons gaan om dit te verwys in ons web.html hier. So wat ons gaan doen, is om we-- so ek doen nie gemors hierdie up-- Ons gaan om te skakel hierdie twee lêers saam. So in dieselfde way-- ek gaan 'n analogie om hier te vestig op C. In dieselfde manier dat as jy ' sommige library-- en ons het cs50.h-- ons samesteller verbind dit. Dit is net 'n eksplisiete skakel aan ons kant. So in die dieselfde manier as wat ons doen hash sluit 'n paar lêer, wat Ek is om oor te skryf is net die HTML / CSS ekwivalent van daardie. Ons is net sê, OK, hierdie webblad gaan hierdie style te gebruik, OK? So het ons 'n skakel rel gelyk aan style. En dan het ons tipe, css. En dan gelyk href. OK. So dit alles het hier is wat jy kan dink aan dit as dieselfde ding as 'n gemors sluit. Dit is duidelik dat dit lyk 'n bietjie meer ingewikkeld, maar in alle gevalle, dit is effektief dieselfde ding. So dit is net 'n paar koppeling van 'n styl blad, is dit van die tipe teks / css, en die naam van dit is style.css. Wat is belangrik om te weet is dat die webblad dat ek werk reg now-- web.html en style.css-- is in dieselfde gids. Omdat in verskillende dopgehou, moet jy die werklike wortel te gee dit of die pad om dit te. Maar in hierdie geval, ons hou dit super eenvoudige en dit gaan om hier te wees. So as ons dit doen, ek het 'n paar dinge reeds tougestaan ​​hier. So ons het 'n paar liggaam, wat gaan ons agtergrond, het wat nou is lig blou. Ons kan dit verander as ons wil, maar As ek onthou dit korrek, dit moet net verander dit aan die lig blou. En nou het ons 'n ligte blou agtergrond. En ons het here-- kan iemand onthou watter een is hash ID of klas? Publiek: ID. ALLISON Buchholtz-AU: ID. Cool. So wat ons wil doen is wat van hierdie fonts of which-- wil ons "Kyk na die oulike bunny "pers te wees? Ek dink ons ​​wil om dit te pers wees. Ek is redelik af met daardie synde pers. So, wat jy doen, is jy ID equals-- in hierdie geval Ek het gesê, wat, mooi kleur hier. Ons laai. Al van 'n skielike, dit is pers. OK, so met ID, onthou dit moet uniek wees, so ek moet nooit gebruik word om hierdie ID nêrens anders. Maar met die klas, as ons 'n hier met 'n mooi skrif, Ek moet in staat wees om te gebruik dat waar ek wil. So kom ons doen hierdie een hier. Dus kan ons sê klas gelyk mooi font. En as ons kyk nou, ons het hierdie cool mooi font hier. So miskien is ek wil beide te doen. OK, ek weet eintlik nie of dit is gaan werk, maar ek wil om dit te probeer. En dit is hoe jy leer CSS en HTML. Jy is soos jy weet wat, ek wil om dit te probeer. Ek is nie seker of dit gaan werk nie. Kom ons kyk of dit werk. En kyk na dit. Nou is dit in pers en dit is 'n mooi font. OK, so jy het al hierdie verskillende dinge wat jy kan doen. Jy 'n vraag nie? Publiek: Ja. Wel, net soos die kleure jy gebruik is woorde. Is daar 'n manier om kleure te doen met die heksadesimale RGB? ALLISON Buchholtz-AU: Jy kan ook doen dit met hexidecimal, ek glo nie. Ja. Maar dit is soort van lekker as jy wil hulle nie op te kyk. Jy kan net wees, pers of blou. Publiek: Kom ons hoop hulle weet wat dit beteken. ALLISON Buchholtz-AU: Right. So laat ons hierdie lees of chartreuse. Hoekom sou jy ooit chartreuse kies? Dit is 'n interessante kleur. OK, so duidelik dat ons kan sien ons dinge kan verander maar ons wil hê. As jy wil create-- kom ons sê Ons wou 'n ander klas te skep. Wat kan jy ouens wil verander? As jy trek W3Schools ' CSS dokumentasie, Ek verlaat die vloer met julle. Ons kan probeer om iets koel doen met dit in die laaste paar minute. Want ek het soort van jou 'n crash kursus oor 'n baie van die koel dinge wat jy kan doen. Maar in die einde, soos ek gesê het, as jy net eksperiment sal jy 'n baie leer. Publiek: Het jy kyk wat skrif? ALLISON Buchholtz-AU: Ja, Ek het opgekyk dat lettergrootte. Dus, net soos letterlik, ek loop, aan- wat het ek gedoen? Ek het CSS font lys en dan het ek font stapel, en dan was ek soos, kyk, hier is al die koel fonts wat jy kan doen. En daar was hierdie een, sodat Ek is dit kopieer na my knipbord. En dan was ek wil, OK, koel, daar gaan ons. Alles gedoen. Publiek: So jy het om seker te maak dat CSS weet wat daardie skrif is. ALLISON Buchholtz-AU: Ja. Publiek: Wat sê dit aan die einde? Lopende? ALLISON Buchholtz-AU: Lopende. Ja. Publiek: Agtergrond beeld. ALLISON Buchholtz-AU: Agtergrond beeld. OK. So jy wil vir my vertel hoe om dit te doen nie. Ek laat dit aan jou. Ek is net te tik hier nou. Die wiel is in jou hande. Publiek: OK ALLISON Buchholtz-AU: OK. Wat doen ek? Publiek: Doing-- Ek weet wat kom nadat die krullerige stut. ALLISON Buchholtz-AU: OK. So waarskynlik in die liggaam, het ek sou aanvaar, want ons is doen met die agtergrond beeld. Publiek: Ja, laat ons dit doen. ALLISON Buchholtz-AU: OK. Publiek: OK, so agtergrond kolon, en dan moet ons 'n URL-adres van die beeld. Miskien pseudo-kode wat vir nou, miskien. ALLISON Buchholtz-AU: Wat sou jy graag my aan- Publiek: Ek dink soos 'n gif. ALLISON Buchholtz-AU: 'n GIF? Dit gaan interessant wees. OK, wat ek hier googlen? Publiek: Nee, dis jou keuse. ALLISON Buchholtz-AU: Hoekom nie we-- nie as dit 'n bunny, Ek voel soos ons moet 'n mooi gras grasperk of iets. Publiek: Meadow. A wei. ALLISON Buchholtz-AU: 'n wei? OK. Publiek: Of Rachel Maddow. ALLISON Buchholtz-AU: Hierdie een lyk mooi. O, dit is klein, al is. Ons moet 'n goeie grootte beeld. Kom ons kyk. O, kyk. Dit is 'n mooi veld. Jy weet wat, ek hou van hierdie een. Kom ons kopieer hierdie een. Publiek: OK, so ek dink dit is die URL, oop hakies. ALLISON Buchholtz-AU: OK, URL. Publiek: Toe die adres. ALLISON Buchholtz-AU: OK. Is dit al wat ons nodig het? Publiek: Close hakies kommapunt, en dan ruimte, agtergrond koppelteken beslaglegging kolon vaste en krullerige stut. ALLISON Buchholtz-AU: OK. Kom ons kyk of dit werk. Dit gaan wees pretty cool as dit nie. Ek is werklik opgewonde hier. Dit het nie gewerk nie. Ek wonder hoekom. Publiek: Miskien is die URL moet in aanhalings. ALLISON Buchholtz-AU: Miskien. En dit is hoe ons leer, ouens. Publiek: Kan ons 'n agtergrond kleur en agtergrond beeld? Publiek: No. Een vervang die ander. ALLISON Buchholtz-AU: Ek weet nie. Kom ons kyk. Kom ons check dit uit en sien. Publiek: Ag, miskien, ja. [INTERPOSING Voices] ALLISON Buchholtz-AU: OK, dit is obviously-- ek [onhoorbaar] hier. So OK. Publiek: Agtergrond skakel. ALLISON Buchholtz-AU: Ag. Publiek: OK, ek weet nie. ALLISON Buchholtz-AU: Dit lyk soos dit moet werk. Is jy seker dit is kolon na die URL? Publiek: Nee, dis kommapunt. ALLISON Buchholtz-AU: Dis kommapunt. Publiek: Het ek sê kolon? ALLISON Buchholtz-AU: Jy het gesê 'n kolon. Publiek: O nee. ALLISON Buchholtz-AU: Daar gaan jy. Publiek: O, wag, nou Ons kan nie die teks lees. ALLISON Buchholtz-AU: Nou jy kan nie die teks lees, maar ons het die agtergrond beeld. Mmhmm? Publiek: Is HTML ondersteun dinamiese inhoud? Soos, kan jy die grootte van die foto afhangende van die venster grootte, of is dit 'n CSS-- ALLISON Buchholtz-AU: So CSS het om dit te doen. So as julle belangstel in leer gevorderde CSS, Ek is mede-onderrig van 'n seminaar oor CSS op die 7de. En ek belowe dit sal veel meer in diepte en nie veel meer cool dinge in hierdie afdeling. En my mede-onderwyser is soos totale voorkant web dev meester. So sal dit redelik koel as jy wil wees oor al die cool dinge om te leer dat CSS kan doen. Maar wat ons hier met sy agtergrond skakel fixed-- so dit is 'n vaste size-- maar jy kan eintlik dynamically-- As jy al ooit die web bladsye, as sien meeste goeie webblaaie sal doen, wanneer jy pas die grootte van die leser, dit pas die agtergrond of hoeveel toon of reformats dinge, reg? So dit is wat ons noem relatiewe posisie. En CSS kan eintlik gryp hoe groot jou leser breedte is of hoe lank dit is nie, en jy kan dinge posisioneer volgens die relatiewe groottes versus absolute groottes. En dit is natuurlik meer gevorderde CSS, maar dit is iets wat jy kan doen. As jy wil om te leer meer, kom na my seminaar. So dit is iets wat jy kan doen. En CSS kan eintlik do-- CSS en JavaScript, wat ons kry in die volgende week-- kan jou toelaat om dinamiese verander bladsye sonder om te herlaai hulle al die tyd. En jy kry 'n paar om te doen pretty cool dinge. So is daar 'n ander ding dat julle kan wil om te doen of enigiets wat jy wil om te verken? Ons het 10 minute oor. Ons kan ook vroeg verlaat, maar as jy wil 'n paar meer web dinge te doen, ons kan, maar ek is nie gaan jou dwing om te. Maar ons kan ook net eet lekkergoed. Publiek: Lig die teks wit so kan jy dit gelees het. ALLISON Buchholtz-AU: OK. So in hierdie geval, ons wil 'n paar p. Publiek: Indien ons dit doen in die liggaam, sodat dit geld vir die hele bladsy? ALLISON Buchholtz-AU: Ja, ons kan eintlik. Dit is 'n goeie idee. Sodat ons have-- jy doen weet wat ons behoort te wees? Ek weet nie of ons kan teks kleur te doen. Ek gaan om te probeer en skep 'n ander klas hier. Publiek: Hoe kan jy so kry nie dat dit die voorstelle? ALLISON Buchholtz-AU: So As jy ouens is wat belangstel, dit is nog 'n teks redakteur genoem Sublime. Jy moet in staat wees om installeer dit op jou toestel. Soms is dit kry 'n bietjie lastig. As jy wil help met dit, Ek is super gelukkig om jou te help met dit, want gedit is groot en dit is awesome, want jy kan dit stel op die bodem, maar ek het regtig soos Sublime, want dit is mooi en dit nie doen nie dinge soos motor-volledige. So jy kan beslis voel vry om te Laat my weet as jy wil om dit te doen. As jy net google "Sublime teks, "is dit tipies het instruksies oor hoe om te installeer op verskeie bedryfstelsels. Dit is werklik 'n koel, ek dink, in my opinie. So p. Ek dink ek kan net nie text-- of Ons kan net nie die kleur "wit". Daar. So, wat ek gedoen het hier is dat ek het nie al die teks verander. Maar p hier is net 'n tag wat ons het, reg? Hierdie paragraaf tag. So ek het net 'n CSS element wat gesê, OK, enigiets met hierdie merker p, maak die kleur wit. So as jy opgemerk het, dit het hierdie wit en hierdie wit. Dit het nie ons lys wit omdat dit is nie verband hou met dit. Jy kan deur te gaan en jy kan say-- Publiek: Doen agtergrond. ALLISON Buchholtz-AU: Agtergrond kleur? Publiek: Agtergrond tot die pyp in kleur waar jy die p tag. ALLISON Buchholtz-AU: OK. Jy wil dit wit? Publiek: Mmhmm. ALLISON Buchholtz-AU: OK. Daar gaan jy. Publiek: Dit is vreemd. ALLISON Buchholtz-AU: Pretty cool, reg? So as jy net gemors rond, jy gaan 'n baie om te leer. En dit kan wees pretty cool. Ek dink dit is beslis meer bevredigend as soms want jy hoef nie te wag vir jou program saam te stel. Jy kan net getref verfris en jy soos, O, kyk, dit gewerk het, of O, ek is waarskynlik iets mis. En dit is iets wat regtig koel oor hierdie volgende deel van die klas, is dit is beslis, ek Dink makliker om te kyk as jy gaan langs die pad versus met hierdie lang programme te skryf en wat en bid dat dit werk aan die einde. So met dit, ek dink julle almal lyk goed. As jy enige vrae het, soos altyd, kom praat met my, kom laat my weet. Ek sal reg buite wees vir die volgende 15 minute As jy wil om te gesels oor alles en nog wat. So ek hoop jy guys-- Sterkte met hierdie pset. Die sperdatum is Vrydag op die middag want dit was laat vrygestel. So ek sal waarskynlik sien word baie van julle ouens op Donderdag, maar hopelik nie. Miskien het jy dit gedoen het deur toe. Ek wil wees super trots. Maar indien nie, sal ek julle sal sien Donderdag. Jy kan ook gebruik om 'n laat datum, wat strek dit tot Saterdag op die middag. Maar ek huh don't--? Publiek: Halloween. ALLISON Buchholtz-AU: Dit is Halloween, 'n, en b, Ek dink nie daar sal wees kantoorure op Vrydag. So regtig probeer en kry dit gedoen deur Vrydag sodat ons almal kan vier Heilig naweek. Alle reg, ek sien julle ouens volgende week.