[Muziek] ALLISON Buchholtz-AU: Oké, iedereen. Welkom terug bij sectie. Dus onze agenda voor vandaag gaat over veel meer web dev spullen. Ik weet niet hoeveel van u uw psets hebt gezien sinds het werd uitgebracht eerder deze ochtend. Ik zou als hoeveel mensen hebben de spec gelezen, maar zien hoe je alles hebt gehad van, als, zeven uren naar kijken en het is een maandag en je hebt waarschijnlijk had klasse, Ik ga ervan uit dat de meeste van jullie hebben niet. Als je hebt, extra kudos. U bent in principe helpen implementeren van een eenvoudige web server in C, dat is een gloednieuwe PSET, dus jullie krijgen de cavia's zijn. Het zal een plezier zijn, wilde week, maar ik denk dat het een heel leuk worden en het zal een echt goede ervaring eigenlijk. Dus om je voor te bereiden dat, in sectie vandaag, we gaan chmod, TCP / IP te gaan, en vervolgens een beetje van HTML en CSS. 

Op het einde, we eigenlijk code up van een eenvoudige webpagina samen om u te helpen jongens min of meer kunt meer vertrouwd mee. En dan als je niet hebt opgepikt uw quizzen, ze zijn aan de voorkant, maar ik ben vrij zeker dat iedereen hier heeft hun quiz. En ook op deze nota, oplossingen voldoen nog niet, maar zodra we finish-- willen, de laatste paar mensen die hun quizzes-- zij zullen worden. Als u vragen heeft in de tussentijd, voel je vrij om zelf e-mail me. Ik zal reageren met uw individuele vragen, zoals ik altijd doe. 

Dus op die opmerking, chmod. Dus eigenlijk alles wat je moet weten over chmod is dat het wordt gebruikt om te veranderen bestandstoegang, toch? Dus het is slechts enkele systemen noemen het een Machtigingen wijzigen, zoals het hier staat. En als je ooit wilt zien Welke rechten heeft een bestand, in plaats van gewoon te doen ls, kon je ls -l doen. L staat voor lang. 

Dus je zult lange lijsten doen van alles, en het zal je veel meer gedetailleerde geven informatie over elk van uw bestanden. En je zult zien something-- ik ben gaan om vooruit te spoelen voor een second-- maar je zult iets dergelijks te zien die bovenste lijn er voor elk bestand. En we gaan door wat dat betekent. 

Dus eigenlijk, om te veranderen permissies, wil je gewoon chmod gebruiken. U kunt hierbij denken aan het als elke andere UNIX noemen als ls of cd of zo. Het is gewoon een soort van een ander zoals call. 

Dus we doen chmod en dan zullen we hebben drie cijfers meestal. Er zijn een paar manieren om te doen het, waarvan we zullen overgaan. Maar meestal zul je drie hebben getallen variërend van 0 tot 7 telkens. 

Dus een ding is dat er drie verschillende toestemmingen dat we elk bestand kunnen geven. En het is leesbaar, wat vertegenwoordigd door r, die zin zal maken in een klein beetje; w, hetgeen beschrijfbaar; en uitvoerbaar, dat is x. Ik weet dat de e ene, uitvoerbare, misschien niet het meest logisch, maar we vertegenwoordigen het met x. 

En wat gebeurt er dan is elk van deze hebben ook de nummer representatie. Dus we hebben 1, 2, en 4. En eigenlijk wat er gebeurt is elk van deze drie getallen hier overeen met een andere set van gebruikers dat deze rechten betrekking hebben. 

Zo kunt u eerst bedenken dat nummer correspondeert met de werkelijke gebruiker of de eigenaar van het bestand, de tweede nummer correspondeert met de groep, en de laatste verwijst aan de wereld, OK? Dus wat er gebeurt is onthouden die numbers-- r 4, w 2, x is 1, toch? Dit-- als je samenvatten deze up, dat geeft je dat eerste getal dat we zouden kunnen invoeren in onze chmod. 

Dus in dit geval, wat zou dit aantal zijn? Het zou 4 plus 2 plus 1, dat is een 7, toch? En in dit geval, deze hebben niets, dus dit hier zou doen vertalen naar chmod 700, OK? En wat dat doet is het verleent alle van deze machtigingen aan uw gebruiker. 

Dus dit betekent dat onze gebruiker kunnen doen wat ze willen. Ze kunnen dit bestand te lezen. Zij kunnen dit bestand uit te voeren. Ze kan schrijven naar dit bestand. Maar groep en de wereld geen permissies dan ook, OK? 

Dus een andere manier om te schrijven dat, we kunnen doe chmod van drie cijfers, die elk overeen met de som ongeacht of die specifieke groep is, specifieke deelverzameling. Of we kunnen eigenlijk doen een ander ding. Hold on. We kunnen iets met deze hier te doen. 

Hoeveel van jullie een voorbeeld zag waar het was om een ​​plus x chmod? Heb je die in collegezaal, denk ik? Dus staat voor alle. Het betekent het aan alle gebruikers, die ik ben vergeten om hier te zetten. 

Maar een plus x, als we merkt hier, als we dat doen om chmod-- welke groep we zijn praten over plus de permissies we willen hen te geven. Dus dit kan een plus of een min worden. Plus voegt toestemming. Minus neemt toestemming weg. Vrij intuïtief, denk ik. 

Dus een plus x betekent chmod. Dus verander de permissies van alle mensen als dit een a-- add permissies. En x-- dat betekent wat toestemming zijn we het verlenen van iedereen. Lezen, schrijven of uit te voeren? 

Publiek: Uitvoeren. 

ALLISON Buchholtz-AU: Uitvoeren. Dus we geven alle gebruikers toestemming om dit bestand uit te voeren, OK? Dus wat als we wilden doen dat met de numerieke vorm? Dus vergeet niet met numerieke, we willen drie nummers. 

Publiek: 4. ALLISON Buchholtz-AU: Wat was dat? Publiek: 4. ALLISON Buchholtz-AU: Not 4. Publiek: 0, 0, 4. ALLISON Buchholtz-AU: Nou, we willen om het te geven aan alle gebruikers, toch? Dus we gaan te hebben een aantal in elke sleuf. Dat gaat het worden hetzelfde nummer in elke sleuf want we willen gewoon geven iedereen executable permissies. Dus uitvoerbaar is 1, maar op het juiste spoor. 

Dus als we chmod 111 dat zou doen zijn het equivalent van chmod een plus x. Is dat zinvol voor iedereen? We gaan om te gaan door een paar voorbeelden. 

Dus de grote afhaalrestaurant Hier is een niet op hier, maar betekent gewoon geef het aan alle gebruikers. u is als je gewoon wilt aan te geven of mee te nemen een specifieke toestemming van de gebruiker of de eigenaar. G is voor de groep, zodat middelste cijfer. En dan anderen die je kunt bedenken als de wereld, dat laatste cijfer. 

Dus met dat, gaan we naar een voorbeeld, want ik voel me als voorbeelden altijd maken deze dingen makkelijker te begrijpen. Dus rwx-- we door dit-- ging kan ook vertegenwoordigen als 700. Dat is het voorbeeld dat we keken bij meer van het beeld. Dus chmod 444 op sommige bestand zou geven welke permissies? Je was echt dicht. Publiek: Leesbaar voor iedereen. ALLISON Buchholtz-AU: leesbaar. Dus leesbaar voor iedereen, toch? En wat is dan een andere manier om dat te doen? Als we willen chmod doen met ofwel r of w's, plus en minnen, wat zou dat gesprek eruit? Het zou worden chmod wat? 

Publiek: een plus r. 

ALLISON Buchholtz-AU: een plus r op de 5. OK, dus dit is hetzelfde als deze, slechts twee verschillende vertalingen van hetzelfde. Dus met dat, wij hebben deze. Dus ik wil jullie om te proberen en te schrijven deze soort in hun tegenovergestelde manier. 

Dus met chmod 555, wat zou het zijn? Zou het een plus of u plus of wat? For u plus x, geef mij de drie nummers. En dan vertel me over welke permissies we zijn eigenlijk de toekenning en op wie? 

Dus zal ik jullie twee geven minuten aan werken. Voel je vrij om met elkaar te praten. Voor degenen onder u die in een beetje kwam laat, er is snoep en overhemden. We hebben drie overhemden verlaten, en we hebben Kit Kats en Starbursts. Dus voel je vrij om grab komen sommigen in dit kleine intermezzo. 

Ook de laatste is lastig. Het is twee chmods voor de laatste. Eigenlijk, laat me die deur sluiten terwijl jullie bezig zijn dat. Candy is altijd nodig op maandagmiddag. 

OK, dus chmod 555. Wat is een andere manier kunnen we schrijven dat? Het even welke ideeën? Ja. 

Publiek: een plus rx. 

ALLISON Buchholtz-AU: r plus rx. Wilt u uitleggen waarom het zou worden rx? 

Publiek: Omdat je 5, dus dat is 4 plus 1, dus dat is te lezen plus uitvoerbaar, en het is voor iedereen. ALLISON Buchholtz-AU: Right. Dus gewoon om te herhalen, 5 hier we kennen als de som van 4 en 1, omdat elk getal in ons trio is het som van de rechten voor die subgroep, toch? Ofwel de gebruiker, de groep, of de wereld. Dus in dit geval, we weten dat 5 moet worden gevormd door 4 en 1. 

En 4 en 1 overeen met leesbaar en uitvoerbaar. We zijn het geven aan iedereen, zodat we kunnen doen chmod een plus rx. En natuurlijk, we gingen gewoon door de vragen daar, dus nu dit bestand uitvoerbaar en leesbaar voor iedereen. 

Dus hoe zit het met de tweede? Wat zou het aantal voor die ene zijn? Het even welke ideeën? Ga je gang. 

Publiek: 100 [onverstaanbaar]. 

ALLISON Buchholtz-AU: 100. Precies. Dus wilt u uitleggen waarom 100? Publiek: Omdat het voor de gebruiker, dus het is in eerste positie. En dan x executable is 1. ALLISON Buchholtz-AU: Precies. Dus we zijn het verlenen van uitvoerbare toestemmingen om gewoon de gebruiker. Dus in dit geval, zou het 100. En ik heb alle antwoorden omhoog op de volgende dia in geval je schrijft veel dingen af. 

OK, dus dit volgende wordt eigenlijk gedaan met twee chmods, kon je het doet. Dus heeft iemand nog enig idee hoe je misschien krijgen chmod 640 herschreven in de andere kant op? U kunt de gebruiker eerst en dan veranderen u kunt veranderen van de groep is mijn hint. 

Dus als we alleen het veranderen van de gebruiker, die deze eerste hier, wat zou onze oproep zijn? Dus gebruiker is u, nietwaar? Dus chmod u plus wat? Mmhmm? 

Publiek: rw. ALLISON Buchholtz-AU: rw. Rechts, voor lezen en schrijven, want lezen is 4, w 2, die som bij elkaar als 6. Dus krijgen we chmod u plus rw, en krijgen we onze eerste 6 daar. 

Dus dan naar de 4 te krijgen, willen we nu om onze groep te wijzigen. Dus we gaan naar chmod g plus wat te doen? Wat is een 4? 

Publiek: r. ALLISON Buchholtz-AU: r. Precies. Dus we geven de eigenaar lezen en schrijven permissies en we geven de groep gelezen toestemmingen, die we allemaal hier. Mmhmm? 

PUBLIEK: Als je iets kan schrijven, sluit het je kan het uit te voeren? 

ALLISON Buchholtz-AU: U kan schrijven naar something-- Ik geloof niet dat het houdt u het uit te voeren. Cool. Dus dat is alles wat we gingen gewoon door. Dus deze volgende, het gewoon een soort van gemeenschappelijke gevallen dat u wilt in te houden erg voor je probleem te stellen. Dit zijn meestal de permissies dat we graag willen dat u gebruikt. 

Dus voor 711, dat geeft ons natuurlijk user alle toestemmingen, die heeft de neiging om zin te maken. En dan is het uitvoerbaar door de groep in de wereld, wat logisch is als je een aantal directory, je willen kunnen doorlopen in. Mensen moeten toegang. 

Voor elke niet-PHP-bestand, je gaat te gebruiken 644, die wat zou doen? Wat betekent dat impliceren, of wat permissies geeft dat? Zodat de eigenaar kan wat? PUBLIEK: lezen en schrijven. ALLISON Buchholtz-AU: lezen en schrijven. En dan de groep en anderen kan het gewoon lezen, toch? En dan chmod 600 voor elke PHP bestanden die u wilt gebruiken, je eigenaar, nogmaals, kan lezen en schrijven naar het maar iedereen is gewoon een soort van afgesloten. 

Zo zal dit ook daadwerkelijk nuttiger wanneer u krijgt om uw probleem set volgende week waar je bent eigenlijk het bouwen van een website. Dus als je ooit tegenkomen elke vreemde problemen waar het niet laden correct, misschien heb je nodig hebt om een ​​uitvoerbaar voegen toestemming, of misschien heb je een read nodig of schrijf toestemming. Kleine dingen die de neiging hebben om mensen struikelen up, maar dat is net zoiets als de go-to als je volgende week pset beginnen. En ik zou je meer te geven tips over deze week PSET, maar ik heb nog te kijken naar het sinds het werd vanochtend vrijgelaten. Maar je me mailen, ik zal gekeken hebben bij het tegen de tijd dat ik reageer morgen. 

Dus nu is iedereen goed met chmod? Alle resterende vragen? Vrij eenvoudig. Gewoon een soort van het bijhouden van wat lezen, schrijven en uitvoeren nummers zijn is waarschijnlijk het moeilijkste deel. 

Dus met TCP / IP, al deze protocollen, net zoiets als met je datastructuren vorige week, het is veel meer belangrijk om soort te krijgen een hoger niveau intuïtie van hen. Dit is niet CS143 waar we heen gaan om u te vragen om de uitvoering van een netwerk, dus je zult prima als zijn je begrijpt het niet de Nitty Gritty van alle protocollen. Wat is belangrijk om te begrijpen is net zoiets als wat ze vertegenwoordigen en waarom ze belangrijk zijn. 

Dus TCP / IP, natuurlijk, is de Transmission Control Protocol of Internet Protocol, eigenlijk gewoon een reeks wetten in principe of normen die vertellen data hoe het moet worden behandeld, hoe het moet worden tot pakketten, verzonden en ontvangen. Dus eigenlijk, zoals het zegt hier, verhoogt de kans op dat data wordt wanneer je wilt dat het te krijgen. 

Ik weet zeker dat als jullie naar lezing of zag het online, hij has-- weet ik niet als hij deed het dit jaar, maar ik weet van vorig jaar, had hij een demo waar hij een foto van Rob had en hij ontleedt tot vier en zet het in enveloppen en probeerde om het te krijgen over Sanders. En je kan soort denk aan het op die manier. Het is gewoon een set van regels die gegevens vertellen hoe ergens te krijgen en laat u weten of je mist data, op dezelfde manier dat als je het nemen van meerdere pagina's met aantekeningen en je ze te labelen met pagina 104, pagina 204, en ga je terug naar later studeren en je bent something-- vermist je kunt niet pagina vinden 304-- je weet er iets mis is, zodat u kunt kijken via uw notities opnieuw of vraag iemand om u opnieuw te verzenden de dictaten van die dag. Op dezelfde manier met de gegevens op het internet. Als ik vraag voor iets van enkele server en het moet sturen in meerdere pakketten, waarschijnlijk gaat om het aantal het in een manier laten me weten hoeveel ik had moeten ontvangen, en vertel me, oh, dit is één van de 10 of is dit een van de 10.000. Op die manier als ik naar weer in elkaar zetten alle stukjes bij elkaar, Ik weet dat als er ontbreekt iets en ik kan opnieuw vragen voor. Heeft dat zin? Gewoon een set van regels. Op haar basis, set van regels, OK? 

Dus spraken we ook een beetje over poorten. Dit is eigenlijk gewoon een standaard die laat je weten wat voor soort data wordt overgedragen in deze pakketten. Als we gaan met onze envelop bijvoorbeeld, doen we niet weet dat het een foto van Rob daar tenzij we schrijven op de buitenkant van onze envelop. Dus poorten zijn in principe hetzelfde. Het is gewoon een manier om erachter te komen wat type van de gegevens overgebracht. 

Dus we hebben al de meest voorkomende hier. Dus 21-- deze zijn ook soort van als goede dingen om te weten. Het is een soort van een eenvoudig quizvraag. Wees als, wat doet poort 80 te doen? Of, wat doet poort 443 te doen? Dus goede dingen om te weten. 

Dus we hebben hier 21 is bestand transfer protocol, dus gewoon de regels die bestandsoverdracht regeren. 25, iets dat we allemaal gebruiken veel te veel, is e-mail. 53 is de domeinnaam systeem, die in feite gewoon een soort van een lookup voor de IP-adres van een domeinnaam. 

Dus ik ben er vrij zeker van dat het was in collegezaal genoemd, als u ga naar iets als google.com, het heeft een IP-adres die wordt geassocieerd met het. Het is eigenlijk niet google.com. En dus 53 is de poort dat eigenlijk kost zorg voor soort vertalen in dat IP-adres voor je. En dan 80 en 443 zijn zeer algemeen. Of je hebt je webpagina of je hebt je beveiligde webpagina, die veel webpagina's zijn overbrengen naar nu. 

Dus dat is een soort van hoog niveau overzicht van transfer protocol. Ik zie niet veel meer in de diepte. Het is een soort van cool stuff als je geïnteresseerd bent. Er is genoeg van de middelen. Wikipedia eigenlijk is een vrij goede pagina. Dus ik was op zoek naar het gewoon een tijdje geleden, dus ik zou sterk aanbevelen naar te kijken als je geïnteresseerd bent of neem 143 in twee jaar, omdat Ik denk dat het om het andere jaar. 

Dus aan het einde van deze, we zijn het over webpagina's en HTTP, dat is eigenlijk onze volgende onderwerp voor vandaag voordat we gaan in HTML en CSS en je kunt eigenlijk coderen van een webpagina. Het zal leuk zijn. We zullen foto's van hebben konijntjes en het zal geweldig zijn. 

Dus HTTP, zoals je hier kunt zien, is een van de mooie acroniemen deze week, wat Hypertext Transfer Protocol. Dus nogmaals, het is gewoon een andere set van regels die regeert hypertext overdragen, in dit geval. Dus beste manier om te leren over dit is gewoon een soort van om het af te breken in deze individuele woorden want er zijn een heleboel woorden op het scherm daar. 

Dus we gaan beginnen met hypertext. Dus "hyper," je kunt bedenken "Boven", zoals super-type ding. Dus het is echt alleen tekst genomen om de volgende niveau, dus het is net als super tekst, zoals de volgende tekst. Dus het is eigenlijk gewoon tekst, dat geeft ons meer informatie dan normale tekst doet, OK? 

Dus in dit geval hier, dit is hypertext. Dit vertelt ons dat we hebben enkele link die wij gaan, die cs50.net die is nu cs50.harvard.edu. Deze dia's zijn een beetje oud. En het gaat om te laten zien als dit als een hyperlink, en vervolgens een echt cool website. 

Dus het is tekst, die een beetje beetje echt coole dingen in daar. Zodat je dingen kunt koppelen en je kunt afbeeldingen invoegen en je kunt dingen stylen. En de meest vertrouwde ding dat je jongens hebben waarschijnlijk met hypertext is HyperText Markup Language, HTML, die uiteraard alle web dat we om ons heen zien, verleend met enkele CSS stijl gegooid. 

Maar als er iemand was echt groot met MySpace, Ik weet zeker dat je alle gebruikte HTML alle tijd te creëren die perfecte profielen, toch? Ik voel me als dat zou kunnen zijn van een achterhaalde referentie nu, maar wat. Gewoon een little-- jullie zijn niet zo veel jonger. Sommigen van jullie zijn ouder dan ik. MySpace was nog een ding toen ik jong was. Ik ben niet zo oud. 

Anyways, HTML gewoon een vorm van hypertext. Dus hypertext is gewoon tekst met extra functies. Dus transfer protocol is waarschijnlijk de meer dubieus ding uit te leggen. Uiteraard transfer-- slechts overdragen van gegevens. Dus ofwel tussen de cliënt, zoals uw web broer, en een server. Dus eigenlijk gewoon de manier waarop het internet werkt. 

Dus de exacte vraag van hoe deze werken, zijn we eigenlijk gaan kijken naar een Bijvoorbeeld verzoek en reactie. Maar hoe we vragen informatie van een server en hoe reageert de server voor ons is wat deze transfer protocol beheerst. Dus de aanvraag en de respons op deze specifieke set van regels te volgen. Het is zo gestandaardiseerd dat het niet uitmaakt waar je met behulp van het internet, het werkt altijd hetzelfde, OK? 

Nogmaals, het protocol, set van regels. Het is gewoon een normale interactie op dezelfde wijze dat Professor Malan praat over als iemand breidt hun hand, je weet dat het gemeenschappelijke hoffelijkheid om bereiken van jou uit en schudden hun hand. Dat is een protocol, toch? 

Dus ik geef een aantal gestandaardiseerde verzoek, dat is Ik wil je hand te schudden, en je geeft een aantal gestandaardiseerde reactie, die ofwel geen dank of je zou kunnen proberen en schud mijn hand of misschien bent u gaan proberen en fist bump me. En we hebben geen protocol voor. Het breekt. Maar als iedereen volgt de hetzelfde protocol, natuurlijk het gaat veel meer naadloos. Mensen krijgen om elkaar te leren kennen. Iedereen is blij. 

Dus in de wereld van het web, iedereen volgt dezelfde rules-- iets beter dan de sociale normen. Maar met dat zullen we kijken naar een voorbeeld verzoek hier. Dus er is dit kleine belangrijkste hier op bodem dat vertelt je de verschillende kleuren, wat ze te betekenen. 

Dus wit is net als uw methode aanvraag en protocol version-- dus methode verzoek versie. En dan is dit wat veldnaam en de waarde van dat veld, die we zullen gaan in zeer, zeer binnenkort. Dit is dus een voorbeeld aanvraag. Dit is zoals ik breiden uit, wil me even voorstellen. 

Dit is wat de klant of wat je webbrowser zou sturen naar je server. Dus dit is een GET-verzoek, dus het is iets vragen van de server. En het is natuurlijk HTTP en het is versie 1.1. 

Dus de rest van dit hier is wat wij noemen de header, en de extra informatie dat geeft ons een beter idee van wat we eigenlijk vragen om, of informatie die we willen geven de server die mogelijk relevant. Dus User-Agent geeft wat meer beschrijving on-- bijvoorbeeld hier, krul / 7.24.0 is eigenlijk ga vertellen de server die we met behulp van Google Chrome als onze browser. Dus als je ooit gehoord over mensen die praten over het maken van een app responsieve meerdere browsers, dit is iets dat ze zou want gebruiken als u weet niet wat browser het verzoek vandaan komt, U kan de gegevens niet af te stemmen op dat. Dus in dit geval, de gebruiker is alleen het geven van dit soort van identificatiegegevens over wat browser uw gebruiker gebruikt momenteel, OK? 

Dus dan hebben we ook gastheer, dat is waar we eigenlijk nu willen gaan naar. In dit geval, we willen naar apple.com, koop een paar leuke nieuwe iPads of iets, misschien schattig lichten op onze slaapzalen. En de naam van de waarde aan het einde is gewoon een vulmiddel, maar een algemene ding voor jullie om te zien. Het doet niet echt overeen met iets hier. 

Dus je kunt zo veel of zo hebben weinig als je wilt in elk geval. Meestal, deze zijn optioneel. Het is maar net wat je nodig hebt van de browser, van uw gebruiker om het verzoek naar behoren te geven. Of het hangt af van wat uw gebruiker eigenlijk wil geven aan de server. Dus je kan hebben vele, vele van deze header veldnamen of je kan gewoon een paar. Zoals met zoveel dingen Ik heb gezegd in deze sectie, het is echt afhankelijk van de context van hoe je met behulp van deze. 

Dus doet dat zinvol is voor iedereen? Dit is slechts een voorbeeld van een verzoek, headers, wat al niet. OK, dus met dat, we hebben enkele reactie. 

Nogmaals, we hebben onze status code, protocol versie, en dan de naam en het veld veld waarderen zoals altijd. Dus ons protocol versie en onze status code is 200. OK, waardoor, ja, alles ging goed. Hier is wat je wilt. 

Het type server, de inhoud type-- het ons vertelt, OK, je bent ga wat tekst HTML te krijgen. Hier is de lengte van het en hier is wat je moet doen met de verbinding. OK, dus nogmaals, afhankelijk op de gegevens die u bent vragen om, afhankelijk van de server wil terugkeren naar u, je kan meer van deze veld hebben namen, zou je minder hebt. Totally context afhankelijk. 

En voor zover deze status code hier natuurlijk 200 is niet de enige je zou kunnen hebben, toch? We hebben veel statuscodes. Is er iemand die een van de onthouden anderen dat we in collegezaal vermeld? Veel van hen beginnen met 4. 

Publiek: 404. 

ALLISON Buchholtz-AU: 404, dat is? 

Publiek: Bestand niet gevonden? 

ALLISON Buchholtz-AU: File not found. Precies. Dus hoe zit het met 403? Publiek: Verboden. ALLISON Buchholtz-AU: Verboden. Dus wat denk je dat betekent met chmods? 

Publiek: Het betekent dat je geen toestemming om het te lezen niet. 

ALLISON Buchholtz-AU: Precies. Op een bepaalde manier, hoef je niet toestemming om toegang te krijgen, toch? Dus 404, 403. Er is een echt grappig een die we altijd per jaar te introduceren dat Ik zou hier kunnen zetten, als 413, dat is ik ben een theepot. U kunt deze google. Het is grappig als, dat is code 413 en het is ik ben een theepot. Waarvan ik weet niet waarom je dat zou ooit nodig dat op het internet, maar ik dwaal af. Publiek: Misschien bent u een pot thee. ALLISON Buchholtz-AU: Misschien de server is een theepot. Wie weet? Oké, dus we staan ​​op het punt om te overgang naar echte codering. Ik voel me als jullie gaan hier weg vrij snel. 

Publiek: Waarom doet het zeggen "server: twee keer? 

ALLISON Buchholtz-AU: Hm? Server twee keer? Dat is een goede vraag. Ik ben niet zeker. Ik zal te weten komen en Ik zal u alle e-mail. 

OK, andere vragen naast dat? Goed? Cool. 

HTML en CSS, en nu zijn we krijgen om al het plezier delen. Dus zoals ik al zei, HTML is waarschijnlijk een van de dingen jullie zijn het meest vertrouwd zijn. Dus hebben we HyperText Markup Language. 

De beste manier om dit-- leren doe ik niet hebt voorbereid dia's of iets voor jullie met HTML. Het is echt over het leren van de syntax. En als je in de MySpace dag, zou je dit moeten naar beneden. 

Dus echt, het grootste ding is gewoon om te oefenen en te experimenteren. Een van de grote middelen zou ik raden het gebruik is W3Schools. Dus gewoon W, 3, en vervolgens Scholen. Ze hebben veel middelen op HTML op CSS, en ze hebben een split screen soort dingen waar ze je voorbeeld code geven. Je kunt experimenteren met het, veranderen, en druk op Update, en het zal je laten zien wat het eigenlijk doet naar de webpagina. 

Dus ik zou aanraden met behulp van dat. Het is wel cool. U zult niet seg fouten krijgen hier als er dingen fout gaan. Als het je lukt om te krijgen een seg fout met HTML, laat het me weten, want ik ben gaat echt te worden geïntrigeerd. Maar het is echt cool, want kun je dingen veranderen, zie je ze levend bijgewerkt. En ik denk dat je krijgt een veel meer intuïtief begrip van HTML als je eigenlijk alleen maar geef wat tijd experimenteren. Dus dat is waarom ik zei, praktijk en experiment. 

Google, van hier op out, zal waarschijnlijk een van de beste middelen en vrienden. Of Bing-- Ik werk bij Microsoft, dus misschien moet ik zeggen Bing. Maar vrijwel alles is gewoon om syntax zijn, dus te begrijpen wat de tags zijn, understanding-- tenminste met CSS-- hoe je bepaalde attributen te veranderen. Het zal super handig. 

Dus hoewel we dat niet doen nog bereid dingen, we hebben soort van een aantal best practices dat willen we jullie om te proberen en zich houden by-- of beter gezegd, moet je houden aan tot nader order. Dus sluit al uw labels. Hopelijk iedereen has-- weet je wat, als dit heeft geen zin nu, Ik beloof het zal zinvol wanneer we het coderen van de pagina. Maar sluit al uw labels. Dus als je ooit wat hebben header dat is beugel, H1, beugel, zorg ervoor dat wanneer je klaar bent met dat, je sluit die header. Bevestig uw pagina met W3 Validator. Als u niet uw woorden sluiten, kunt u onverwacht gedrag te krijgen. Het zal zeggen dat uw pagina is ongeldig als je het uit te voeren door middel van deze validator. Dus toen in doubt-- en vooral op deze week en volgende week pset-- op dezelfde manier dat we vragen u om te gebruiken controleren 50 en stijl 50, je zou kunnen denken aan deze als een van uw cheques, OK? 

Dus als het niet voorbij de W3 Validator. Dat is iets wat we zullen je dock op. Of ik zeg het je recht nu, ik zal je dock op. Dus zorg ervoor dat het valideert. Het is niet moeilijk. Je plakt gewoon in je code en het zal ofwel zeggen goede baan of je mist iets dezelfde manier die stijl 50 vertelt u waar je verpesten. 

En dan nog een laatste ding is dat je wilt scheiden je markup, dat is alles wat HTML of uw tekst, en je styling. Dus zullen we een voorbeeld doen van dat recht na deze. Dus HTML en CSS moeten gescheiden zijn. En we gaan het hebben over MVC, dat is Model View Controller, volgende week. Jullie moet waarschijnlijk leren over dat in collegezaal morgen als je moest al geleerd vandaag. 

En het is gewoon een soort van een paradigma dat we de neiging om te gebruiken bij het maken van web pagina's om dingen uit te scheiden. U kunt denken aan het op dezelfde manier dat we de neiging om verschillende functies in C waar we hash om dingen te vinden. Het is gewoon een manier om uw leven gemakkelijker maken. Een onderscheid van attributen of code die zou je met behulp van over en weer, maar op deze manier vriendelijk van houdt het leuk en netjes. En als u wilt wijzigen een ding, je het veranderen als en het is overal anders veranderd. Dus het is meer voor uw gemak en flexibiliteit. 

Dus met CSS, het is zeer vergelijkbaar naar HTML, maar in plaats van labels die ik noemde net nu, we gebruiken wat heet selectors. En ze eigenlijk gewoon een soort van associëren een bepaalde tag in HTML met verschillende attributen. En als ik zeg attributen, ik bedoel dingen zoals tekstkleur, lettertype, de kleur van de achtergrond, de kleur van uw tekst. Dat soort dingen. Net als het gecentreerd, als het naar rechts, als het inverted-- alle van deze coole dingen. Elke stilistische dingen die u doen om uw tekst, dit is wat ik bedoel met attributen. 

En dan twee belangrijke dingen om te weten is dat selectors-- twee van de belangrijkste factors-- zijn ID, die uniek is. U kunt alleen gebruik maken van dat voor een ding. Anders gaat het om tegen je schreeuwen. En als wij het bepalen in een CSS-bestand, het zal zijn hash ID en vervolgens welke kenmerken we willen. Ik beloof dat we gaan gaan door middel van een voorbeeld. Het zal veel meer zin te maken. 

Klasse kan verwijzen naar meerdere blokken. Dus u kunt uw eerste en derde paragraaf hebben dezelfde soort attributen als je ze associëren met dezelfde klasse. En als we ze definiëren in CSS, doen we een dot-klasse, met klasse zijn wat je wilt dat het een naam geven. 

Dus ik weet dat dit recht is nu heel abstract. Daarom gaan we de code. Ik weet dat jullie lief dat, en u allen bent gaat me helpen, want dit is uw webpagina. Dit is onze rubriek webpagina, jongens. Zo zijn er nog vragen voordat ik uitschakelen van de PowerPoint, of iets je wilt dat ik om terug te bladeren om voordat we beginnen te coderen? 

PUBLIEK: Als je zegt match-tags, bedoel je selectors of labels? ALLISON Buchholtz-AU: U kunt denken aan hen als hetzelfde. Het is gewoon verschillende woorden. Ik bedoel, als selectors. Maar selectors ook kaart om tags. Zo kunt u denken aan hen als effectief hetzelfde. Ik beloof dat het gaat maken meer zin als we coderen. Iets van de PowerPoint of vragen nu, voordat we daadwerkelijk creëren pagina onze rubriek's? Iedereen klaar? Cool. 

Dus ik heb één begonnen. Laat me verhogen het lettertype voor jullie. OK, dus op dit moment, we hebben net een Bare Bones webpagina hier. 

We hebben een aantal HTML. We hebben een aantal header die we zie hier als voorbeeld webpagina. Sommige titel, sommige lettertype. Dit zijn labels, OK? Dus toen ik bedoel sluit uw labels, wij zien hier deze beugel hoofd is uw opening tag, en deze beugel / Head sluit het, OK? 

Dus je zou kunnen denken aan dit als uw braces in je als de omstandigheden of je voor loops. Als u een aan het begin, je wilt een aan het eind. Het zal nog steeds het grootste deel van de tijd werken als je niet een gesloten tag hebben, maar best practice is sluit je labels. 

Dus in dit geval, laten we dit veranderen. We gaan in hoofdstuk zeven hebben. "Sectie webpagina." Dus ik ga gewoon om dit te veranderen. 

En als we gaan hier en we reload-- gotta slaan en reload-- we merken dat hier het veranderd, toch? Cool. Dus dit verandert de titel. Dit is alles wat er op je tab. 

Dus dit is een soort van zoek een beetje saai. Ik weet niet over jongens. Ik denk dat we iets willen anders hier. 

Dus wat we kunnen doen is het header is er gewoon. Laten we doen een soort van body. Dus we hebben een aantal lichaam hier. Ik altijd open te doen en sluit mijn tags om te beginnen, op dezelfde manier dat ik een beugel. Ah. Wacht, wat? 

Publiek: [onverstaanbaar]. ALLISON Buchholtz-AU: Ah. Jullie hebben me. Good job. Gouden ster. 

OK, dus we hebben een aantal lichaam hier. En laten we nu beginnen met wat tekst toe te voegen. Dus je hebt een paar verschillende opties voor het toevoegen van tekst. We hebben dingen zoals headers. We hebben gewoon een normale tekst. Dus laten we gewoon beginnen met een kopbal. Eigenlijk, als je jongens willen op te trekken HTML W3 School, U kunt soort rondkijken en als er iets is in het bijzonder dat u wilt uitproberen met deze webpagina, kunnen we dat doen. Dus in dit geval, laten we gewoon doen wat h1. Dus h1 is als de hoogste header. Het zal je iets geven dat is zeer groot en vet. 

En in dit geval, wat willen we voor de eerste tekst op onze website? Om het even wat. Jullie gaan dit te creëren. Ik ga gewoon om te typen. Publiek: Welkom. 

ALLISON Buchholtz-AU: Welkom. OK, dus als we redden het en we herladen, we hebben een hele grote welkom. Dus gewoon zo kunt u zien de verschillen, laten we iets doen op H6. Wat doen we hier willen? Right? 

OK, dus gewoon zodat je kunt zie het verschil. Ja, Sublime. Dus als u merkt, h1, zeer, zeer groot. h6, zoals vet, maar veel kleiner, en je hebt alles wat daar tussen. Dus je zou kunnen H2, H3, H4 hebben. En dit zijn slechts headers, dus als je probeert naar een webpagina te creëren die heeft verschillende secties, misschien dat u wilt gebruiken headers daar ergens. 

Cool. Dus we zullen nog wat meer toe te voegen dingen in ons lichaam. Ik zie dat het aardig zou zijn van cool als we een foto hadden. Ik heb het gevoel alsof iedereen misschien zou kunnen gebruiken een schattig konijntje plaatje gelijk over nu, dus we gaan om uit te vinden een konijntje afbeelding eerste. 

Ik weet niet of jullie nog voorkeuren van welke we willen. Heeft u bepaalde wensen? Deze hier? Down. OK. Die is. Goede keuzes. 

OK, dus we gaan om onze afbeelding te bekijken. Kijk naar die. Kijk eens naar dat schattige ding. Hoe zou je verdrietig zijn op een maandag met dit? 

Dus we gaan gewoon om de URL van de afbeelding kopiëren. En wat wij willen doen is, laten we gewoon zeggen we hebben een aantal p voor paragraaf. We gaan om te zeggen: "Kijk kijken naar de schattige konijntje. d'awwww. " Ik hou van mijn konijntjes. Ik heb een konijntje thuis. Ik mis mijn konijntje. Dus wat we gaan doen-- Ik weet niet of jullie willen om dit-- maar met HTML google, hoe kun je een afbeelding in? Letterlijk, als je google "Omvatten afbeelding HTML," waarom niet jullie mij vertellen wat deze tag zou moeten zijn? 

Publiek: img source-- 

ALLISON Buchholtz-AU: img source-- Publiek: --equals-- ALLISON Buchholtz-AU: --equals-- Publiek: --quote-- ja. ALLISON Buchholtz-AU: Perfect. Lovely. Zie, MySpace generatie, toch? Publiek: Neopets. ALLISON Buchholtz-AU: Neopets. Oh, OK. Wow. Het is gek geweest. OK. 

Dus zorg ervoor dat ik dit goed te krijgen. Cool. Dus dit hier zou moeten zijn. En dan, als we herladen, hebben we onze bunny op de pagina Is dit niet schattig? 

Dit is zo schattig. U koos voor een grote, grote foto. Ik ben het opgraven. 

OK, dus we hebben nu dit schattige konijntje. We waren in staat om een ​​toe te voegen afbeelding, net als dat. Dus eigenlijk als er een image u wilt toevoegen aan uw webpagina, kunt u deze toevoegen net als dit. Een ander ding zou zijn als u de afbeelding hebt opgeslagen in dezelfde map als Dit bestand kun je gewoon schrijven wat de naam van die afbeelding is in plaats van het hebben van een web link. 

Het zou nog steeds tussen aanhalingstekens. Het zou net zijn als als we hadden vernoemd dit-- als dit plaatje was gered in de map met deze HTML-bestand dat ik het bewerken en het werd bunny.jpg genoemd. We konden ook dat doen en het zou opdagen. Echter, ik heb niet dit opgeslagen in het bestand en ik wil het konijntje houden, dus we gaan om de koppeling te houden. 

Publiek: Wat is rabbit.org? 

ALLISON Buchholtz-AU: rabbit.org. Het is een appropriate-- kijk, je kunt het goed te keuren. Adoptie. bunny.jpg. Ik wil dit konijntje adopteren. Oh, god, het is zo schattig. 

OK, dus we hebben headers toegevoegd. We hebben een foto toegevoegd. Uiteraard voegden we wat tekst hier, toch? Als we wilden andere toe te voegen teksten, zouden we gaan als dit. Dus dit is een andere paragraaf. 

En wij zeggen: "dit is een andere paragraaf." Ook ik ben een vreselijke speller, dus ik kan dingen verkeerd spelt. Net FYI. 

Dus we hebben een andere paragraaf hier, toch? Dus misschien wilt u iets doen een beetje interessanter dan alleen hebben al uw tekst, zoals rechts uitgelijnd. Misschien wilt u uw tekst te centreren, OK? 

Dus als iemand wil die gebruiken handig computers voor u en vertel me hoe je bent gaat deze tekst te centreren, 

Publiek: p align. 

ALLISON Buchholtz-AU: So p align gelijk "center." Hij doodt het, jongens. Jullie moeten opvoeren. En we hebben "Dit is gecentreerd." En nu hebben we iets gecentreerd. 

Op dezelfde manier, als je wil het links uitgelijnd, je kon align gelijken doen links, align gelijk rechts. Helemaal aan jou. Als ik dat hier, dan is dit should-- nu is rechts uitgelijnd. 

Publiek: Allison? Door beeldbron, waarom niet er dicht van de img bron? ALLISON Buchholtz-AU: Sorry. Deze moet er Nu je goed bent. Nu zijn we goed. Publiek: Heb je geen om het daar te sluiten, of niet? ALLISON Buchholtz-AU: Nou, dus img bron, is dit één gewoon-- met afbeelding, het is gewoon gezien als één element, terwijl als u merkt dat voor de rest van deze, we hebben een aantal tag dan informatie die het gaat om en vervolgens een afsluitende tag. Maar met imago, alles is gewoon soort van self-contained. Cool. Dus jullie weten hoe je een te creëren header, weet je hoe je tekst invoeren, je weet hoe je een afbeelding zetten in nu, kan je dingen af ​​te stemmen. 

Een ander ding dat je Misschien wil je in staat zijn om te doen is om een ​​lijst te maken in CS-- we zijn soort van in te gaan op volgende week pset. Het spul dat we leren meestal deze week gaat echt goed met volgende week PSET, dus we zijn soort mengen, overlappende dingen hier. Maar het zal nuttig zijn voor volgende week zijn. 

Dus als we wilden wat te creëren lijst, hoe kunnen we dat doen? Je kunt geen antwoord op deze tijd. Iemand anders moet. Het is niet moeilijk, jongens, beloven. Google "ongeordende lijst HTML." Wat was dat? 

Publiek: [onverstaanbaar]. ALLISON Buchholtz-AU: Right. Dus willen we besteld of ongeordende? Laten we een ongeordende. Dus hebben we een aantal ul, waarvan staat voor ongeordende lijst. En wat hebben we voor elk element? Doet zij haar eigen label nodig heeft? Kunnen we gewoon beginnen met het schrijven van dingen? 

Publiek: li. 

ALLISON Buchholtz-AU: li. Dus wat is onze lijst zal worden? Wat doen we hier willen? We namen ook te doen. Gewoon doen Jacob. 

Publiek: Konijn voedsel. 

ALLISON Buchholtz-AU: Konijn voedsel. OK, ik vind dit leuk. Konijn voedsel. 

OK, dus we hebben wortelen. Ik vind dit een konijn thema. Ik ben het graven van een stuk. PUBLIEK: Eigenlijk, dacht ik dat Jacob een legit zou zijn. ALLISON Buchholtz-AU: Jacob? Jacob is konijnenvoer. Als je zag Jacob's foto uit de kantooruren, je zou gedacht hebben dat hij kreeg aangevallen door een killer rabbit. 

Publiek: Ik heb een konijn nu. Ik heb nu een killer rabbit. 

ALLISON Buchholtz-AU: Are you kidding me? 

Publiek: Ik zal het volgende hoofdstuk te brengen. Ik heb het. 

ALLISON Buchholtz-AU: Dit is belachelijk. Hoe dan ook. 

Publiek: [onverstaanbaar] 

Publiek: Ja, mijn Proctor een konijn ook. 

ALLISON Buchholtz-AU: Ik wil een konijn. OK, wie brengt een echt konijn aan de volgende sectie, totaal brownie punten. Publiek: [onverstaanbaar] PUBLIEK: Oh, het is niet echt. Het is een gevulde konijn. 

ALLISON Buchholtz-AU: Oh ja, we kunnen deze sluiten. Ziet er rad. Publiek: Maakt het eigenlijk uit? ALLISON Buchholtz-AU: Het maakt niet. Met de meeste van deze dingen, je hoeft niet de tag te sluiten, 99% van de tijd niets slecht gaat te gebeuren, maar het is een goede stijl, ook. Dus Jacob. En we hebben sla. Publiek: voor koppelingen, het is echt belangrijk. ALLISON Buchholtz-AU: Hm? Publiek: voor hyperlinks. ALLISON Buchholtz-AU: Voor hyperlinks. Ja, hyperlinks nodig hebben. OK, dus laten we hier zien. En we hebben het einde van onze lijst. En we kijken naar dat. We hebben Jacob all--, precies daar. Konijnenvoer. Doet me denken aan Bunnicula. 

Publiek: [onverstaanbaar] ALLISON Buchholtz-AU: Ik breng terug alle oude school referenties vandaag, niet ik? Gewoon alle oude school referenties. Wil hebben gebracht Gogurts of iets voor snacks. 

Publiek: Of Gushers. ALLISON Buchholtz-AU: Oh. OK. Ik zal kijken of ik kan volgen neer Gushers voor volgende week. Ik denk dat ik dat kan doen. Ik denk dat we kunnen hebben sommigen in het kantoor. 

OK, dus we hebben een heleboel verschillende overdekte dingen die je kunt doen met HTML, toch? En zoals je waarschijnlijk wel kunt zien, het is nothing-- hopelijk niet al te intim-- als het is, bedoel ik niet om iedereen te kleineren. Als u problemen ondervindt, kom alsjeblieft met me praten. 

Maar het meeste is gewoon kijken naar de syntax, toch? Als u wilt dat een ongeordende lijst, als je wilt een soort van lijst, als je iets wilt uitlijnen of formaat iets, het draait allemaal om gewoon soort opzoeken van de syntaxis voor HTML, toch? En een ding dat is wel cool eigenlijk is als je naar to-- laten we eens kijken, wat is een leuke website die we willen? Iemand enig favoriete websites dat zijn OK om online te brengen? Weet je wat, laten we gewoon doen CS50. Dat is leuk en veilig, toch? 

OK, dus CS50 hier. Oh kijk, er is een sectie op dit moment. Als je van de manier waarop het eruit ziet. 

Publiek: [onverstaanbaar]. ALLISON Buchholtz-AU: Wij zijn niet ga meta sectie doen, jongens. Het gebeurt niet. Het zou cool zijn, maar we zijn niet van plan om het te doen. 

Dus wat doe je kon doen als je van de weg dit werkt is je kan altijd gelijk Klik op een webpagina die je leuk vindt en je kunt doen View Page Source. Het zal al de HTML. En dit is eigenlijk een heel goede manier om uw eigen webpagina te stylen. Ga naar een webpagina die u echt leuk vindt en kijk naar de HTML en erachter te komen hoe ze het deden. 

En letterlijk, zolang zoals u citeren dingen, zolang je bent niet alleen stelen van mensen, het is OK. Speciaal voor CS50 [? financieren?], we zijn soort verwachten u om te krijgen inspiratie uit andere website. Dus voel je vrij. Kijk door websites die je denkt dat ze echt mooi en erachter te komen hoe ze te gebruiken HTML en CSS om deze dingen te doen. 

Dus zoals je hier ziet, is er natuurlijk zoals koppelingen en we hebben een klasse hier. We hebben een link hier. We hebben een lijst. We hebben waarschijnlijk een aantal foto's hier ergens. 

We hebben hier een aantal leuke stijl. Dit is het volgende ding we gaan doen. Dus stijl, wanneer u deze stijl tussen haakjes, het is CSS principe. Ben, heb je een vraag? 

Publiek: Wat is div? 

ALLISON Buchholtz-AU: div is gewoon A-- wat is div? Publiek: Divisie. ALLISON Buchholtz-AU: Division. Ja, het is net als scheiden van verschillende elementen. OK, dus hier is wat we zijn in te gaan op de volgende te gaan. Dus dit is misschien niet de beste te zijn stijl, want, als u merkt we hebben HTML en stijl in dezelfde pagina, en we eigenlijk willen die scheiden, OK? En eigenlijk, laat me open mijn rechter want dit hoort te zijn de PDF, dus we hebben style.css. 

Dus wat kunnen we hier doen, is deze zijn leuke dingen, zoals sommige fade en we konden proberen en dat te doen, maar ik voel zoals ik zou puinhoop die up on the fly, dus ik moedig jullie aan ga proberen dat op uw eigen, maar ik ben niet van plan om het te doen nu. Dus als jullie, vergeet niet, als je ooit probleem set hit, iets duikvluchten in vanaf de zijkant. Het heeft te maken met de fade en de overgang en wat al niet. 

Publiek: En dat is alles wat CSS en HTML? 

ALLISON Buchholtz-AU: Alle CSS en HTML. Yeah. Dus je kunt een heleboel doen echt leuke dingen doen met CSS en HTML. Dus met onze geweldige bunny webpagina hier, we gaan om een ​​beetje te doen beetje CSS styling mee. 

Dus als je ooit een stijl vel, die we hier hebben, je kan het gewoon style.css noemen. Je kunt het noemen wat je wilt. Wat belangrijk is, is dat we gaan om het bestand te verwijzen in onze web.html hier. 

Dus wat we gaan doen is we-- zodat ik niet knoeien dit up-- we gaan koppelen deze twee bestanden samen. Dus in dezelfde way-- ik ga om een ​​analogie hier vestigen op C. Op dezelfde manier dat als je sommige library-- en we hebben cs50.h-- onze compiler verbindt het. Dit is slechts een expliciete koppeling van onze kant. Dus op dezelfde manier als wij hash ook enkele file, wat Ik sta op het punt om te schrijven is alleen de HTML / CSS equivalent van dat. 

We zijn gewoon te zeggen, OK, deze webpagina gaat deze stylesheet gebruiken, OK? Dus we hebben link rel gelijk aan stylesheet. En dan hebben we het type, css. En dan href gelijk. 

OK. Dus alles wat hier dit deed je is kan Denk aan dit als hetzelfde als hash omvatten. Uiteraard ziet het er een beetje meer ingewikkeld, maar in alle gevallen, het is in feite hetzelfde ding. Dus dit is slechts enkele koppeling van een stylesheet, het is van het type text / css, en de naam van het style.css. 

Wat is belangrijk om te weten is dat de webpagina dat ik rechts ben bezig now-- web.html en style.css-- zijn in dezelfde map. Omdat in verschillende mappen, je nodig hebt om de werkelijke wortel geven om het of het pad naar het. Maar in dit geval, we houden het super eenvoudig en het gaat om hier te zijn. Dus als we dat doen, ik heb een aantal dingen al in de wachtrij hier boven. 

Dus hebben we een aantal lichaam, die gaat onze achtergrondkleur hebben die op dit moment is lichtblauw. We kunnen het veranderen als we willen, maar als ik dit goed herinner, het moet gewoon veranderen naar lichtblauw. En nu hebben we een lichtblauwe achtergrond. En we hadden hier-- kan iedereen zich herinneren waarvan er een hash ID of klasse? 

Publiek: ID. 

ALLISON Buchholtz-AU: ID. Cool. Dus wat we willen doen is welke van deze lettertypen of which-- willen we "Kijk naar het schattige konijntje "tot paars zijn? Ik denk dat we willen dat tot paars zijn. Ik ben er vrij naar beneden en als dat paars. 

Dus wat je doet is je doet ID equals-- in dit geval Ik zei, wat, mooie kleur hier. We herladen. Alle van een plotselinge, het is paars. OK, dus met ID, herinneren moet uniek zijn, dus ik mag nooit gebruikt dit id ergens anders. Maar met klasse, zoals we hebben hier met een mooi lettertype, Ik moet in staat zijn om te gebruiken die overal ik wil. 

Dus laten we deze hier. Dus we kunnen zeggen klasse evenaart mooie lettertype. En als we nu eens kijken, we hebben deze coole mooie lettertype hier. Dus misschien wil ik om beide te doen. OK, ik weet het eigenlijk niet weten of dit gaan werken, maar ik wil het proberen. En dit is hoe je CSS en HTML te leren. Je bent net als, je weet wat, ik wil dit proberen. Ik ben niet zeker of het gaat werken. Eens kijken of het werkt. 

En kijk eens naar dat. Nu is het in paars en het is een mooi lettertype. OK, dus je hebt al deze verschillende dingen die je kunt doen. Heeft u een vraag? 

Publiek: Ja. Nou, net als de kleuren die je gebruikt wel woorden. Is er een manier om kleuren te doen met de hexadecimale RGB? ALLISON Buchholtz-AU: U kunt ook doe het met hexadecimale, geloof ik. Yeah. Maar het is wel leuk als je niet willen ze opzoeken. Je kunt gewoon zijn zoals, paars of blauw. Publiek: Laten we hopen dat ze weet wat dat betekent. ALLISON Buchholtz-AU: Right. Dus laten we dit lezen of Chartreuse. Waarom zou je ooit chartreuse kiezen? Het is een interessante kleur. 

OK, dus uiteraard kunnen we we zien kunnen dingen veranderen maar we willen. Als je wilde create-- laten we zeggen wilden we een andere klasse te maken. Wat zou jullie willen veranderen? Als je trek W3Schools ' CSS documentatie, Ik laat het woord aan jullie. We kunnen proberen en iets leuks doen met dit in de laatste paar minuten. Want ik heb je soort van gegeven een Spoedcursus op een heleboel coole dingen dat je kunt doen. Maar uiteindelijk, zoals ik al zei, als je enkel experiment, dan heb je een hoop leren. 

PUBLIEK: Heb je omhoog kijkt dat lettertype? 

ALLISON Buchholtz-AU: Yeah, Ik keek op dat lettertype. Dus als letterlijk, ik ging to-- wat heb ik gedaan? Ik deed CSS lettertype lijst en toen deed ik lettertype stack, en toen was ik net, kijk, hier zijn alle coole fonts die je kunt doen. En er was deze, zo Ik kopieerde het naar mijn klembord. En toen was ik als, OK, cool, daar gaan we. Alle gedaan. 

Publiek: Dus je moet ervoor zorgen dat dat CSS weet wat dat lettertype is. 

ALLISON Buchholtz-AU: Ja. 

Publiek: Wat staat er op het einde? Cursief? 

ALLISON Buchholtz-AU: Cursief. Yeah. 

Publiek: Achtergrondafbeelding. 

ALLISON Buchholtz-AU: Achtergrondafbeelding. OK. Dus je wilt me ​​vertellen hoe dit te doen. Ik laat dit aan u. Ik ben gewoon te typen hier nu. Het wiel is in uw handen. 

Publiek: OK 

ALLISON Buchholtz-AU: OK. Wat doe ik? 

Publiek: Doing-- Ik weet wat komt na de accolade. ALLISON Buchholtz-AU: OK. Dus waarschijnlijk in het lichaam, ik zou aannemen, want we zijn doen met de achtergrondafbeelding. 

Publiek: Ja, laten we dat doen. 

ALLISON Buchholtz-AU: OK. Publiek: OK, dus achtergrond dikke darm, en dan hebben we moet een URL-adres van dat imago. Misschien pseudo-code die voor nu, misschien. 

ALLISON Buchholtz-AU: Wat wil je me to-- Publiek: Ik denk als een GIF. ALLISON Buchholtz-AU: A GIF? Dat gaat interessant worden. OK, wat moet ik googlen hier? 

Publiek: Nee, dat is jouw keuze. 

ALLISON Buchholtz-AU: Waarom niet we-- als het een konijntje, Ik heb het gevoel dat we een moeten hebben mooie gazon of zoiets. 

Publiek: Meadow. Een weide. 

ALLISON Buchholtz-AU: Een weide? OK. Publiek: Of Rachel Maddow. ALLISON Buchholtz-AU: Deze ziet er mooi uit. Oh, dat is klein, dat wel. We moeten het een goede grootte. Laten we eens kijken. Oh, kijk. Dat is een mooie weide. Weet je wat, ik hou van deze. Laten we kopiëren deze. 

Publiek: OK, dus ik denk dat het de URL, haakjes geopend. 

ALLISON Buchholtz-AU: OK, URL. 

Publiek: Dan het adres. 

ALLISON Buchholtz-AU: OK. Is dat alles wat we nodig hebben? 

Publiek: Sluit haakjes puntkomma, en dan de ruimte, achtergrond koppelteken gehechtheid vaste colon, en accolade. 

ALLISON Buchholtz-AU: OK. Eens kijken of dat werkt. Het zal wel cool als het niet te zijn. Ik ben hier echt opgewonden. Het werkte niet. Ik vraag me af waarom. Publiek: Misschien is de URL moet in citaten. ALLISON Buchholtz-AU: Misschien. En dit is hoe we leren, jongens. 

Publiek: Kunnen we achtergrond afbeelding achtergrondkleur en? 

Publiek: No. Men vervangt de andere. 

ALLISON Buchholtz-AU: I dunno. Laten we eens kijken. Laten we check it out en zie. 

PUBLIEK: Oh, misschien, ja. [Tussenplaatsen VOICES] 

ALLISON Buchholtz-AU: OK, dit is obviously-- ik [onverstaanbaar] hier. Dus OK. Publiek: Achtergrond attachment. ALLISON Buchholtz-AU: Ah. 

Publiek: OK, ik weet het niet. ALLISON Buchholtz-AU: Het het lijkt alsof het zou moeten werken. Weet je zeker dat het colon na de URL? 

Publiek: Nee, het is puntkomma. ALLISON Buchholtz-AU: Het is puntkomma. Publiek: Heb ik colon zeggen? ALLISON Buchholtz-AU: Je zei dat een dubbele punt. Publiek: Oh nee. ALLISON Buchholtz-AU: Daar ga je. PUBLIEK: Oh, wacht, nu we kunnen de tekst niet lezen. ALLISON Buchholtz-AU: Now kunt u de tekst niet lezen, maar we hebben de achtergrondafbeelding. Mmhmm? 

Publiek: Doet HTML ondersteuning voor dynamische inhoud? Zoals, zou je die foto vergroten of verkleinen Afhankelijk van de venstergrootte of dat een CSS-- 

ALLISON Buchholtz-AU: Dus CSS heeft om dat te doen. Dus als jullie geïnteresseerd zijn in het leren van geavanceerde CSS, Ik ben mede-onderwijs een seminar over CSS op de 7e. En ik beloof het zal te veel grondiger en doe nog veel meer leuke dingen in deze sectie. En mijn co-docent is als totale front-end web dev meester. Dus het zal wel cool als je wilt zijn om over alle coole dingen te leren dat CSS kan doen. 

Maar wat we hier hebben met zijn achtergrond attachment fixed-- dus het is een aantal vaste omvang-- maar je kunt eigenlijk dynamically-- als je ooit webpagina's, zoals te zien de meeste goede webpagina's zal doen, wanneer u met het aanpassen van de grootte van uw browser, Het past de achtergrond of hoeveel toont of formatteert dingen, toch? Dus dat is wat wij noemen relatieve positionering. 

En CSS kan eigenlijk grijpen hoe groot uw browser breedte is of hoe groot het is, en je kunt dingen positioneren volgens de relatieve afmetingen versus absolute maten. En dat is uiteraard meer geavanceerde CSS, maar dat is iets wat je kunt doen. Als je wilt leren meer, kom naar mijn seminar. 

Dus dat is iets wat je kunt doen. En CSS kan eigenlijk doen-- CSS en JavaScript, die we zullen krijgen in volgende week-- kan u toestaan ​​om dynamisch te wijzigen pagina's zonder dat u herladen ze de hele tijd. En je krijgt om wat te doen pretty cool stuff. 

Dus is er een ander ding dat jullie zou willen doen of alles wat je wilt om te verkennen? We hebben 10 minuten over. We kunnen ook vroeg te vertrekken, maar als u wilt wat meer web dingen te doen, we kunnen, maar ik ben niet zal je dwingen om. Maar we kunnen ook gewoon eten snoep. Publiek: Markeer de tekst wit zodat je het kunt lezen. ALLISON Buchholtz-AU: OK. Dus in dit geval willen we een aantal p. Publiek: Moeten we het doen in de lichaam, zodat zij van toepassing op de hele pagina? ALLISON Buchholtz-AU: Ja, we kunnen eigenlijk. Dat is een goed idee. Dus have-- wij u doen weten wat we zouden moeten zijn? Ik weet niet of we de tekstkleur kunnen doen. Ik was van plan om te proberen en maak hier een andere klasse. 

Publiek: Hoe krijg je zo dat het de suggesties? ALLISON Buchholtz-AU: So als jullie geïnteresseerd zijn, dit is een andere tekst editor genaamd Sublime. Je moet in staat zijn om installeer deze op uw apparaat. Soms wordt het een beetje lastig. Als u hulp met dat willen, Ik ben super blij om u te helpen met het, omdat gedit is groot en het is geweldig want je kunt compileren op de bodem, maar ik heb echt zoals Sublime want het is vrij en het maakt dingen te doen zoals auto-complete. 

Dus je kan zeker gerust laat het me weten als je wilt om dat te doen. Als je gewoon google "Sublime tekst, "het meestal heeft instructies over hoe te installeren op verschillende besturingssystemen. Het is echt cool, ik denken, in mijn mening. So p. Ik denk dat ik kan gewoon doen text-- of kunnen we gewoon doen kleur is "wit." Er. 

Dus wat ik hier gedaan heb is dat ik niet al tekst te veranderen. Maar p hier is slechts een tag die we hebben, toch? Deze paragraaf tag. Dus heb ik zojuist een CSS element dat zei, OK, iets met deze tag p, maken de kleur wit. 

Dus als het je opgevallen, het maakte dit wit en deze witte. Het heeft niet onze lijst wit omdat maken het is niet geassocieerd met dat. Je kon door gaan en je kon say-- 

Publiek: Doe achtergrondkleur. 

ALLISON Buchholtz-AU: Achtergrond kleur? 

Publiek: Achtergrond van pijp in kleur waar je de p-tag. 

ALLISON Buchholtz-AU: OK. Je wilt het wit? Publiek: Mmhmm. ALLISON Buchholtz-AU: OK. Daar ga je. Publiek: Dat is raar. ALLISON Buchholtz-AU: Pretty cool, toch? Dus als je rotzooi maar, je gaat om veel te leren. En het kan behoorlijk cool. Ik denk dat het zeker meer verheugend dan soms omdat je niet hoeft te wachten voor uw programma te compileren. U kunt gewoon op Vernieuwen en je bent zoals, oh, kijk, het werkte, of oh, ik ben waarschijnlijk iets te missen. En dat is iets dat echt cool over het volgende deel van de klas, is het is zeker, ik denk, makkelijker om te controleren als je langs de weg versus hoeven deze lange programma's te schrijven en wensen en bidden dat het werkt op het einde. 

Dus met dat, denk ik jullie lijken allemaal goed. Als je zoals altijd nog vragen hebben,, kom met me praten, kom laat het me weten. Ik zal net buiten zijn de volgende 15 minuten als je wilt over chatten alles en nog wat. 

Dus ik hoop dat je guys-- veel succes met deze pset. De deadline is vrijdag op de middag want het was te laat uitgebracht. Dus ik zal waarschijnlijk moeten zien veel van jullie op donderdag, maar hopelijk niet. Misschien heb je het gedaan door dan. Ik zou super trots zijn. 

Maar zo niet, dan zie ik je donderdag. U kunt ook een late datum, gebruik die breidt het uit tot en met zaterdag 's middags. Maar ik don't-- huh? 

Publiek: Halloween. 

ALLISON Buchholtz-AU: Het is Halloween, a en b, Ik denk niet dat er zal zijn spreekuur op vrijdag. Dus echt proberen en krijgen het gedaan door Vrijdag, zodat we allemaal kunnen vieren Hallow weekend. Oké, ik zie jullie volgende week.