[Muziek] 

DAVID J MALAN: Dit is CS50 en Dit is het begin van week 7. Dus welkom terug. En je kan herinneren dat in probleem set vier, er was een beetje een speurtocht voor een aantal fantastische prijzen, waarbij na het herstellen van de foto's van personeel, zowel hier als in New Haven, je uitgedaagd om zoveel mogelijk van vinden die informatici als je kon. En we hebben een hele stelletje inzendingen. Dacht dat ik een paar delen met u hier vandaag. 

En we zullen al deze online te plaatsen. Maar in het bijzonder, ik wilde vestigen uw aandacht to-- goed één, Sam was in een flink aantal van hen over het algemeen stellen als dit. Maar het blijkt dat vanaf deze morgen, de winnaar werd een zeker iemand met de naam Ken met 24 van de medewerkers vastgelegd op camera of een paar meer als je rekening rekening meerdere medewerkers in de foto's. Hier afgebeeld is Ken volgende Maria in New Haven. 

Nu, Ken, hoewel, blijkt out is beetje een hoek geval dat is nog niet eerder gebeurd. Het blijkt dat het niet optreden aan mij om de kleine lettertjes in de problemen brengen set van vier die zegt dat het personeel zijn niet in aanmerking voor de fantastische prijzen omdat Ken is natuurlijk één van fotografen op onze medewerkers. Nu, met dat gezegd, hij oorspronkelijk schreef me om te zeggen alsjeblieft niet deze foto's online plaatsen. Ik denk dat een groot deel omdat de meeste van de foto's dat deze fotograaf nam kijken een beetje iets als dit. En dergelijke. 

Maar Ken wil ik u geruststellen dat hij een zeer goede fotograaf, Hij is een professionele, neemt hij foto's die niet wazig zijn, die beter zijn in focus, en hij nam een ​​flink aantal van onze eigen medewerkers. Maar in plaats van alleen maar te erkennen Ken, wat we dachten dat we zouden doen wordt door de lijst van werkelijke studenten die ingediend. En het blijkt dat Lance met 15 foto's als van vanochtend was onze winnaar. 

En hier afgebeeld is Lance met Colton, met Skaz, met mezelf en met Sam. Maar dan blijkt dat met ingang van 11:46, dus gewoon een beetje geleden, Ik ging terug naar mijn e-mail en gevonden dat we nog één inzending door een student met de naam Bonnie wier e-mail zei slechts dit. Niet gaan liggen, ik ben dit te doen tijdens de les. En dan ging om gewoon hechten 14 foto's, een verlegen van Lance's 15. 

Maar in Bonnie de foto's, zo blijkt out waren meerdere medewerkers, Sam onder hen, dus wat we dachten dat we zou doen is erkennen beide. Dus in aanvulling op het krijgen van de Dropbox ruimte dat iedereen die deelnamen ontvangt, zal ook deze twee secties krijgen een mooie verzorgde lunch voor hen en hun sectie paart deze komende week. En zo hoort u van ons, Lance en Bonnie, over. Zo groot proficiat aan hen. Nu, degenen onder u die zou als lunch meer in het algemeen weten dat CS50 lunch in Cambridge en New Haven is deze vrijdag. Ga naar de website van CS50 slash RSVP. En nu een woord op seminars. Meer curricularly. Dus we naderen het punt van het semester waar je moet beginnen denken over afstudeerprojecten. En in feite, in slechts een beetje, zal zogenaamde pre voorstellen te wijten zijn. Dus pre voorstellen zijn bedoeld om behoorlijk lage impact en echt gewoon een kans voor kunt u een kort briefje te componeren uw onderwijs mede om de hoogte te stellen hem of haar wat je denkt u zou willen doen voor uw afstudeerproject. 

Nu, vele studenten belanden het doen van web-based afstudeerprojecten. En natuurlijk, we zijn gewoon Nu vorige week in deze en verder duiken in web programmeren. Dus geen zorgen te maken als je heb absoluut geen idee hoe zou je de ideeën op te bouwen die u zou kunnen hebben in je geest. Dit is eigenlijk gewoon een dwingen functie om je aan het denken en praten met uw TF over. Maar om u te helpen, en met afstudeerprojecten uiteindelijk, weten dat CS50 heeft een traditie het aanbieden van seminars. 

En deze zijn optioneel, de handen op, of lezing op basis van kansen voor meer informatie over onderwerpen die te leren een beetje ondergeschikt aan de cursus syllabus, maar toch prachtig materiaal om te rijden afstudeerprojecten. En dus dit is de lijst die is CS50 personeel hier in New Haven zijn gekomen voor dit jaar over iOS programmering, Android programmering, de ontwikkeling van games, en trossen van meer hulpmiddelen en talen en technieken. 

Dus hou een oogje op de website van de CS50's. En in de tussentijd, als u wilt registreer hier uw interesse in een van deze, ga naar CS50's slash register. En dan zullen we follow-up met betrekking tot de dagen en vluchttijden en locaties en everything-- meeste alles zal worden gestreamd en ook beschikbaar op aanvraag na als je niet kunt eigenlijk maken. Dus zonder verder oponthoud, we ophield laatste tijd met GET. 

En dit was de boodschap die was binnenzijde van de virtuele envelop, herinneren, dat we overgegaan van router naar router router tussen een webbrowser en een web server. En die boodschap leek een iets als dit. Dit was de meest mysterieuze boodschap die eigenlijk binnen een envelop geschreven op een stuk papier, waarvan eerste regel zegt letterlijk, krijgen slash. 

En net als een sanity check, wat heb slash te duiden? Wat betekent slash bedoel als het aanvragen van een website? U vraagt ​​het de hele tijd. Vrijwel elke keer dat u een website bezoekt, u eigenlijk niet het type in een bestandsnaam. Je hebt waarschijnlijk gewoon naar Facebook.com, voeren gmail.com of dergelijke. En wat doet slash vertegenwoordigen? Welk bestand? Of op welke pagina, in het bijzonder? 

De index, ja. Zodat de standaard pagina. Dus als je niet beschikt over een bestand op te geven noemen als we beginnen te zien, je bent eigenlijk alleen aanvragen geef mij de standaard pagina van Facebook of geef me mijn inbox of geef me van de standaardpagina van het nieuws op de website van CNN's of iets dergelijks. En een server reageert vervolgens naar die boodschap met iets als dit, ja zeggen, ik spreken HTTP versie 1.1. 

200, die de status code die wij mensen zelden ooit, want het is goed. Want het betekent OK, het verzoek werd ontvangen en goed behandeld. En het type inhoud blijkbaar de reactie is vaak, maar niet altijd, tekst. En bijzonder HTML. En dat is eigenlijk waar we kijken naar vandaag. 

Dus in feite, ik ga om te gaan vooruit en openen van een browser. Ik ga Chrome gebruiken, kunt u gebruik maken van vrijwel elke browser in de komende weken. We raden over het algemeen Chrome want het is bijzonder goed voor software-ontwikkelaars. Het heeft een heleboel ingebouwde hulpmiddelen die het makkelijker niet alleen HTML en CSS te ontwikkelen, dingen die we zullen beginnen te praten over vandaag, maar ook andere talen. 

En ik ga om verder te gaan en ga to-- Ik ga naar Control klik of rechts klik ergens op een webpagina. En ik ga naar Inspect Element. En ik ga om te tweaken mijn scherm maar een klein beetje hier. Laat me dit naar de onderkant. Dus dit is wat heet Chrome Inspecteur. Dus dit is als een debugging instrument ingebouwd in Chrome. 

Ieder van jullie dit al als je met behulp van Chrome zijn geweest. En het laat je zien wat er gebeurt op onder de motorkap van een aantal webpagina. Dus laten we daadwerkelijk een kijken naar dit als volgt. Het heeft veel meer functies en we de zorg over vandaag. Maar er is deze tabbladen hier. Elementen, netwerk, bronnen, tijdlijn, en een aantal andere dingen. Ik ga om te klikken op Netwerk voor een moment. 

En het is een beetje overweldigend op het eerste gezicht hier. Maar wat ik ga doen is laten me vereenvoudigen het een beetje. Ik ga aan te zetten de het opnemen van licht, zodat het rood. En ik ga zeggen behouden logboek. En dit is slechts een klein wat ik bedacht de tijd dat gaat redden alles wat er gebeurt in de browser. En nu ga ik om te gaan naar http://facebook.com. 

Eigenlijk, laten we www voor een goede maatregel, slash. Enter. Zodat een URL die vele je zou kunnen hebben bezocht. En nu Facebook web pagina komt aan de top. En dan een hele hoop spul vloog door aan de onderkant. En in feite, blijkt dat wanneer u Facebook.com bezoeken, je bent niet alleen het maken van een HTTP-verzoek, het blijkt dat naar Facebook.com zendt 41 van de enveloppen, elk met een eigen get verzoek zoals vermeld, zij achter het scherm Hier, aan de onderkant van het scherm, betekent dat inderdaad mijn browser maakte 41 van de verzoeken. 

En in totaal, is overgedragen 861 kilobytes en het duurde om wat voor reden wel acht seconden dat allemaal downloaden. Dus dat is eigenlijk een beetje raar dat Facebook de site zou nemen dat lang, maar het zij zo in dit geval. Nu, dit alles heb ik niet echt schelen over behalve de bovenste verzoek. Dus laten we naar deze ene hier en laat me uit te zoomen voor slechts een moment. 

En laat me inzoomen op dit. Dus wat ik heb gedaan bij linkerzijde, ook al er is veel gaande hier is dat ik heb gemarkeerd Facebook.com en vervolgens opmerken dat ik naar beneden te scrollen, scroll naar beneden, naar beneden te scrollen, headers te vragen. En je zult zien dat Chrome toont me wezen binnenste inhoud van het verzoek dat ik maakte. Het is niet het formatteren op precies dezelfde weg, maar merken er is sprake van te krijgen, merkt er melding gemaakt van de gastheer, Facebook.com, het pad, of slash, dat is het bestand dat ik gevraagd. 

En dan als ik blader back-up, zullen we eigenlijk zien dat wat Facebook terug voor mij is al deze headers. Zodat de binnenkant van die virtuele envelope inderdaad veel sleutelwaarde paren. Een woord, een dubbele punt, en dan een waarde. Een woord, een dubbele punt, en een waarde. Dit zijn zogenaamde headers. En er is hier veel meer detail dan we eigenlijk zorg over nu. 

Maar dit is tweede aan laatste daar beneden, opmerken, dat de server Facebook.com's, inderdaad hier gezegd komt wat tekst HTML. Dus dit alles is om te zeggen dat wanneer u een verzoek van een web pagina van een browser aan een server, die server reageert met een envelop eigen binnenkant van die tekst. Met andere woorden, HTML. HyperText Markup Language. Dat is een andere taal die we vandaag introduceren dat mensen of computers te genereren om webpagina's te implementeren. 

In het bijzonder, laten we eens kijken naar dit. Ik ga nu terug te gaan naar de website van Facebook. En ik ga gewoon controle klik of klik met de rechtermuisknop en klik op View Page Source. En zelfs als u geen gebruik maken van Chrome, IE kan dit doen, Firefox kan dit doen, Safari kan dit doen, hoewel het menu opties ziet er misschien een beetje anders. En dit is de HTML dat Mark en vennootschap op Facebook hebben geschreven. 

En collectief, deze taal hier implementeert de blauwe en de witte pagina dat zagen we een ogenblik geleden. Nu, dit is een beetje overweldigend. Maar als we kijken naar linksboven, we zijn gaan om te beginnen met een aantal patronen te zien. Het lijkt erop dat er veel van deze open hoek beugel en dan is er dit zoekwoord HTML. Hier is een ander open hoekijzer en hoofd. 

Hier is, als we naar beneden scrollen en naar beneden en naar beneden, ik ben gaan om verder te gaan en probeer om te zoeken naar iets. Er weg over rechts Hier staat open beugel lichaam. En oproepen van de laatste tijd die we voorgesteld dat de eenvoudigste webpagina dat een mens zou kunnen schrijven ziet er misschien een beetje iets als dit. Open HTML-tag, open hoofd tag, geopend titel tag, Toen sloot titel, gesloten hoofd, geopend body-tag, wat tekst, gesloten lichaam, gesloten HTML. 

Maar een pauze hier voor slechts een moment. Deze code, zelfs als je hebt nooit geschreven vóór maar nog steeds niet helemaal begrijpen wat er gaande is, ziet er goed uit. Juist, het is zeer schoon. Het is heel stilistisch leuk. Veel inspringen en witte ruimte. Facebook is niet. Dus waarom is Facebook zoveel erger dan ik bij het schrijven van HTML? Blijkbaar. 

Rechts, dit is als een van de vijf voor stijl. Er is een dwingende reden voor hen om deze bezuinigen. Oké, zodat ze niet willen maken het makkelijker voor u om het te lezen. Dus in zekere zin, ze zijn verdoezelen het, soort van versluiering te tenminste zo esthetisch dat het moeilijker voor Myspace te gaan en rip off van hun homepage en de HTML voor het. Het blijkt dat met de programma's hoewel, met inbegrip van Chrome, we kunnen dit super eenvoudig opruimen. Dus het is niet helemaal zo als reden. Wat kan de oorzaak zijn. Ja. Ja, witte ruimte kosten van gegevens. Wat bedoel je? Ja, precies. Als u de Tab-toets raakte een partij of de spatiebalk, rekening houden met de gevolgen. Dus elke toets op het toetsenbord is een [Onhoorbaar] voorgesteld als één byte. 

Dus stel dat Mark of een van de devs deze dagen hits op de spatiebalk maar een keer In dit HTML-pagina die vertegenwoordigt Facebook homepage. En Facebook heeft veel van deze dagen. Dus stel dat Facebook de homepage wordt bezocht door een miljard mensen vandaag de dag. En iemand heeft op Facebook druk op de spatiebalk maar een keer. 

Dus een extra byte, een miljard verzoeken, hoeveel meer gegevens Facebook overbrengen via internet omdat iemand raakte de spatiebalk op zijn of haar toetsenbord? Een miljard bytes, of één gigabyte gegevens van Facebook-servers worden verzonden aan mensen over de wereld zonder goede reden. Nu, dat is slechts een ruimte. 

Stel je voor dat we dit eigenlijk schoon ding en ingesprongen het en voegde veel witte ruimte en tab tekens en spaties, je uiteindelijk de uitgaven gigabytes, zoniet terra bytes meer ruimte. En zo super gebruikelijk in de werkelijke wereld van web ontwikkeling is uw code minify. En we zullen uiteindelijk zien hoe je dit zou kunnen doen. 

Maar vandaag, zullen we beginnen met het schrijven van code dat is eigenlijk leesbaar door ons mensen. Het blijkt dat, hoewel, als je terug om deze tool in Chrome Inspect Element, eerder, waren we op het tabblad Netwerk. Het blijkt dat als je naar de elementen tab, wat je eigenlijk zien is Chrome behoorlijk gedrukt versie van datzelfde HTML. Dus we hebben deobfuscated het. Dus het is geen partij voor een computer. En nu kunt u eigenlijk klikken om en beginnen de hiërarchie, dat is een webpagina te zien. Dus laten we eigenlijk doen. Ik ga om te gaan en open te stellen op mijn Mac een programma genaamd tekstbewerking. En herinneren dat dit slechts een super eenvoudige tekst programma. Windows heeft notepad.exe. En ik ga Verbatim typt u het volgende. Doc soort HTML, geopend beugel HTML, gesloten beugel HTML, we hebben het hoofd van de pagina hier het einde van de kop van de pagina hier een titel zal zijn als, hello wereld. 

En dan naar beneden hier, moeten we het lichaam van de webpagina. Gesloten lichaam. En dan hier, hello wereld. Prima. Dus hebben we een super snelle webpagina geschreven. Ik ga het op te slaan als hello.html op mijn bureaublad. Mijn Mac's gaan om te klagen, denken dat, wacht eens even, dit is een tekstbestand, doe je wilt noemen .txt? Maar nee, ik wil dot HTML. 

En wat is dan mooi zijn als ik gewoon dubbelklikken op dit bestand, hello.html, hier is mijn webpagina. Helaas, ik ben de enige persoon in de wereld die deze pagina kunt bezoeken op dit moment. Want waar gaat het blijkbaar leven? Het is op mijn Mac, toch? Dat is nutteloos. Als niemand in deze kamer laat staan ​​op het internet kan eigenlijk bezoeken die pagina. Dus vandaag, moeten we introduceren een ander element. 

En om dit te doen, ga ik ga je gang en open cloud 9. Dus cloud 9 is natuurlijk een cloudgebaseerde service-- CS50 IDE-- Dat heeft al onze werkplekken ergens op internet draaien. En dat betekent dat al onze bestanden zijn al publiek toegankelijk. Dus laten we verder gaan en doen dit. Ik ga om te gaan en maak een nieuw bestand NCS50IDE. Ik ga het redden als voorheen als hello.html en klik op opslaan. En nu alleen maar om tijd te besparen, ga ik om verder te gaan en kopieer plak deze code in plaats van overtypen het. En opslaan. En nu heb ik een bestand genaamd hello.html. Maar hoe kan ik eigenlijk openen als een webpagina? Nou, het blijkt dat de ingebouwde om CS50 IDE is niet alleen een compiler als clang en een debugger als GDB en trossen van andere programma's, er is eigenlijk een volwaardige webserver loopt binnen CS50 IDE. 

U allen, dat wil zeggen, uw eigen webserver. En een webserver is gewoon een stuk van software waarvan het doel in het leven is om te dienen tot webpagina's. Om voor verzoeken van browsers luisteren en reageren met weinig virtuele enveloppen binnenkant waarvan de content die ik heb geschreven. Dus dit webserver eigenlijk gratis en open source. Waar open source betekent alleen software die iemand anders geschreven dat ieder van ons kan daadwerkelijk te zien en te downloaden en zelfs veranderen de broncode. En het heet Apache. 

En we hebben het een beetje makkelijker gemaakt Gebruik in CS50IDE door noemde het Apache 50. Zodat het kan eigenlijk begrijpen het volgende. Ik ga Apache 50 aanvang zeggen. En dan ga ik gewoon gaan dot zeggen. En we zien een aantal enigszins geheimzinnige melding het instellen van Apache document [? group?] naar huis, ubuntu, wat dat ook is, slash werkruimte. Beginnend webserver Apache 2 met succes. 

Zo lang verhaal kort te maken, ik heb net geduwd een knop en draaide op een webserver die nu luisteren op het internet op TCP-poort 80 op een bepaald adres. En hier staat, en zal dit op basis veranderen op uw gebruikersnaam en andere factoren, maar merken nu als ik hierop klikt, IDE50 dot jharvard en zo en zo, merken dat al die tijd voor de afgelopen weken, moet u gemerkt dat je eigen gebruikersnaam is ingebed in de rechterbovenhoek hoek van CS50IDE. 

En dat dit ook daadwerkelijk is geweest alle timen het adres waar u kunt Bezoek al uw bestanden via het web. Tot nu toe is het niet toe deed, want in C, je over het algemeen wil de dingen die in een terminal, niet op het web. Maar vandaag, we beginnen het schrijven van web-based code dat we willen te bereiken op de openbare URL's. Dus wat ik ga doen is op deze URL. 

En merk dat ik zie een vrij lelijke index, een directory listing, maar wat bestand springt uit bij u waarschijnlijk? Hello.html. Dat is omdat ik gered het bestand in mijn werkruimte. En wat ik heb verteld Apache webserver is kijken in Davids werkruimte directory. En laat iedereen in de wereld te zien die bestanden. 

En inderdaad, als ik nu klik op hello.html, Ik zie in dit tabblad precies dat bestand. Nu merken, cloud 9 doet iets nuttig voor ons. Binnen CS50 IDE, ziet er plotseling een adresbalk. Dat komt omdat ook al zijn we met behulp van Chrome CS50IDE bezoeken, binnenin CS50IDE zijn eigen versie van een browser op dit moment. En dus in plaats van dingen compliceren als zodanig, Ik ga om te gaan en kopieer deze URL. Ik ga je gang en gewoon gaan Mijn eigen Chrome-venster te openen. Dus er is geen magische hier geen CS50IDE. Ik ga gewoon letterlijk plakken mijn J Harvard URL en druk op Enter. En voila, nu heb ik, en in theorie iedereen op het internet, als ik heb geconfigureerd toestemmingen adequaat, Dit bestand kan bezoeken. En nu, als ik zei hello.html, voila, daar is mijn ongelooflijk underwhelming webpagina. Dus laten we snel sanity check. Door dat alles is conceptuele set up. En we hebben eigenlijk niet echt je geleerd hoe te schrijven HTML per se. Eventuele vragen tot nu toe over wat er net gebeurd? Ja. Heeft CS50 bezitten deze webpagina's? Op welke manier? Goede vraag. Dus CS50's bezit CS50.io. We hebben inderdaad gekocht die domeinnaam. En door de aard van jullie loggen in CS50IDE, je alles wat een subdomein genoemd. 

Dus IDE50-Malan, of IDE50-Rob.CS50.io, dat is uw unieke adres binnen onze domeinnaam. Dus voor de doeleinden van de cursus je hebt je eigen unieke adres. Maar we hebben dingen vereenvoudigd door het kopen van de top level domain, CS50 dot I / O en dan iedereen anders is binnenin die zogezegd. En we zullen terug naar die komen in een paar weken waarschijnlijk, vooral bij afstudeerproject tijd, toen sommigen van jullie misschien wilt u uw eigen domeinnamen te krijgen. Het is eigenlijk relatief ongecompliceerd. Prima. Dus laten we dit nu doen. Ik ga om terug te gaan naar CS50IDE, waar mijn dossier nu, hello.html, is niet zo interessant. Ik wil graag iets doen een beetje mooier dan dat. Dus ik ga iets doen als dit. Laat me geopend paragraphs.html. Dus dit is een bestand schreef ik op voorhand. Aan de bovenkant ervan, zoals altijd, we hebben opmerkingen. Maar in HTML, opmerkingen ziet er een beetje anders. Op lijn drie en lijn 14, u zie de syntaxis voor het starten van een reactie en eindigen geplaatst. 

Maar geen van de spullen in tussen zaken functioneel. Het is gewoon een notitie naar een menselijk wat hier aan de hand. En net als een snelle geestelijke gezondheid controleren, als ik naar beneden scrollen, wat is voor de hand liggende nieuwe tag die we hebben ingevoerd? De tags tot nu toe hebben we gezien zijn open beugel HTML, hoofd, titel, en het lichaam. Maar wat is er nu natuurlijk nieuw? 

Ja, dus p. De p-tag of paragraaf tag. En dan heb ik gewoon geleend enkele standaard Latijnse tekst aan mijn leden vormen. Want wat ik wilde laten zien is hoe je zou kunnen vertegenwoordigen de leden van de tekst in HTML. En dus wat begint te gebeuren hier is dat er al een patroon ontwikkelen. En laat me gaan en doen dit. Laat ik eerst uit te schakelen Apache. En ik ga het vertellen om zichzelf te beginnen weer binnenkant van de bron van vandaag zeven m directory. Zodat ik toegang tot alles. 

En nu, als ik ga terug naar Deze directory listing, merk ik zie elke file vanaf nu. En je zult zien in de volgende probleem set, zullen we geef je instructies voor het doen precies dit. Als ik open paragraphs.html, dit zou ook uitzien als een programmeertaal voor u als u niet spreken of lezen Latijn. Maar dit is slechts drie punten van de tekst die zijn opgemaakt in HTML. 

En let op de paragraaf onderbrekingen daartussen. Want het blijkt, en hoewel je misschien geneigd dit te doen, terwijl in de echte wereld, als je wilt online zetten pauzes tussen de dingen, je misschien gewoon dit doen en raakte opslaan. En nu, als ik opnieuw hier, bericht dat alles samen vervaagt net in slechts een blob van tekst. Omdat HTML is een soort van een domme taal. 

Het is bedoeld voor gebruik in dergelijke wijze dat de browser zal alleen doen expliciet wat je hem vertelt wat te doen. Dus als je niet vertellen geef me een nieuwe paragraaf, je bent niet van plan om een ​​nieuwe paragraaf te zien. En inderdaad, wat browser gaat doen zelfs als je op enter, laten we opnieuw en opnieuw zeggen en nogmaals, het verplaatsen van deze tekst weg onderaan op het scherm en vervolgens opslaan en vervolgens opnieuw de browser gaat om al die witte ruimte instorten in slechts een enkele, zichtbare witruimte. Prima. Dus dat is de paragraaf tag. En dus wat is het patroon dat is het ontwikkelen van hier? Nou, het lijkt het geval te zijn dat HTML is alles over het starten van een tag en het beëindigen van een tag. En wat is een tag? Nou, het is gewoon een stuk van de syntaxis. Open beugel, een trefwoord, gesloten beugel, is een tag. Of begin tag. En dan wanneer je bent gedaan jezelf uit te drukken, net als in je klaar bent met de paragraaf, doet u dit aan tegenovergestelde zeggen. Maar het omgekeerde is niet helemaal naar achteren. 

Je moet gewoon voorvoegsel dezelfde tag naam met een schuine streep als deze. Prima. Dus niet zo spannend. En in feite, we zijn niet het maken van de web dat alles interessanter. Wat als ik wil maken dingen groter en vet? Dus het blijkt dat hier een voorbeeld in headings.html waar in mijn lichaam, Ik heb een tag H1, H2, H3, vier, vijf of zes, allemaal lijken vrij mysterieus. Maar als ik ga open deze Bijvoorbeeld, laten we eens een kijkje nemen. Headings.html. 

Dus browsers standaard kan geven je tekst dat is groot en vet van uiteenlopende grootte. H1 is groot. H6 is kleiner en vervolgens alles wat daar tussen zit. Dus dat is interessant, maar nog steeds niet echt het web die ik ken. Wat als we willen Ik heb zoiets als een lijst. . Dus hier is een lijst met opsommingstekens van drie van de Harvard's huizen. 

Hoe heb je dat doen? Nou, neem een ​​kijkje op list.html. En hier zien we een beetje funkiness maar laten we eens kijken wat er gebeurt. Dus op basis van wat je net hebt gezien, UL staat voor ongeordende lijst. Ongeordende lijst betekent gewoon opsommingstekens. Er is geen aantallen. Er is ook zoiets als een geordende lijst, dat is een OL op tag. Dan LI lijst item is alles wat het betekent. 

En zo is het automatisch nummers alles voor je. Maar nogmaals, al mijn inspringen en witte ruimte is alleen voor mijn bestwil. De browser is niet daadwerkelijk gaat om de zorg. Dus ook al kon je niet Dit doen, alleen maar om duidelijk te zijn, moet je niet, ook al de browser zal nog in staat zijn om het te begrijpen prima. Ik ben raken reload in mijn browser, ik klikken reload en geen verandering gebeurt omdat de browser nog steeds doet precies wat ik vertel het aan te doen. 

Prima. Dus dit is allemaal gewoon tekst. Laten we nu eens iets interessanter te doen. Ik ga om te gaan en lenen van deze HTML. Ik ga om te gaan en maak een nieuw bestand hier. En we zullen dit rick.html noemen. We hebben onevenredig gebruikte iets riep een rick roll in deze klasse dit jaar, weet ik niet, het gewoon organisch gebeurd. 

En nu is het uit de hand gelopen. Dus ik ga gewoon om te gaan met het. En als ik naar Google Afbeeldingen en Rick Astley. Als je niet weet waarom we doen dit, net gelezen op Wikipedia. Elke keer dat u hebt geklikt op de link, iemand is al ergens lachen. En laat me ahead-- daar te gaan we gaan, laten we zien dit beeld. 

Dus hier hebben we een afbeelding in Google Images. En laten we aannemen dat dit redelijkerwijs overal op het internet. Dus ik ga ervan uit te gaan dat het OK voor mij om dit ook daadwerkelijk te zetten in mijn webpagina. Ik ga om te gaan en kopieer het URL. En nu als ik ga terug naar Cloud 9, laten we eens kijken wat ik hier kan doen. Dus hier is gewoon een webpagina. Dit is Rick Astley, haha, Ik ga nu terug te gaan mijn browser, herladen, en interessant. 

Waar is Rick? Dus laat me zien wat er gebeurd is. Eigenlijk, ga ik doen alsof ik dat niet. [Onverstaanbaar] hem hier. We komen terug naar die komen in een moment. Dus hier is rick.html. Dus dat is niet Rick Astley. Dus het blijkt dat we kunnen hem daadwerkelijk toe te voegen hier. Dit is Rick Astley. Ik ga zeggen een beeld waarvan geef me bron is de URL ik gewoon gekopieerd, die blijkbaar is een gelukkig verjaardag het een of ander. 

En nu ga ik sluit de tag als deze. Dus dit is het verpakken super lang. Maar merken dat alles wat ik heb gedaan is het geopend beugel bron een attribuut van dit. En het is een heel lange URL. En aan het eind, merkt dit. Waarom heb ik gedaan slash hoekige beugel in plaats van, zoals elke andere tag, met een open beugel IMG, gesloten beugel? Neem gewoon een gok, zelfs als je hebben geen enkele bekendheid HTML voor. 

Het is dus hoe het sluit het commando, maar waarom is het niet echt intuïtief zin om iets meer te doen verbose zoals dicht afbeelding? Ja. Ja. Slechts semantisch, er is geen gevoel van het starten van een afbeelding en het beëindigen van een beeld, Het is er of het is het niet. Dus het heeft geen zin om een ​​gat te verlaten voor iets anders binnenkant van een beeld. Je kan het gewoon niet doen. En dus is de syntax zou meestal gewoon aan de slash binnenkant doen van de open tag of de start tag en dan druk op Opslaan. 

Dus als ik nu opnieuw dit bestand, nu Ik heb hier een goede webpagina koken. En we konden zeker echt ergeren mensen door inbedding plaats als een YouTube-link. En in feite altijd je ooit gegaan naar YouTube, en laat me eigenlijk per ongeluk rick roll mezelf hier. Dus Rick roll. Dus rick Roll-- ik ga hier naartoe te gaan. 

[Muziek] 

OK, een persoon vond het leuk dat. Zo merkt al die tijd, als je klik op de Share koppeling, u natuurlijk krijgen de URL die je kunt eigenlijk insluiten in een e-mail of een forensisch afbeelding of een probleem stellen of een schuif. En nu, als ik klik in plaats daarvan op embed, merken dat al die tijd, dit spul is er. Ik ga om te gaan en kopieer deze. 

En net zo kunnen we het beter te zien, ik ben ga het plakken in mijn tekstverwerker. Merk op dat dit wat YouTube is je te vertellen. Elke keer dat u een bezoek YouTube-video, als je de video wilt insluiten op uw webpagina, dit is gewoon te grijpen. Dus dit is nog een andere HTML-tag wel een iframe. Of een in-lijn frame. Dus het ziet er ook een beetje meer complexer dan alle anderen. Zo blijkt dat de afbeelding tag en blijkbaar de iframe-tag nemen wat zijn zogenaamde attributen. 

Dit is een stuk van de syntaxis in HTML. Naast de tag naam, geopend beugel tag naam, U kunt het gedrag van de tag te controleren door het hebben van een heleboel attribuut is gelijk aan de waarde. Attribuut is gelijk aan de waarde. Zo bijvoorbeeld, YouTube is ons te vertellen als u wilt dat de breedte van deze video om 420 pixels en de hoogte om 315 pixels, dat hoe je het uit te drukken in HTML. 

De bron van de video gaat zo lang YouTube URL en dan nog wat andere dingen achtige frame grens nul is, zodat waarschijnlijk betekent dat er geen rand rond de zaak. Sta volledig scherm waarschijnlijk betekent dat de gebruiker kan op een knop en eigenlijk het volledige scherm van de video. Dus als ik echt wil zijn indrukwekkende hier Rick dot HTML, in plaats van gebruik maken van de image-tag, laat me dat te verwijderen, deze plaats plakken. En nu opnieuw. En nu hier gaan we weer. Oké, dat is genoeg. Oké, dus ik zal proberen niet moeilijk om dat nog eens te doen. Dus wat zijn enkele van de afhaalrestaurants hier? Dus HTML, zo lelijk als deze webpagina's zijn, is eigenlijk vrij eenvoudig. Het is geen programmeertaal. Het heeft geen functies hebben. Het hoeft geen lussen. Het heeft geen voorwaarden. Alles wat het is tientallen verschillende markeringen, die elk heeft nul of meer attributen. En in feite, wat is leuk over HTML als je begint te duiken in is dat het zeer zelf leergierig. 

Al duurt het is een begrip van het algemene kader van HTML. Wat is een label, wat een attribuut, hoe doe je eigenlijk configureren van een webpagina als volgt. En alles is echt het resultaat van het opzoeken in een online referentie of googlen hoe om wat te doen techniek of zoals we hebben gezien, op zoek naar Facebook's de bron code, op zoek naar een website dat je bij het broncode en begrijpen hoe de ontwikkelaars er eigenlijk aangelegd dingen uit. 

Dus we kunnen beelden ook doen. En in feite, we hebben het even geleden. Laat me gaan en gewoon laten zien. Hier zijn enkele voorbeelden van code. Als je ooit wilt knorrige kat zien. Zo merken dat ik kan een beeld tag hier. En ik heb een reactie erboven. Ik heb een alternatief gekregen tekst voor toegankelijkheid. Dus iemand die met behulp van een scherm reader om redenen van het zicht kan eigenlijk hebben dan hun schermlezer zeggen knorrige kat. Want als ze dat niet kunnen zie het beeld, zij kan op zijn minst hun computer vertel hen verbaal wat het is. De bron van die bestand cat.jpeg. Dus in feite, als ik echt wilde krijgen slim, wat ik zou kunnen hebben done-- Ik beloof niet naar Rick Astley, dus Ik ga naar google voor een kat in plaats daarvan. En als ik naar Google Afbeeldingen hier, en we zullen aannemen dat dit is een foto van mijn kat. 

Stel dat ik controle geklikt of rechts aangeklikt dit per ongeluk griezelig. En cat.jpeg ik ga om te besparen op mijn bureaublad. Laat me nu gaan terug naar cloud 9. Merk op dat hier, ik kan ga dan naar de lokale bestanden te uploaden. En als ik grijp deze bestand, cat.jpeg, bericht dat ik het kan slepen en zet het in cloud 9 en het gaat om te schreeuwen bij mij hier. 

Want we hebben al krijgt u een cat.jpeg bestand maar het is super eenvoudig te pak een foto die je hebt ontleend aan Facebook of Flickr of iets dergelijks en eigenlijk slepen en neerzetten in de cloud 9 en maak het dan een deel van uw eigen persoonlijke website of probleem set zeven of acht als we binnenkort zullen zien. En dan wanneer je eindelijk te bezoeken die kat, veronderstelling Ik downloadde diezelfde kat, kennisgeving dat-- dat was schattig. 

Wat je zou zien is zoiets gezicht hier. Zodat de bestanden die u referentie binnen een webpagina kan zowel lokaal in uw eigen kunnen account of afstandsbediening op een andere server zoals in het geval van Rick Astley foto een beetje geleden. Dus waar else-- wat anders kunnen we hier doen? Dus laten we eens kijken naar het volgende. Je weet wat er wel cool? 

We hebben tot nu toe is het maken zeer statische webpagina's. Ik wil dingen als volgt kruid. Ik wil mijn eigen zoekmachine te maken. Dus om een ​​zoekmachine te maken, laten we ga je gang en beginnen met dit te doen. Ik ga om te gaan en te creëren een nieuw bestand met de naam search.html. En we hebben prefabed versies online. Whoops. Niet plakken in je terminal venster. Prefab versies online. En ik ga om te beginnen als volgt. Dus hier is het begin van een bestand genaamd search.html. Ik ga om het op te slaan in de huidige bron directory. Ik ga noemen dit zoeken. Eigenlijk, zullen we het beter te maken. CS50 zoeken en eigenlijk merk het. En nu, ik ga zeggen iets als H1 CS50 zoeken. En dan naar beneden hier, H2 binnenkort. En alleen maar om samen te vatten, en H1 H2 onderscheidenlijk wat? 

Ja, zo groot en vet, en niet zo groot, maar nog steeds vet. Dus als ik dit op te slaan en ga dan hier, laten we zien het bestand search.html. Oké, en deze is right-- [onverstaanbaar]. Stand-by. David is in de war. Oh, het is daar. David is een idioot. OK. Dus daar is het. Dus CS50 zoeken binnenkort. Dus nu, laten we synthetiseren wat we deden vorige week. 

Waar hadden we het over de lager niveau mechanica van HTTP. En deze nieuwe ideeën van HTML, dat is gewoon Deze opmaaktaal waar u vertel een browser precies wat te doen en implementeren van onze eigen zoekmachine. Dus in plaats van alleen zeggende binnenkort, ik ben zal introduceren zoiets als een vorm tag. En in deze vorm, ga ik hebben iets als een invoerveld. 

En de naam van deze input gebied, ik ga noemen Q. En het type van het invoerveld Ik ga zeggen is gewoon "tekst". En een tekstveld, zoals we zullen zie, is gewoon een tekstvak. En zo werkt het hier niet het gevoel te hebben iets erin op dit punt. En dus ben ik gewoon gaan naar de tag met die sluiten slash midden in de tag zelf. En dan ga ik één andere ingang. Input type is gelijk aan te leggen. En dan ga ik deze ook sluiten. 

En nu ga ik hier terug te gaan. En nu al zien we, zij vrij lelijk, ik heb kreeg het begin van Mijn eigen zoekpagina hier. In feite, laat me proberen te schoon dit een beetje. Het blijkt dat op de ingang, kan ik een ander attribuut placeholder. En ik misschien iets als zoekwoorden, of meer specifiek, te vragen voor de q. 

En merk, nu, ik heb dit soort grijze tekst dat verdwijnt Zodra ik begin te typen, maar het is waarschijnlijk iets je hebt gezien in andere webpagina's. Ik hou niet echt de knop Verzenden. Dus ik ben eigenlijk van plan om het te geven Submit knop een waarde van search. En nu, als ik herladen, merken dat mijn knop wordt de naam zoeken. Weet je, ik niet echt net als de logo hier. Zodat Google Font generator. 

Ik wil dit verder te animeren. Dus CS50 zoeken. Laat me mijn eigen logo te creëren. Dat ziet er leuk uit. Dus nu laat ik bewaar dit as-- branden. Waar gaat het naartoe? Er. OK. Gemist. Opslaan als. Dom browsers. Stand-by, we gaan fix dit eens en voor altijd. Daar gaan we. Prima. Sorry. Vrije dag. Nu is dit funky. Verlaat volledig scherm. Prima. 

Nu, als een gewone persoon, afbeelding opslaan als. Logo.gif. Nu ga ik naar CS50IDE en te gaan Ik ga gewoon pak het logo, Ik ga het slepen in mijn bron zeven directory, bestand al bestaat, ik ben OK met dat. Dus ik ga het overschrijven omdat ik het had al. En nu hoe krijg ik ontdoen van deze? 

Laten we doorgaan hier en doen image bron gelijk logo.gif. Sluit deze. Opslaan. En nu als ik ga terug naar mijn zoekopdracht pagina, nu is het ziet er goed uit. Oké, dus het heeft niet heel iets nuttigs gedaan. In feite, laat me proberen te zoeken voor een kat en zie wat er gebeurt. Katten. Verdomme. Het is niet alleen werken, blijkbaar. Dus wat is het belangrijkste stuk dat ontbreekt hier? 

Recht, zelfs als je niet weet welke HTML, Ik ben begonnen met het markeren van de telefoon vorm en ik heb hem verteld hoe om input te krijgen, geef me een tekstvak en een submit knop, welk stuk blijkbaar ontbreekt? Stel dat we willen eigenlijk dit ding goed werkt. Wat moeten we doen? We hebben behoefte aan de uitvoering van de back-end database of de zoekmachine zelf, en dat gaat om een ​​te nemen heel veel tijd, eerlijk gezegd. 

Dus onthoud wat we deden vorige keer. Dus als u op zoek naar iets op Google en je hebt te voren uitgeschakeld, recall, instant search. Dus laat me zetten dat uit zodat dit in feite gedraagt ​​zich als een oudere scholen browser, als ik nu zoeken naar iets als katten, herinneren wat de URL eruit ziet. Het is vrij cryptisch. Maar ingebed in daar, recall, is slash zoeken. Vraagteken q gelijk aan katten. 

En dat lijkt me een hele hoop van de zoekresultaten. Zodat je weet wat ik ga doen? Ik ga om te lenen Google voor slechts een minuut. Ik ga om te gaan over hier en ik ga zeggen dat dit vormt actie of bestemming zogezegd, moet letterlijk Google. En de methode die ik wilde gebruik gaat worden krijgen. 

Dus wat is actie? Actie is vreemd genoemd, maar dat betekent wie gaat behandelen de actie van dit formulier? Als ik klik zoeken, waarbij moet het resultaat heen? En als ik ga nu terug naar mijn vorm hier en laad mijn webpagina en nu zoeken naar iets achtige hond, merkt nu Ik heb opnieuw geïmplementeerd Google. Rechts? 

Als ik wil om te zoeken naar iets anders, het werkt niet alleen voor honden, Het werkt ook voor katten. Het werkt ook voor de CS50. En OK, dit is gewoon onder whelming, is het niet? Oké, maar het eigenlijk werkt. Dus wat er daadwerkelijk aan de hand? Dus ik heb mijn browser geleerd, met behulp HTML, om input te nemen van de gebruiker en eigenlijk stuur die ingang naar een externe server via HTTP. 

En omdat mijn browser begrijpt HTTP, het eigenlijk construeren URL zodat wat Ik uiteindelijk meer dan in mijn browser, let op wat er gebeurt toen ik naar de hond. Als ik klik zoeken, merken dat de URL verandert als ik van plan was om google.com/search~~V vraag is gelijk aan de hond. En dat komt omdat het formulier weet, omdat de methode te krijgen, om gewoon te voegen aan die URL daar. 

Nu, deze webpagina's zijn nog steeds lelijk. Dus laten we introduceren één andere stuk van de syntax als we kunnen vandaag. En dit is iets bekend als cascading style sheets. Dus laat me een kijkje nemen op dit voorbeeld hier en te zien als we kunnen afleiden wat er gaande is. Dit is CSS0.html. En dit is waar de dingen een beetje lelijk. Want helaas, in de wereld van het web, HTML alleen kan niet alles doen. En dus als je wilt stileren uw webpagina, je eigenlijk nodig hebt om zich te concentreren op de esthetiek op een andere manier. Dus hier heb ik het lichaam van mijn web pagina binnenkant van dat is een grote div. En een div betekent gewoon divisie. Dus het is als een paragraaf, maar het niet dezelfde semantiek hebben van een paragraaf van de tekst. 

Dit betekent dat alleen maar om de browser, hier komt een groot rechthoekig gebied van mijn web pagina, ik wil het speciaal behandelen. Nu, lijn 21 is waar dat div begint. En gewoon een gok. Wat is het effect van de lijn 21 aan de rest van de inhoud van de pagina? Gecentreerd. Dat is alles. Dus we hebben niet een manier van zien de tekst eigenlijk centreren. 

In feite, mijn zoekmachine, in tegenstelling tot de feitelijke Google, was allemaal gerechtvaardigd naar links. En nu in de lijn 21, ik zeg, hey browser, het creëren van een afdeling van de pagina. Geef me een grote, onzichtbare rechthoek. Dat is hoe ik wil na te denken over de webpagina. En stileren vervolgens als volgt. Binnenkant van de citaten, nu, is een tweede taal dat we vandaag geïntroduceerd heet cascading style sheets. Gelukkig, het is ook niet een programmeertaal, dus het is zeer beperkt in de syntax, maar Ook een zeer beperkte functionaliteit terwijl HTML is alles over markeren van de gegevens van een webpagina en de structuur van een webpagina. CSS doorgaans in laatste mijl, de esthetiek, het verkrijgen van de maat en de kleur en de plaatsing precies midden in een webpagina. Inderdaad, het is gevormd met belangrijke waarde paren. 

Een eigenschap als dit, tekst uitlijnen, gevolgd door een dubbele punt, gevolgd door de waarde van deze eigenschap, die in dit geval center. En nu merk je kunnen nestelen deze dingen. Als ik wilde alles in die Ik heb gewezen te worden gecentreerd, dat is waarom ik heb lijn 21 en de bijbehorende lijn 31. Maar stel nu willen zeggen John Harvard, welkom op mijn homepage. 

Copyright symbool John Harvard. En stel dat ik wil dat de eerste van die lijnen te behoorlijk groot zijn. 36 pixels. Dus dat is een behoorlijke omvang. En ik wilde het gewicht vet te zijn. Maar daaronder Ik wil kleinere tekst. En onder dat, ik wil nog kleiner tekst. Sorry. Vandaag voelt als een slechte dag. 

Dus nu, wat moet ik doen om dit uit te drukken? Hier op lijn 22 is een geïntegreerde div of geneste div, als je wil. Het heeft ook zijn eigen stijl tag. Ik geef een lettergrootte van 36. Ik een lettertype gewicht van vet te geven. Hier beneden, ik alleen maar geef 24 pixels. En tenslotte, in de lijn 28, ik geef 12. Dus gewoon als een snelle sanity check en als mens te lezen dit, welke woorden op het scherm zijn daadwerkelijk gaat vet zijn? Welke lijnen zijn eigenlijk vet? 

Gewoon John Harvard. Rechts? Want net als lijn 22 zegt hey browser, hier is een divisie van de pagina. Maak er lettergrootte 36 punt. Maak het lettertype gewicht vet. Zodra u bij de corresponderende eindtag of gesloten tag op lijn 24, dat betekent, he browser, stoppen met het doen wat het ook is je doet. En kennisgeving om duidelijk te zijn, ook al lijn 22 heeft al deze attributen achtige stijl, als je sluit de tag in de lijn 24, u alleen vermelden de naam van de tag. 

Je hoeft niet te herhalen het woord stijl of alles wat er binnen in de quotes. En dus als ik kijk naar dit nu in mijn browser, laten we Een blik op het eindresultaat. Laat me gaan vooruit naar dit bestand, dat is CSS 0. En het is nog steeds vrij eenvoudig, maar al behoorlijk interessant. Maar het blijkt dat er's andere dingen die ik kan doen hier, en op het risico van het maken van Dit volledig afschuwelijk, merkt hier dat in mijn lichaam van mijn webpagina, Ik kan iets grappigs doen zoals bg of achtergrondkleur. 

En snel, wat is je favoriete kleur? Groen Ik hoorde. Prima. Dus nu, als ik raakte reload nu, We hebben een groene webpagina. Oké, dus dat is niet slecht. En nu, als ik wil dit echt maken cool, ik kan de kleur van mijn tekst te maken zelfs rood. Dus laten we zien hoe dit eruit ziet. Nu is het ziet er goed uit. En hier beneden, als je echt willen knoeien met iemand of als u wilt worden één van die mensen die probeert u te verleiden tot een bezoek aan een web pagina, omdat ze bedrogen Google te denken is er een hele hoop sleutelwoorden like-- laten we eens kijken, herladen. Waar ging het? En daar is het ons. Prima. Dus ik zeg dit als een terzijde, zullen we praten over dit soort dingen in een paar weken als we praten over veiligheid, als u daadwerkelijk insluiten hele trossen zoekwoorden in een webpagina, zelfs als ze niet zichtbaar voor een mens, iemand als Google, natuurlijk, kan nog steeds dit ook daadwerkelijk te vinden. Oké, dus dat is mooi vrij snel afschuwelijk. 

En in feite, het is niet allemaal die veel in tegenstelling tot mijn eigen web pagina als een undergraduate, die Ik begon googlen om uit te vinden eerdere versies van mijn oude websites. Het was nogal slecht. In feite, vond ik een net voor de les. Maar er is nog erger die er zijn. Dit was blijkbaar mijn startpagina in 1996. Blijkbaar vond ik het geschikt om mensen te vragen hun naam voordat ze konden eigenlijk zie mijn webpagina. 

En vervolgens liet I iets stoms, waarschijnlijk. Ik zal meer voor de volgende keer graven. Maar voor nu, laten we overwegen een beetje van het ontwerp. We hebben gesproken over de stijl. En deze pagina tot nu toe en de meeste van alles wat ik heb geschreven is vrij schoon stilistisch. Maar hoe zit het ontwerp? Nou, er is veel redundantie in wat ik hier heb gedaan. 

Ik heb gezegd het woord kleur in een paar plaatsen. Ik heb gezegd lettergrootte in een paar plaatsen en vet in een paar plaatsen. En fundamenteel, ik ben co vermenging van twee talen. Ik heb met mijn HTML-tags en mijn attributen en dan ineens, tussen aanhalingstekens, ik heb de tweede taal van vandaag genaamd CSS, die weer, is alleen deze key waarde paren of deze eigenschappen gescheiden door dubbele punten. 

Het blijkt dat veel zoals in C, waar we kan beginnen om uit factor enkele code in header-bestanden, dus kunnen we hetzelfde doen in HTML. En een stap in de richting die als volgt. Merk op dat deze versie, CSS1.html is Structureel exact dezelfde webpagina. Dus ik heb een heleboel gekregen van divs, maar deze keer heb ik weggedaan van de wikkel div zoals u zult zien. 

En ik heb die drie divs gegeven boven, midden en onderaan, unieke ID's. Dit is mooi, want door het geven van die afdelingen van de pagina unieke identifiers, Ik kan ze elders verwijzen. Waar? Nou, laat me scrollen. En tot nu toe, wanneer we hebben gekeken aan het hoofd van een webpagina, wat is de enige tag we hebben gehad het hoofd van een webpagina? Een beetje luider. Gewoon de titel tot nu toe. Maar het blijkt dat er's een paar andere dingen U kunt daar zetten, een van waarin het heet een stijl tag. Dus even geleden, keken we bij een attribuut stijl. Blijkt dat er een stijl tag. Het behoort binnen van het hoofd van een webpagina. En let nu op wat ik doe. Ik heb binnenkant van deze stijl tag de volgende. Ik ben letterlijk vermelden op lijn 20 de de naam van een tag die ik wil stileren. 

Dan heb ik geopend accolade en gesloten accolade. Zo vergelijkbaar in de geest naar C, maar nogmaals, dit is niet een functie, dit is slechts een syntactische detail hier. En dan natuurlijk, ik zeg de browser, hey browser, maken het hele lichaam van de pagina hebben een tekst uitlijning van het centrum. En dan dit zegt het volgende. Hey browser, als je een HTML element of tag in de pagina die heeft een unieke identificatie van de top, dus de hash symbool hier betekent gewoon uniek idee van de top, ga je gang en maak de lettergrootte 36 en het lettertype gewicht vet. 

Hey browser, een element waarvan ID is midden, maken het 24 pixels. En hey browser, als je een idee van bodem, maken het 12 pixels. Het effect uiteindelijk is precies sam. Als ik in CSS 1, de pagina ziet er hetzelfde uit. Maar we zijn een stap in de richting een iets beter ontwerp. Laat me nu weer gaan hier naar CSS2 en zie wat ik heb gedaan. 

Nu is de pagina is echt, echt schoon. In feite, kan ik alle passen de inhoud van een pagina in. Maar wat nieuwe tag heb ik ingebracht, uiteraard? Link. En het is niet de beste naam voor een tag, want het is niet een schakel in de zin dat we weten het, maar dit betekent een schakel in een ander bestand. Dit is een soort scherpe omvatten in C. 

Dit is de manier waarop in HTML hey browser zeggen, haal de inhoud van het bestand met de naam css2.css. De relatie, voor mij, is dat het een stylesheet. En inderdaad, daar één van de S in cascading style sheets middelen. Dit is een style sheet. Het is gewoon de tekst bestand met een hele hoop van het pand. Het is een hele hoop stijlen dat u wilt toepassen op een pagina. 

En dus dit is blijkbaar verwijzend naar een tweede bestand. En als ik open dat CSS2.css, merken dat alles wat ik heb gedaan is kopiëren en plakken alle van deze in dit bestand. En nu, zelfs als je nog nooit hebt gecodeerd voordat dit spul, maar eens kijken bij de spreekwoordelijke techniek hoed op, waarom is dit een beter ontwerp waarschijnlijk? Factoring uit de CSS-eigenschappen, ze in hun eigen bestand. Hoewel we dit opgelost probleem als vijf minuten geleden in de eerste versie. 

We hebben niet een verbetering van de pagina stilistisch, dit is gewoon beter ontwerp in zekere zin. Waarom denk je dat? Ja. Flexibeler hoe? Ja. Dus als je wilt gaan rug en dingen veranderen, Nu, heb je één plek waar je kunt dingen veranderen. En inderdaad, iets zoals probleem stelde zeven, waar we zullen implementeren aandelenhandel website, dat gaat een hebben heleboel pagina's. En het zou echt vervelend als je besluit, hm, Ik hou niet echt 24 pixels, ik wil dat het is 28 pixels of iets groter. En dan moet je een doen globaal zoeken en vervangen of alle bestanden van uw website te openen gewoon om daadwerkelijk te veranderen één waarde. Door factoring uit deze stijlen in een centrale plaats, U kunt nu een tekstbestand in CS50IDE in een programma, veranderen, opslaan, en gedaan. Je hebt gepropageerd die veranderingen overal. En dat zou hetzelfde zijn in een punt h bestand ook. Dus vragen dus ver op deze syntax? Oké, dus we hebben alles gedaan wat het lijkt behalve daadwerkelijk implementeren hyperlinks. En dus laten we verder gaan en doen dit. Laat me gaan en maak een nieuw bestand hier. Ik ga noemen link.html, zet in de huidige code. 

En ik ga open doen beugel soort doc html. Even terzijde, dit ding aan de top, dit document type declaratie, het is het enige dat is raar met het uitroepteken. Je moet het gewoon doen er en het betekent dat we met behulp van HTML-versie 5. Oudere versies van taal veel langer had strings die je nodig had om daar te zetten. Dus hier is een voorbeeld genoemd link. 

Ik heb een lichaam van mijn webpagina hier. En hier, a href gelijken laten we zeggen HTTP://www.disney.com en mijn favoriete website, zullen we zeggen. Oké, dus een zeer onschuldig, gebruiksvriendelijke pagina. Als ik nu ga in mijn directory Vermelding hier en open link.html, we hebben hyper tekst. 

En inderdaad, dit is waar H HTTP komt. Hypertext Transfer Protocol is over het overbrengen van tekst dat heeft hyperlinks naar andere middelen. En inderdaad, hier is de bekende, als retro, blauwe link die wanneer geklikt, zal daadwerkelijk leiden mij tot Disney.com. Nu, oh, dat is coming out soon. Oké, dus nu, wat zijn sommige van de gevolgen van deze? 

En eerlijk gezegd, de wereld begint om een ​​beetje meer vertrouwd te krijgen en ook een beetje enger maar ook een beetje zichzelf te verdedigen als je eenmaal begint om deze dingen te begrijpen. Omdat de kansen zijn, sommigen van jullie, als je via je Gmail spam folder of zelfs uw inbox, je hebt waarschijnlijk gekregen een soort van e-mail dat vraagt ​​u om te veranderen van uw wachtwoord misschien of misschien controleren uw PayPal referenties of zo. 

En in feite zou je hebt ontvangen iets dat zegt als klik hier om uw PayPal wachtwoord te resetten. En nu, ziet, indien dit is niet Disney.com maar net als badplace.com en herladen, er rekening mee dat de tekst hier kon wat dan ook zeggen. En in feite is dit alleen maar woorden. Waarom heb ik niet echt super kwaadaardige en zeggen: http://www.paypal.com. 

Klik hier reset uw PayPal wachtwoord en nu herladen. Dit ziet er legitiem, toch? Ik bedoel, ik zou het niet op Een e-mail die gewoon zegt dit. Maar let op de tweedeling hier. Het zegt www.paypal.com, en in feite, wacht eens even, we weten dat u wilt het is voor de veiligheid. Dus nu, ga naar www.paypal.com HTTPS, maar als je nog nooit eerder gedaan, krijg in de gewoonte van zweefde over weinig links hier. En het is moeilijk om te zien op het scherm is er, en het is hier niet zo eenvoudig. Maar weg hier in de kleine hoekje doet de browser eigenlijk je dat we gaan vertellen om badplace.com plaats van Paypal.com. Nu, waar gaan we heen met dit? Alle voorbeelden die we hebben gedaan vandaag, we hebben hard gecodeerd en handmatig uitgetypt. Het web is ongelooflijk oninteressant als je hard code van uw webpagina's, zodat de inhoud is statisch en nooit veranderen. Natuurlijk, al onze favoriete websites van vandaag, of het nu Gmail of Twitter of Facebook of een aantal anderen zijn dynamisch. Ze veranderen in reactie op gebruikersinvoer net als de zoekresultaten van Google. 

En zo op woensdag, wat we doen is verlaten we HTML en CSS introductie achter ons en we nemen vanzelfsprekend dat we nu weet het en we introduceren een nieuwe programmeertaal genaamd PHP, die graag C, zal ons de kracht om daadwerkelijk te creëren programma's die zichzelf genereren output. In dit geval zullen we met behulp van PHP om dynamisch web te genereren pagina's met behulp van deze nieuwe taal. Zodat er meer op dat op woensdag. Zie je dan. 

[Muziek]