[Speel van musiek] 

DAVID J MALAN: Dit is CS50 en dit is die begin van die week 7. So welkom terug. En jy kan onthou dat in die probleem stel vier daar was 'n bietjie van 'n aasdier jag vir 'n paar fantastiese pryse waardeur nadat jy die herstel van die foto's van personeel hier en in New Haven, jy is uitgedaag om soveel as moontlik van vind diegene rekenaar wetenskaplikes as wat jy kan. En ons het 'n hele n klomp van die voorleggings. Gedink ek wil 'n paar te deel met jou vandag hier. 

En ons sal al hierdie post aanlyn. Maar in die besonder, ek wou vestig u aandag aan- en een Sam was in 'n hele paar van hulle algemeen poseer soos hierdie. Maar dit blyk dat as van vanoggend, die wenner is 'n sekere iemand met die naam Ken met 24 van die personeel op kamera vasgelê of 'n paar meer wanneer jy in rekening verskeie personeel in die foto's. Op die foto is Ken volgende Maria in New Haven. 

Nou, Ken, al is, blyk uit is bietjie van 'n hoek geval dit is nog nie voorheen gebeur. Dit blyk dat dit nie plaasgevind het nie om met my te fynskrif in die probleem sit stel vier wat sê dat personeel nie in aanmerking vir die fantastiese pryse want Ken is, natuurlik, een van die fotograwe op ons personeel. Nou, met wat gesê het, het hy oorspronklik geskryf vir my om te sê asseblief nie hierdie foto's post aanlyn. Ek dink 'n groot deel omdat die meeste van die foto's dat dit fotograaf het kyk 'n bietjie iets soos hierdie. En dies meer. 

Maar Ken wil my om jou gerus te stel dat hy 'n baie goeie fotograaf, Hy is 'n professionele, neem hy foto's wat nie vaag is, wat beter in fokus, en hy het 'n hele paar van ons eie personeel. Maar eerder as net erken Ken, wat ons gedink ons ​​wil doen is deur die lys van werklike studente wat ingedien word. En dit blyk dat Lance met 15 foto's as van vanoggend was ons wenner. 

En hier uitgebeeld is Lance met Colton, met Skaz met myself, en met Sam. Maar dan is dit blyk dat as van 11:46, so net 'n bietjie gelede Ek gaan terug na my e-pos en gevind dat ons het toe nog een meer voorlegging deur 'n student met die naam Bonnie wie email gesê net dit. Gaan nie lieg nie, ek is om dit te doen in die klas. En toe voortgegaan om net te heg 14 foto's, een skaam van Lance se 15. 

Maar in Bonnie se foto's, dit blyk uit was verskeie personeellede, Sam onder hulle, so wat ons gedink het ons sou doen, is erken beide van hierdie. So in Benewens om die Dropbox ruimte wat almal wat deelgeneem ontvang, sal ook hierdie twee afdelings ontvang 'n mooi gesorg middagete vir hulle en hul afdeling spanmaats hierdie komende week. En so sal jy hoor van ons, Lance en Bonnie, oor dat. So groot Geluk aan hulle. Nou, dié van julle wat wil soos middagete algemeen weet dat CS50 middagete in Cambridge en New Haven is hierdie Vrydag. Gaan na CS50 se webwerf slash RSVP. En nou 'n woord oor die seminare. Meer curricularly. So ons nader die punt van die semester waar jy moet begin dink oor die finale projekte. En in die feit, in net 'n bietjie, sal sogenaamde pre voorstelle wees as gevolg. So pre voorstelle is bedoel om redelik lae impak en regtig net 'n geleentheid vir jy 'n kort nota komponeer jou onderrig mede te openbaar hom of haar wat jy dink jy wil dalk om te doen vir jou finale projek. 

Nou, baie studente beland doen web gebaseer finale projekte. En natuurlik, ons is net nou het verlede week in hierdie en verder duik in web ontwikkeling. So moenie bekommerd wees as jy het absoluut geen idee hoe sal jy die idees te bou wat jy mag hê in jou gedagtes. Dit is regtig net 'n funksie dwing te kry wat jy dink en praat met jou TF daaroor. Maar om jou te help met wat, en finale projekte uiteindelik weet dat CS50 het 'n tradisie van die aanbied van seminare. 

En dit is opsioneel, hande op, of lesings gebaseer op geleenthede om meer oor onderwerpe wat leer 'n bietjie aanvullend tot die kursus se leerplan, maar tog wonderlike materiaal te ry finale projekte. En so is dit die lys wat CS50 personeel hier in New Haven het gekom met vir vanjaar oor IOS programmering, Android programmering, die spel ontwikkeling, en trosse van meer gereedskap en tale en tegnieke. 

So 'n oog hou op die webwerf die CS50 se. En in die tussentyd, as jy wil registreer jou belangstelling in enige van hierdie, gaan na CS50 se slash register. En ons sal dit dan opvolg as die dae en vlug tye en plekke en everything-- meeste alles sal gestroom en ook beskikbaar op aanvraag Na As jy nie kan eintlik maak dit. So sonder verdere uitstel het, ons opgehou laaste tyd saam met AOO. 

En dit was soos die boodskap wat binnekant van die virtuele koevert, onthou, dat ons oorgegaan het uit die router om router router tussen 'n webblaaier en 'n web bediener. En dat die boodskap het 'n bietjie iets soos hierdie. Dit was die boodskap wat meer arcane was eintlik binnekant van 'n koevert geskryf op 'n stuk papier waarvan eerste reël sê letterlik, kry slash. 

En net as 'n gesonde verstand tjek, wat het slash dui? Wat beteken slash bedoel wanneer versoek om 'n webwerf? Jy vra dit al die tyd. Die meeste enige tyd wat jy 'n webtuiste besoek, moet jy nie eintlik tik in 'n lêer naam. Jy het waarskynlik net na Facebook.com, betree, gmail.com, of die wil. En wat beteken slash verteenwoordig? Wat lêer? Of watter bladsy, spesifiek? 

Die indeks, ja. So het die standaard bladsy. So, as jy nie 'n lêer spesifiseer noem as ons begin om te sien, jy is eintlik net versoek gee my die standaard bladsy van Facebook of gee my inbox of gee vir my die standaard bladsy van die nuus op die webwerf CNN se of die wil. En 'n bediener reageer dan dat die boodskap met iets soos hierdie, sê ja, ek spreek HTTP weergawe 1.1. 

200, wat 'n status kode wat ons mense selde ooit sien nie, want dit is goed. Want dit beteken OK, die versoek ontvang en behoorlik hanteer word. En die tipe inhoud blykbaar in die reaksie is dikwels, maar nie altyd nie, teks. En spesifiek, HTML. En dit is eintlik waar ons kyk na vandag. 

So in werklikheid, ek gaan om te gaan voor en maak 'n leser. Ek gaan Chrome gebruik, kan jy gebruik mees enige leser in die komende weke. Ons beveel die algemeen Chrome want dit is veral goed vir sagteware-ontwikkelaars. Dit het 'n baie gebou in gereedskap wat dit makliker maak om nie net HTML en CSS ontwikkel, dinge wat ons sal begin praat oor vandag, maar ook ander tale. 

En ek gaan om voort te gaan en te gaan aan- Ek gaan om te beheer of regs kliek Klik op enige plek op 'n webblad. En ek gaan om te gaan om te inspekteer element. En ek gaan aanpas my skerm net 'n bietjie hier. Laat my dit te skuif na die onderkant. So dit is wat genoem Chrome se inspekteur. So dit is soos 'n debugging instrument gebou in Chrome. 

Almal van julle hierdie reeds as jy die gebruik van Chrome gewees het. En dit kan jy sien wat aangaan op onder die kap van 'n paar web bladsy. So laat eintlik 'n kyk na dit soos volg. Dit het meer funksies manier en ons omgee vandag. Maar daar is hierdie oortjies hier. Elemente, netwerk, bronne, tydlyn, en 'n paar ander dinge. Ek gaan om te klik op Netwerk vir 'n oomblik. 

En dit is 'n bietjie oorweldigend met die eerste oogopslag hier. Maar wat ek gaan doen, is laat my vereenvoudig dit 'n bietjie. Ek gaan om te draai op die opname lig, sodat dit is rooi. En ek gaan om te sê bewaar log. En dit is net 'n bietjie ding wat ek uitgepluis met verloop van tyd wat gaan om te red alles wat gebeur in die leser. En nou is ek gaan om te gaan om http://facebook.com. 

Eintlik, laat ons doen www vir 'n goeie mate, streep. Betree. So 'n URL wat baie van jy dalk besoek. En nou Facebook se web page kom aan die bokant. En dan 'n hele klomp van die dinge gevlieg deur aan die onderkant. En in die feit, dit blyk dat wanneer jy Facebook.com besoek, jy nie net die maak van 'n HTTP-versoek, dit blyk dat gaan Facebook.com stuur 41 van die koeverte, elk met sy eie get versoek soos aangedui, hoewel agter die skerm hier, aan die onderkant van die skerm, dit dui daarop dat, inderdaad, my leser gemaak 41 die versoeke. 

En in totaal, dit oorgedra 861 kilogrepe en dit het vir een of ander rede soveel as agt sekondes om al van daardie laai. So dit is eintlik 'n bietjie vreemd dat Facebook se webwerf sal neem dat lank, maar dit is so in hierdie geval. Nou, al hierdie ek het nie regtig omgee oor, behalwe vir die boonste versoek. So laat ons gaan om hierdie een reg hier en laat my uit zoom vir net 'n oomblik. 

En laat my zoom in op hierdie. So, wat ek gedoen het by verlaat, selfs al daar is 'n baie gaan op hier Ek het uitgelig word Facebook.com en dan sien dat ek blaai af, blaai af, blaai af, om kop te vra. En jy sal sien dat Chrome toon my wese die innerlike inhoud van die versoek wat ek gemaak het. Dit is nie opmaak in baie dieselfde manier, maar kennis van daar melding van te kry, sien daar is melding gemaak van die leër, Facebook.com, die pad, of streep wat is die lêer Ek versoek. 

En dan as ek blaai back-up, sal ons eintlik sien dat wat Facebook teruggekeer vir my is al hierdie headers. So binnekant van die virtuele koevert inderdaad is 'n baie belangrike waarde pare. 'N woord, 'n dubbelpunt, en dan 'n waarde. 'N woord, 'n dubbelpunt, en 'n waarde. Dit is genoem kop. En daar is hier manier meer detail as ons eintlik omgee nou. 

Maar dit is die tweede om laaste een af ​​daar, sien dat bediener Facebook.com se inderdaad hier gesê kom 'n paar teks HTML. So al hierdie dinge is om te sê dat wanneer jy versoek om 'n web bladsy uit 'n leser 'n bediener, die bediener reageer met 'n koevert van sy eie binnekant van wat teks. Met ander woorde, HTML. HyperText Markup Language. Wat is 'n ander taal wat ons vandag voer dat mense of rekenaars genereer om webblaaie te implementeer. 

Spesifiek, laat ons kyk na hierdie. Ek gaan nou terug te gaan webwerf Facebook se. En ek gaan net beheer kliek of regs kliek en klik op View Page Source. En selfs as jy nie gebruik Chrome, IE kan dit doen, Firefox kan dit doen, Safari kan dit doen, selfs al is die spyskaart opsies kan kyk 'n bietjie anders. En dit is die HTML wat Mark en maatskappy op Facebook geskryf het. 

En om gesamentlik, hierdie taal hier implemente die blou en wit bladsy wat ons gesien het 'n oomblik gelede. Nou, dit is 'n bietjie oorweldigend. Maar as ons kyk na links bo, ons is gaan om te begin om 'n paar patrone te sien. Dit lyk asof daar is 'n baie van hierdie oop hoek bracket en dan is daar hierdie navraag HTML. Hier is nog 'n oop hoek bracket en kop. 

Hier is, as ons scroll down en af ​​en af, ek is gaan om voort te gaan en probeer om te soek vir iets. Daar manier oor op die regte hier is oop bracket liggaam. En onthou van verlede keer dat ons voorgestelde dat die eenvoudigste webblad dat 'n mens kan skryf kan kyk 'n bietjie iets soos hierdie. Oop HTML tag, oop kop tag, oop titel tag, dan geslote titel, geslote hoof, oop liggaam tag, teks, gesluit liggaam geslote HTML. 

Maar 'n pouse hier vir net 'n oomblik. Hierdie kode, selfs as jy het dit nooit geskryf voordat maar nog steeds nie heeltemal verstaan wat gaan aan, lyk redelik goed. Reg, dit is baie skoon. Dit is baie stilisties nice. Baie van inkeping en wit ruimte. Facebook se is nie. So hoekom is Facebook soveel erger as wat ek by die skryf van HTML? Blykbaar. 

Reg, dit is soos een uit vyf vir styl. Daar is 'n oortuigende rede vir hulle om hierdie hoeke te sny. Alle reg, sodat hulle nie wil maak dit makliker vir jou om dit te lees. So in 'n sekere sin, hulle is obfuscating dit soort van skommeling dit ten minste so esteties dat dit moeiliker vir Myspace om te gaan en rip off hul tuisblad en die HTML vir dit. Dit blyk dat met programme al, insluitend Chrome, ons kan hierdie super maklik skoon te maak. So dit is nie heeltemal wat as die rede. Wat anders kan die oorsaak wees. Ja. Ja, wit spasie koste data. Wat bedoel jy? Ja, presies. As jy die sleutel getref Tab 'n baie of die space bar, oorweeg die implikasies. So elke sleutel op u sleutelbord is 'n [Onhoorbaar] verteenwoordig as een greep. 

So dink dat Mark of enige van die devs hierdie dae treffers die spasiebalk net een keer in hierdie HTML bladsy wat verteenwoordig Facebook se tuisblad. En Facebook het 'n baie gebruikers van hierdie dae. So dink dat Facebook se tuisblad besoek deur 'n miljard mense vandag. En iemand by Facebook het druk die space bar net een keer. 

So een addisionele byte, 'n miljard versoeke, hoeveel te meer data is Facebook oordrag oor die internet omdat iemand druk op die spasiebalk op sy of haar sleutelbord? 'N miljard grepe of een GB data is van Facebook bedieners gestuur om mense regoor die wêreld vir geen goeie rede. Nou, dit is net 'n ruimte. 

Stel jou voor dat ons dit eintlik skoon ding en ingekeep dit en bygevoeg 'n baie wit ruimte en blad karakters en ruimtes, beland jy besteding GB, Indien nie terra grepe meer van die ruimte. En so super algemeen in die werklike wêreld van die web-ontwikkeling is om jou kode verskerp. En ons sal uiteindelik sien hoe jy dit kan doen. 

Maar vandag, sal ons begin skryf kode dit is eintlik gelees deur ons mense. Dit blyk uit, al is, as jy gaan terug hierdie instrument in Chrome Inspekteer Element, Voorheen was ons op die blad Network. Dit blyk dat as jy gaan na die elemente blad wat jy eintlik sien is Chrome se mooi gedrukte weergawe van dieselfde HTML. Dus het ons deobfuscated dit. So dit is nie opgewasse vir 'n rekenaar. En nou kan jy eintlik klik om en begin om die hiërargie wat 'n webblad te sien. So laat eintlik dit te doen. Ek gaan om voort te gaan en maak op my Mac 'n program genaamd teks wysig. En onthou dat dit is net 'n super eenvoudige teks program. Windows het notepad.exe. En ek gaan woordeliks tik die volgende. Doc tipe HTML, oop bracket HTML, gesluit bracket HTML, ons het die hoof van die bladsy hier, die einde van die hoof van die bladsy hier, 'n titel sal wees soos, hello wêreld. 

En dan af hier, moet ons die liggaam van die webblad. Geslote liggaam. En dan hier, hello wêreld. Alles reg. So het ons 'n super vinnige webblad geskryf. Ek gaan om dit te red as hello.html op my lessenaar. My Mac se gaan om te kla, dink dat, wag 'n minuut, dit is 'n teks lêer, doen jy wil om dit te noem txt? Maar nee, ek wil dot HTML gebruik. 

En dan wat is lekker as ek net dubbel kliek op hierdie lêer, hello.html, hier is my webblad. Ongelukkig is ek die enigste persoon in die wêreld wat hierdie bladsy kan besoek nou. Omdat waar kom dit blykbaar woon? Dit is op my Mac, reg? Wat is nutteloos. Soos niemand in hierdie kamer laat staan ​​op die internet eintlik kan besoek die bladsy. So vandag, moet ons stel 'n ander element. 

En om dit te doen, gaan ek gaan voort en oop wolk 9. So wolk 9 is natuurlik 'n wolk-gebaseerde service-- CS50 IDE-- Dit het al ons werkruimtes iewers op die internet hardloop. En dit beteken dat almal van ons lêers is reeds in die openbaar toeganklik. So laat ons gaan voort en doen dit. Ek gaan om voort te gaan en skep 'n nuwe lêer NCS50IDE. Ek gaan om dit te red as voorheen as hello.html en klik red. En nou net om tyd te bespaar, gaan ek om voort te gaan en 'n afskrif plak die kode eerder as tik dit. En stoor dit. En so het ek nou ' lêer genaamd hello.html. Maar hoe doen ek eintlik maak dit as 'n webblad? Wel, dit blyk uit die gebou in te CS50 IDE is nie net 'n samesteller soos klang en 'n debugger soos GDB en trosse van ander programme, daar is eintlik 'n volwaardig web server hardloop binne CS50 IDE. 

Almal van julle, dit wil sê, jou eie web server. En 'n web bediener is net 'n stuk sagteware waarvan die doel in die lewe is om te dien op webblaaie. Om vir versoeke van blaaiers luister en reageer met min virtuele koeverte binnekant van wat is die inhoud wat ek geskryf het. So hierdie web bediener is eintlik vry en open source. Waar open source beteken net sagteware wat iemand anders geskryf dat ons almal kan eintlik sien en af ​​te laai en selfs verander die bronkode. En dit genoem Apache. 

En ons het dit 'n bietjie makliker te maak gebruik in CS50IDE deur dit Apache 50. Sodat dit kan eintlik die volgende verstaan. Ek gaan Apache 50 begin sê. En dan is ek net gaan dot sê. En ons sien 'n paar ietwat arcane boodskap wat sê opstel Apache se dokument [? groep?] om die huis, ubuntu, wat dit ook al is, streep werkspasie. Begin web bediener Apache 2 suksesvol. 

So lang storie kort, ek het nou net 'n knoppie gedruk en draai op 'n web bediener wie is nou luister op die internet op TCP-poort 80 op 'n spesifieke adres. En dit sê hier, en sal hierdie Based verander op jou gebruikersnaam en ander faktore, maar kyk nou as ek dit op, IDE50 dot jharvard en so en so, sien dat al hierdie tyd vir die afgelope paar weke, kan jy opgemerk dat jou eie gebruikersnaam ingebed in die boonste regterkantste hoek van CS50IDE. 

En dat dit eintlik is al Tyd Die adres waar jy kan besoek van al jou lêers via die web. Tot nou toe het dit nie saak gemaak, want in C, jy in die algemeen wil dinge loop in 'n terminale, wat nie op die web. Maar vandag, het ons begin skryf web-gebaseerde kode wat ons wil toeganklike openbare URL's. So, wat ek gaan doen is kliek op hierdie URL. 

En agterkom dat ek sien 'n redelik lelike indeks, 'n gids lys, maar wat lêer spring uit by u waarskynlik? Hello.html. Dit is omdat ek gered die lêer in my werkplek. En wat ek vertel het Apache die webbediener is kyk in Dawid se werkplek gids. En laat iemand in die wêreld te sien die lêers. 

En inderdaad, as ek nou klik op hello.html, Ek sien in hierdie blad presies die lêer. Nou sien, wolk 9 se toedoen iets 'n bietjie nuttig vir ons. Binne CS50 IDE, sien daar is skielik 'n adres bar. Dit is omdat selfs al is ons gebruik van Chrome te CS50IDE besoek, binnekant van CS50IDE is sy eie weergawe van 'n webblaaier nou. En so eerder as dinge bemoeilik as sodanig, Ek gaan om voort te gaan en net kopieer die URL. Ek gaan voort en gaan net my eie Chrome venster oop te maak. So daar is geen magic hier, geen CS50IDE. Ek gaan net letterlik plak my J Harvard URL en druk Enter. En voila, nou is ek, en in teorie, almal op die internet, as ek het gekonfigureer regte toepaslik, Hierdie lêer kan besoek. En so nou, as ek sê hello.html, voila, daar is my ongelooflik underwhelming webblad. So kom ons doen 'n vinnige gesonde verstand tjek. Want al wat is konseptuele ingestel. En ons het eintlik nie regtig jy geleer hoe om te skryf HTML per se. Enige vrae wat tot dusver oor wat nou net gebeur? Ja. Maak CS50 besit hierdie web bladsye? In watter sin? Goeie vraag. So CS50 se besit CS50.io. Ons het inderdaad gekoop wat domein naam. En uit die aard van julle ouens meld by CS50IDE, julle almal te kry wat 'n subdomein genoem. 

So IDE50-Malan, of IDE50-Rob.CS50.io, dit is jou unieke adres binne ons domein naam. So vir die doeleindes van die kursus, jy jou eie unieke adres. Maar ons het dinge vereenvoudig deur die koop van die boonste vlak domein CS50 dot I / O en dan almal anders is binnekant van dat, om so te praat. En ons sal terug kom in 'n paar weke waarskynlik veral op finale projek tyd, toe sommige van julle dalk wil om jou eie domein name kry. Dit is eintlik relatief eenvoudig. Alles reg. So laat dit nou te doen. Ek gaan om terug te gaan na CS50IDE, waar my lêer nou, hello.html, is nie al wat interessant. Ek wil graag iets doen 'n bietjie mooier as dit. So ek gaan iets soos hierdie te doen nie. Laat my oop paragraphs.html. So, dit is 'n lêer wat ek geskryf het in advance. Op die top van dit, soos altyd, ons het kommentaar. Maar in HTML, kommentaar kyk 'n bietjie anders. On line drie en lyn 14, het jy sien die sintaksis vir begin 'n opmerking en eindig 'n kommentaar. 

Maar nie een van die dinge wat in tussen sake funksioneel. Dis net 'n nota om 'n menslike wat gaan hier aan. En net as 'n vinnige gesonde verstand kyk, as ek rol af, Wat is die voor die hand liggend nuwe tag wat ons het voorgestel? Die tags dusver het ons gesien is oop bracket HTML, kop, titel, en liggaam. Maar wat is nou duidelik nuut? 

Ja, so p. Die p tag of paragraaf tag. En dan het ek net geleen verstek Latynse teks my paragrawe uitmaak. Want wat ek wil demonstreer hoe jy dalk verteenwoordig paragrawe van die teks in HTML. En so wat besig is om te gebeur hier is dat daar reeds 'n patroon ontwikkel. En laat my gaan voort en doen dit. Laat my eerste afdraai Apache. En ek gaan om dit te vertel om homself te begin weer binne bron vandag se sewe m gids. Sodat ek toegang tot alles. 

En nou, as ek gaan terug na hierdie gids lys, sien ek elke lêer van vandag. En jy sal sien in die volgende probleem stel, sal ons gee jou instruksies om dit te doen presies dit. As ek oop paragraphs.html, kan dit sowel lyk soos 'n programmeertaal aan jou as jy praat nie of lees Latyn. Maar dit is net drie paragrawe van die teks wat op gemerk HTML. 

En kennis van die paragraaf breek tussen hulle. Omdat dit blyk, en selfs al is jy sou geneig wees om dit te doen, terwyl dit in die werklike wêreld, as jy wil lyn sit breek tussen dinge, jy dalk eenvoudig doen dit en druk Stoor. En nou, as ek herlaai hier, kennisgewing dat alles saam vervaag net in net een blob van die teks. Omdat HTML is 'n soort van 'n stom taal. 

Dit is bedoel om gebruik te word in so ' 'n manier dat die leser sal slegs doen uitdruklik wat jy vertel dit te doen. So as jy nie sê dit gee my 'n nuwe paragraaf, jy is nie van plan om 'n nuwe paragraaf te sien. En in die feit, wat die leser gaan doen selfs as jy druk Enter laat se weer en weer sê en weer beweeg hierdie teks manier af op die skerm en dan slaan en dan laai, die leser gaan om al daardie wit spasie ineenstort in net 'n enkele, sigbare spasie. Alles reg. So wat is die punt tag. En so wat is die patroon dit is die ontwikkeling van hier? Wel, dit blyk die geval te wees dat HTML is al oor die begin van 'n tag en eindig 'n tag. En wat is 'n tag? Wel, dit is net 'n stuk van sintaksis. Open bracket, 'n navraag, geslote bracket, is 'n tag. Of begin tag. En dan wanneer jy gedoen om jouself, soos in jy klaar is met die paragraaf, jy dit doen om die teenoorgestelde te praat. Maar die teenoorgestelde is nie heeltemal agteruit. 

Jy net voorvoegsel dieselfde tag se naam met 'n vorentoe skuinsstreep soos hierdie. Alles reg. So nie al wat opwindend. En in die feit, is ons nie die maak van die web alles wat meer interessant. Wat as ek wil maak dinge groter en vet? So dit blyk dat hier is 'n voorbeeld in headings.html waar in my liggaam, Ek het 'n H1 tag, H2, H3, vier, vyf, ses of, wat almal mooi lyk arcane. Maar as Ek weggaan oop hierdie Byvoorbeeld, kom ons neem 'n blik. Headings.html. 

So blaaier by verstek kan gee teks dit is 'n groot en sterk uiteenlopende groottes. H1 is groot. H6 is kleiner en dan alles tussen in. So dit is interessant, maar nog steeds nie regtig die web wat ek ken. Wat as ons wil ek iets soos 'n lys. . So hier is 'n opsomming lys van drie van Harvard se huise. 

Hoe het jy te werk gaan om dit te doen? Wel, 'n blik op list.html. En hier, sien ons 'n bietjie funkiness maar laat ons kyk wat gebeur. So op grond van wat jy nou net gesien het, UL staan ​​vir On-geordende lys. On-geordende lys net beteken opsomming. Daar is geen getalle. Daar is ook iets genoem 'n geordende lys, wat 'n OL by tag. Dan Li, lys-item is al wat dit beteken. 

En so is dit outomaties getalle alles vir jou. Maar weereens, al my inkeping en wit spasie is net ter wille van my. Die leser is nie eintlik gaan om te sorg. So selfs al is jy nie kon doen dit, net om duidelik te wees, jy moet nie, selfs al is die leser sal steeds in staat wees om dit te verstaan ​​net mooi. Ek slaan herlaai in my leser, ek kliek herlaai en geen verandering gebeur omdat die leser steeds doen presies wat ek vertel om dit te doen. 

Alles reg. So dit is alles net teks. Nou laat iets meer interessant te doen. Ek gaan om voort te gaan en leen sommige van hierdie HTML. Ek gaan om voort te gaan en skep 'n nuwe lêer hier. En ons sal dit rick.html noem. Ons het buite verhouding gebruikte iets bekend as 'n rick roll in hierdie klas vanjaar weet ek nie, dit is net organies gebeur. 

En nou is dit buite beheer geraak. So ek is net gaan om te gaan met dit. En as ek gaan na Google Beelde en Rick Astley. As jy nie weet hoekom ons doen hierdie, lees net op Wikipedia. Elke keer as jy geklik het op die skakel, iemand se is iewers lag. En laat my ahead-- daar te gaan ons gaan, laat ons sien die beeld. 

So hier het ons 'n beeld in Google Images. En laat ons aanvaar dat dit is redelik oral op die internet. So ek gaan om te aanvaar dit is OK vir my hierdie eintlik sit in my webblad. Ek gaan om voort te gaan en kopieer beeld URL. As ek dan nou terug te gaan na Wolk 9, laat ons sien wat ek hier kan doen nie. So hier is net 'n web bladsy. Dit is Rick Astley, haha, Ek gaan nou terug te gaan om my leser, laai, en interessant. 

Waar is Rick? So laat my sien wat gebeur het. Eintlik, ek gaan voorgee asof ek nie doen nie. [Onhoorbaar] het hom in hier. Ons sal terug kom in 'n oomblik. So hier is rick.html. So dit is nie Rick Astley. So dit blyk ons ​​kan hom eintlik hier by. Dit is Rick Astley. Ek gaan om te sê 'n beeld waarvan gee my bron is die URL Ek het net gekopieer, wat blykbaar is 'n gelukkige verjaardag iets of ander. 

En nou gaan ek sluit die tag soos hierdie. So is dit wikkel super lank. Maar let dat alles wat ek het gedoen is beeld oop bracket, bron met 'n kenmerk van hierdie. En dit is 'n baie lang URL. En aan die einde, dit agterkom. Hoekom het ek gedoen slash skuins bracket in plaas van, soos elke ander tag, met 'n oop bracket, IMG, gesluit bracket? Net 'n raaiskoot, selfs as jy het geen kennis hoegenaamd met HTML voor. 

Dit is so hoe dit sluit die opdrag, maar hoekom beteken dit nie regtig intuïtief sin om iets 'n bietjie meer te doen verbose soos naby beeld? Ja. Ja. Net semanties, daar is geen sin van begin 'n beeld en eindig 'n beeld, dit is óf daar is of dit is nie. Sodat dit nie sin maak om 'n gaping te verlaat vir enigiets anders binnekant van 'n beeld. Jy kan net nie doen nie. En so het die sintaksis sou die algemeen net om slash binnekant doen van die oop tag of die begin tag en dan getref Save. 

So as ek nou herlaai hierdie lêer, nou Ek het hier 'n goeie webblad kook. En ons kon beslis regtig irriteer mense deur die inbedding plaas soos 'n YouTube-skakel. En in die feit, enige tyd jy al ooit gegaan het om YouTube, en laat my eintlik per ongeluk rick roll myself hier. So Rick roll. So rick roll-- ek gaan om hier te gaan. 

[Speel van musiek] 

OK, een persoon het daarvan gehou. So sien al hierdie tyd, as jy Klik op die skakel Deel jy natuurlik kry die URL wat jy kan eintlik embed in 'n e-pos of 'n forensiese beeld of in 'n probleem te stel of in 'n skyfie. En nou, as ek klik plaas op embed, sien dat al hierdie tyd, hierdie dinge is daar. Ek gaan om voort te gaan en 'n afskrif van hierdie. 

En net so kan ons dit beter te sien, ek is gaan om dit te plak in my teks editor. Let daarop dat dit wat YouTube is wat jy vertel. Elke keer as jy 'n besoek YouTube video, as jy wil die video op jou embed webblad, dit net te gryp. So dit is nog 'n HTML tag genoem 'n iframe. Of 'n in lyn raam. So dit lyk 'n bietjie meer te kompleks as al die ander. So dit blyk dat die beeld tag en blykbaar die iframe tag neem wat genoem eienskappe. 

En dit is 'n ander stuk sintaksis in HTML. In bykomend tot die tag se naam, oop bracket tag naam kan jy die gedrag van die tag beheer deur 'n hele klomp van die kenmerk gelyk waarde. Kenmerk gelyk waarde. En so byvoorbeeld YouTube is om ons te vertel as jy wil hê dat die wydte van hierdie video te wees 420 pixels en die hoogte te wees 315 pixels, dis hoe jy dit uit te druk in HTML. 

Die bron van die video gaan om so lank YouTube URL wees en dan 'n paar ander dinge soos raam grens nul is, so wat waarskynlik beteken daar is geen grens rondom die ding. Laat die volle screen waarskynlik beteken dat die gebruiker kan kliek op 'n knoppie en eintlik die volle screen die video. So as ek regtig wil wees indrukwekkende hier in Rick dot HTML, eerder as die gebruik van die beeld tag, laat my dat verwyder, dit in plaas plak. En nou herlaai. En nou hier gaan ons weer. Alle reg, dit is genoeg. Alle reg, sodat ek sal probeer hard om dit nie te weer doen. So, wat is 'n paar van die wegneemetes hier? So HTML, so lelik soos die web bladsye is, is eintlik redelik eenvoudig. Dit is nie 'n programmeertaal. Dit maak nie funksies. Dit maak nie loops het. Dit maak nie toestande. Al wat dit het, is dekades van die verskillende etikette, wat elk nul of meer spesifieke eienskappe. En in die feit, wat is pret oor HTML as jy begin om te duik in is dat dit baie self leerbaar. 

Al wat dit neem is 'n begrip van die algemene raamwerk van HTML. Wat is 'n tag, wat is 'n kenmerk, hoe kan jy eintlik instel 'n webblad soos volg. En alles anders is regtig die resultaat van kyk in 'n aanlyn-verwysing of googlen hoe om sommige doen tegniek of soos ons gesien het, op soek na Facebook se bron kode, kyk na 'n webwerf wat jy wil op sy bron-kode en verstaan ​​hoe die ontwikkelaars daar eintlik gelê dinge uit. 

So kan ons beelde as goed doen. En in die feit, ons het dit 'n oomblik gelede. Laat my gaan voort en net jou wys. Hier is 'n paar voorbeeld kode. As jy ooit wil grumpy kat te sien. So sien dat ek kan 'n beeld tag hier. En ek het 'n opmerking bo dit. Ek het 'n alternatiewe het teks vir toeganklikheid. So iemand wat met behulp van 'n skerm leser vir redes van sig eintlik kan dan hul skerm leser sê grumpy kat. Want as hulle nie kan nie sien die beeld, wat hulle kan ten minste hul rekenaar hulle vertel mondelings wat dit is. En die bron van die lêer is cat.jpeg. So in werklikheid, as ek regtig wou kry slim, wat ek kan hê done-- Ek belowe om nie te gaan na Rick Astley, so Ek gaan google vir 'n kat in plaas. En as ek gaan na Google Images hier, en ons sal aanneem dat dit 'n foto van my kat. 

Veronderstel dat ek beheer gekliek of reg het op hierdie, per ongeluk creepy. En cat.jpeg ek gaan om te bespaar op my lessenaar. Laat my nou gaan terug na wolk 9. Let daarop dat hier, ek kan gaan na die plaaslike lêers te laai. En as ek gryp hierdie lêer, cat.jpeg, kennisgewing dat ek dit kan sleep en gooi dit in die wolk 9 en dit gaan gil op my hier. 

Want ons het reeds gegee 'n cat.jpeg lêer, maar dit is super maklik om te gryp 'n foto wat jy het geneem uit Facebook of Flickr of die wil en eintlik sleep in wolk 9 en dan maak dit deel van jou eie persoonlike webwerf of probleem stel sewe of agt as ons binnekort sal sien. En dan wanneer jy uiteindelik besoek dat die kat, veronderstelling ek afgelaai dieselfde kat, kennisgewing that-- wat adorable. 

Wat jy sal sien, is iets soos hierdie gesig hier. So die lêers wat jy verwysing binne 'n webblad kan óf plaaslike in jou eie wees rekening of remote op 'n ander bediener soos in die geval van die Rick Astley foto 'n bietjie gelede. So waar else-- wat anders kan ons hier doen? So laat ons neem 'n blik op die volgende. Jy weet wat se soort koel? 

Ons het tot dusver maak baie statiese web bladsye. Ek wil dinge soos volg kikker. Ek wil my eie soektog te maak. So 'n soektog te maak, laat gaan voort en begin om dit te doen. Ek gaan om voort te gaan en die skep 'n nuwe lêer genaamd search.html. En ons het prefabed weergawes aanlyn. Oeps. Moenie plak in jou terminale venster. Prefab weergawes aanlyn. En ek gaan om te begin as volg. So hier is die begin van 'n lêer genaamd search.html. Ek gaan om dit te red in vandag se bron gids. Ek gaan om te noem dit Search. Eintlik, sal ons dit beter te maak. CS50 Soek en eintlik merk dit. En nou, ek gaan om te sê iets soos H1 CS50 Search. En dan af hier, H2 kom gou. En net om saam te vat, H1 en H2 onderskeidelik wat? 

Ja, so groot en vet, en nie so groot nie, maar nog steeds vet. So as ek dit red en gaan oor hier, laat ons sien die lêer search.html. Alle reg, en hierdie een is right-- [onhoorbaar]. Staan by. David is verward. O, dit is reg daar. David is 'n idioot. OK. So daar is dit. So CS50 soek binnekort. So nou, laat ons sintetiseer wat ons gedoen het verlede week. 

Waar het ons gepraat oor die laer vlak meganika van HTTP. En hierdie nuwe idees van HTML, wat net hierdie opmaak taal waar jy vertel 'n leser presies wat om te doen en implementeer ons eie soektog. So in plaas van net sê binnekort, ek is gaan stel iets genoem 'n vorm tag. En in hierdie vorm, ek gaan iets soos 'n invoer veld. 

En die naam van hierdie insette gebied, ek gaan om dit te noem Q. En die tipe van hierdie veld insette Ek gaan om te sê is net "teks". En 'n teks veld, soos ons sal sien is net 'n teks boks. En so is dit nie hier sin om enigiets binnekant van dit op hierdie punt. En so is ek net gaan om die tag met die toemaak vorentoe streep reg in die tag self. En dan gaan ek een ander insette. Tipe insette gelyk dien. En dan gaan ek hierdie een ook te sluit. 

En nou gaan ek hier terug te gaan. En al sien ons hoewel mooi lelik, ek het het die begin van die my eie search bladsy hier. In werklikheid, laat ek probeer om skoon dit op 'n bietjie. Dit blyk dat die insette hier, kan ek 'n ander kenmerk genaamd plekhouer. En ek kan iets soos sleutelwoorde, of meer spesifiek, navraag vir q. 

En sien, nou, ek het hierdie soort van grys teks wat verdwyn as Sodra ek begin tik, maar dit is waarskynlik iets jy het gesien in ander webblaaie. Ek hou nie regtig die Submit knoppie. So ek eintlik gaan om die te gee Knoppie Stuur 'n waarde van die soektog. En nou, as ek herlaai, sien dat my knoppie raak vernoem search. Jy weet, ek het nie regtig soos die logo hier. So Google Font generator. 

Ek wil dit verder kikker. So CS50 soek. Laat my my eie logo te skep. Dit lyk mooi. So nou laat my behalwe hierdie as-- kom op. Waar gaan dit? Daar. OK. Het dit gemis. Behalwe soos. Dom blaaiers. Staan, gaan ons Los hierdie eens en vir altyd. Daar gaan ons. Alles reg. Jammer. Afdag. Nou is dit funky. Verlaat vol skerm. Alles reg. 

Nou, soos 'n normale persoon, behalwe beeld as. Logo.gif. Nou gaan ek in CS50IDE en om te gaan Ek gaan net gryp die logo, Ek is van plan om dit te sleep in my bron sewe gids, lêer bestaan ​​reeds, ek is ok met dit. So ek gaan om dit te ignoreer want ek het dit reeds. En nou hoe kry ek ontslae raak van hierdie? 

Kom ons gaan voort en doen hier image source gelyk logo.gif. Sluit hierdie. Red. As ek dan nou terug te gaan na my soek bladsy, nou is dit op soek na mooi goed. Alle reg, sodat dit het nie nogal iets nuttig gedoen. In werklikheid, laat ek probeer soek vir 'n kat en kyk wat gebeur. Katte. Vervloek Dit. Dit is nie net werk nie, blykbaar. So, wat is die sleutel stuk wat ontbreek hier? 

Reg, selfs as jy nie weet nie HTML, Ek het begin merk die telefoon vorm en ek het dit vertel hoe om insette te kry, gee my 'n teks boks en 'n stuur knoppie, wat stuk blykbaar ontbreek? Gestel ons wil eintlik kry hierdie ding korrek werk. Wat moet ons doen? Ons het 'n behoefte om die implementering van die agterkant databasis of die soektog self, en wat gaan om 'n te neem n hele klomp van die tyd, eerlik. 

So onthou wat ons gedoen het die laaste keer. So as jy soek vir iets op Google en jy het vooruit afgeskakel, Onthou, direkte soek. So laat my draai dat af sodat dit werklik optree soos 'n ouer skool leser, as ek nou soek vir iets soos katte, onthou wat die URL lyk. Dit is redelik kripties. Maar ingebed in daar, Onthou, is slash soek. Vraagteken q gelyk katte. 

En dit sou lyk vir my te gee 'n hele klomp van die resultate. Sodat jy weet wat ek gaan doen? Ek gaan om te leen Google net vir 'n minuut. Ek gaan om te gaan oor hier en ek gaan om te sê dat dit vorm aksie of bestemming, so te sê, moet letterlik Google. En die metode wat ek wou gebruik gaan word te kry. 

So, wat is aksie? Aksie uitgesoekte naam, maar wat net beteken wie gaan om te hanteer die optrede van hierdie vorm? As ek op soek waar moet die uitslag gaan? En as ek nou terug te gaan na my vorm hier en herlaai my webblad en nou soek vir iets soos hond, kyk nou Ek het weer geïmplementeer Google. Reg? 

As ek wil om te soek vir iets anders, dit werk vir nie net honde, dit werk ook vir katte. Dit werk ook vir CS50. En OK, dit is net onder oorweldigende, is dit nie? Alle reg, maar dit eintlik werk. So, wat is eintlik aan die gang? So ek het my geleer leser, met behulp van HTML, om insette te neem van die gebruiker en eintlik stuur dat die insette na 'n afgeleë bediener met behulp van HTTP. 

En omdat my browser verstaan ​​HTTP, is dit eintlik bou die URL sodat wat Ek beland oor in my leser, Kyk wat gebeur wanneer ek gesoek vir die hond. As ek op Search, agterkom dat die URL verander soos ek bedoel om google.com/search~~V navraag gelyk hond. En dit is omdat die vorm weet, want die metode te kry, om net voeg dit dat daar URL. 

Nou, hierdie webblaaie is nog lelik. So laat stel een ander stuk sintaksis as ons kan vandag. En dit is iets wat bekend staan as cascading style sheets. So laat my 'n blik op hierdie voorbeeld hier, en kyk as ons kan aflei wat aangaan. Dit is CSS0.html. En dit is hier waar dinge kry 'n bietjie lelik. Omdat ongelukkig in die wêreld van die web, HTML alleen kan nie alles doen nie. En so as jy wil stileer jou webblad, jy eintlik nodig het om te fokus op die estetika in 'n ander manier. So hier, ek het die liggaam van my web bladsy binnekant van wat is 'n groot div. En 'n div beteken net verdeeldheid. So dit is soos 'n paragraaf maar dit nie dieselfde semantiek het van 'n paragraaf van die teks. 

Dit beteken net om die leser, hier kom 'n groot reghoekige gebied van my web bladsy, ek wil dit spesiaal te hanteer. Nou, lyn 21 is waar dat div begin. En net 'n raaiskoot. Wat is die effek van die lyn 21 op die res van die inhoud van die bladsy? Sentreer dit. Dit is al. So ons het nie 'n manier gesien die teks eintlik sentreer. 

In werklikheid, my soektog, In teenstelling met die werklike Google, is al geregverdig oor aan die linkerkant. En so nou in lyn 21, ek sê, hey leser, skep 'n afdeling van die bladsy. Gee my net 'n groot, onsigbare reghoek. Dit is hoe ek wil dink oor die webblad. En stileer dit dan as volg. Binnekant van die aanhalings, nou, is 'n tweede taal wat ons vandag bekendgestel genoem cascading style sheets. Gelukkig, dit is ook nie 'n programmeertaal, so dit is baie beperk in sy sintaksis maar ook baie beperk in sy funksies terwyl HTML is alles oor merk die data van 'n webblad en die struktuur van 'n webblad. CSS is oor die algemeen oor die laaste myl, die estetiese, kry die grootte en die kleur en die plasing presies reg in 'n web bladsy. En inderdaad, dit is gevorm met die sleutel waarde pare. 

A eiendom soos hierdie, teks pas, gevolg deur 'n dubbelpunt, gevolg deur die waarde van die eiendom, wat in hierdie geval is 'n sentrum. En nou sien jy kan nes hierdie dinge. As ek wou alles in daardie Ek het uitgelig word gesentreer, dis hoekom ek lyn 21 en die ooreenstemmende lyn 31. Maar veronderstel nou wil sê John Harvard, welkom om my tuisblad. 

Kopiereg simbool John Harvard. En dink ek wil die eerste van die lyne om mooi groot wees. 36 pixels. So dit is 'n ordentlike grootte. En ek wou sy gewig dapper wees. Maar dan hieronder wat, Ek wil kleiner teks. En onder dit, ek wil selfs kleiner teks. Jammer. Vandag voel soos 'n off dag. 

So nou, wat doen ek om dit uit te druk? Hier op die lyn 22 is 'n ingeboude div of geneste div, as jy wil. Dit het ook sy eie styl tag. Ek gee 'n lettergrootte van 36. Ek het 'n font gewig van vet spesifiseer. Down hier, het ek net spesifiseer 24 pixels. En ten slotte, in ooreenstemming 28, ek spesifiseer 12. So net so 'n vinnige gesonde verstand tjek en as 'n mens dit lees, watter woorde op die skerm is eintlik gaan vet te wees? Watter lyne is eintlik vet? 

Net John Harvard. Reg? Want net soos lyn 22 sê hey leser, hier is 'n afdeling van die bladsy. Maak dit lettergrootte 36 punt. Maak die font gewig vet. Sodra jy by die ooreenstemmende einde tag of geslote tag op die lyn 24, dit beteken, hey leser, ophou doen wat dit ookal is wat jy doen. En kennis om duidelik te wees, selfs al is lyn 22 het al hierdie eienskappe soos styl, wanneer jy sluit die tag in lyn 24, jy net noem die naam van die tag se. 

Jy hoef nie herhaal die woord styl of enigiets wat is binnekant van die aanhalingstekens. En so as ek kyk na dit nou in my browser, laat ons 'n blik op die eindresultaat. Laat my gaan voor hierdie lêer, wat is CSS 0. En dit is nog redelik eenvoudig, maar om redelik interessant. Maar dit blyk daar is ander dinge wat ek kan doen hier, en op die risiko van die maak van hierdie heeltemal afskuwelike, sien hier in my liggaam van my webblad, Ek kan iets snaaks doen soos bg of agtergrond. 

En 'n vinnige, wat is jou gunsteling kleur? Groen ek gehoor het. Alles reg. So nou, as ek herlaai nou, ons het 'n groen webblad. Alle reg, so dit is nie sleg nie. En nou, as ek wil hierdie maak regtig Modern, ek kan die kleur van my teks te maak selfs rooi. So laat ons sien wat dit lyk soos. Nou is dit op soek na mooi goed. En hier sit, as jy regtig wil mors met iemand of as jy wil wees een van daardie mense wat probeer om jou te mislei met die besoek van 'n web bladsy omdat hulle het gekul Google in denke is daar 'n hele klomp van die belangrikste woorde like-- laat ons sien, op te laai. Waar het dit gaan? En daar is dit ons. Alles reg. So ek sê dit as 'n eenkant, sal ons praat oor hierdie dinge in 'n paar weke wanneer ons praat oor sekuriteit, as jy eintlik insluit hele trosse dokumente in 'n web bladsy, selfs al is hulle nie sigbaar vir 'n mens, iemand soos Google, natuurlik, kan steeds eintlik vind. Alle reg, so dit is redelik redelik vinnig afskuwelike. 

En in die feit, dit is nie al dat baie in teenstelling met my eie web bladsy as 'n voorgraadse, wat Ek het begin om uit te vind googlen vorige weergawes van my ou webtuistes. Dit was baie sleg. In werklikheid, het ek een net voor die klas. Maar daar is erger daar buite. Dit was blykbaar my tuisblad terug in 1996. Blykbaar het ek gedink dit was gepas om mense te vra hul naam voordat hulle kon eintlik sien my webblad. 

En dan het ek iets onnosel, waarskynlik. Ek sal meer vir die volgende keer grawe. Maar vir nou, laat ons oorweeg om 'n bietjie van die ontwerp. Ons het gepraat oor die styl. En hierdie bladsy dusver en mees alles wat ek geskryf het is redelik skoon stilisties. Maar wat van die ontwerp? Wel, daar is 'n baie ontslag in wat ek hier doen. 

Ek het genoem dat die woord kleur in 'n paar van die plekke. Ek het genoem lettergrootte in 'n paar plekke en vet in 'n paar plekke. En fundamenteel, ek is mede vermenging twee tale. Ek het met my HTML tags en my eienskappe en dan is almal van 'n skielike, tussen aanhalings, ek het die tweede taal van vandag genoem CSS, wat weer, is net hierdie sleutel waarde pare of hierdie eienskappe geskei deur kommas. 

Dit blyk dat baie soos in C waar ons kan begin om uit faktor sommige kode in kop lêers, so kan ons dieselfde doen in HTML. En 'n stap in die rigting wat is soos volg. Let daarop dat hierdie weergawe, is CSS1.html Struktureel presies dieselfde webblad. So ek het 'n hele klomp het van divs, maar hierdie keer, ek het ontslae geraak van die omslag div soos jy sal sien. 

En ek het die drie divs gegee top, middel, en onder, unieke ID's. Dit is mooi, want deur gee daardie afdelings van die bladsy unieke identifiseerders, Ek kan hulle elders verwys. Waar? Wel, laat ek blaai up. En tot dusver, enige tyd wat ons het gekyk aan die hoof van 'n webblad, wat is die enigste tag ons gehad het die hoof van 'n webblad? 'N bietjie harder. Net die titel tot dusver. Maar dit blyk daar is 'n paar ander dinge jy kan daar sit, een van wat dit genoem 'n styl tag. So 'n oomblik gelede, het ons gekyk 'n kenmerk styl. Blyk daar is 'n styl tag. Dit behoort binne die hoof van 'n webblad. En nou sien wat ek doen. Ek het binne hierdie styl tag die volgende. Ek is letterlik noem op die lyn 20 die naam van 'n tag wat ek wil stileer. 

Dan moet ek oop krullerige brace en gesluit krullerige brace. So soortgelyk in die gees aan C, maar Weereens, dit is nie 'n funksie, dit is net 'n sintaktiese detail hier. En dan natuurlik, ek sê die leser, hey leser, maak die hele liggaam van die bladsy het 'n teks belyning van sentrum. En dan is dit gesê die volgende. Hey leser, as jy sien 'n HTML element of tag in die bladsy wat het 'n unieke identifiseerder van die top, so die hash simbool hier net beteken unieke idee van top, gaan voort en maak sy lettergrootte 36 en sy font gewig vet. 

Hey leser, 'n element waarvan ID is middel, maak dit 24 pixels. En hey leser, as jy sien 'n idee van onder, maak dit 12 pixels. Die effek op die ou end is presies die Sam. As ek gaan in CSS 1, die page lyk dieselfde. Maar ons is 'n stap in die rigting 'n effens beter ontwerp. Laat my nou terug te gaan hier om CSS2 en sien wat anders wat ek gedoen het. 

Nou is die bladsy is regtig, regtig skoon te maak. In werklikheid, kan ek al te pas die inhoud op 'n bladsy hier. Maar wat nuwe tag het ek bekendgestel, natuurlik? Link. En dit is nie die beste naam vir 'n tag, want dit is nie 'n skakel in die sin dat ons dit ken nie, maar dit beteken 'n skakel in 'n ander lêer. Dit is soort van soos skerp sluit in C. 

Dit is die manier HTML om hey leser sê, gaan kry van die inhoud van die lêer genaamd css2.css. Die verhouding, vir my, is dat dit 'n styl neer. En inderdaad, dit is wat die een van die S se cascading style sheets beteken. Dit is 'n stylblad. Dis net die teks lêer met 'n hele klomp van die eiendom. Dit is 'n hele klomp van die style wat jy wil aansoek doen om 'n bladsy. 

En so gaan dit blykbaar is verwys na 'n tweede lêer. En as ek oop dat CSS2.css, sien dat alles wat ek gedoen het is kopieer en plak al van hierdie in die lêer. En nou, selfs as jy nog nooit voordat gekodeerde hierdie dinge, Dink aan die spreekwoordelike ingenieurswese hoed op, waarom is dit 'n beter ontwerp waarskynlik? Factoring uit die CSS eienskappe, om hulle in hul eie lêer. Selfs al het ons hierdie opgelos probleem soos vyf minute gelede in die heel eerste weergawe. 

Ons het nie die verbetering van die bladsy stilisties, dit is net 'n beter ontwerp in 'n sekere sin. Hoekom dink jy? Ja. Meer buigsame hoe? Ja. So as jy wil om te gaan rug en dinge verander, nou, jy het een plek waar jy kan dinge verander. En in die feit, vir iets soos probleem stel sewe waar ons 'n sal implementeer -beurs webwerf, wat gaan om 'n het hele klomp van bladsye. En dit sou werklik irriterende as jy besluit, hm, Ek hou nie regtig 24 pixels, ek wil dit moet wees 28 pixels of effens groter. En dan moet 'n doen globale vind en te vervang of al die lêers van jou webwerf se oop eenvoudig om werklik te verander een waarde. Deur factoring uit hierdie style in een sentrale plek, kan jy nou oop een tekslêer in CS50IDE in 'n program, dit verander, behalwe dit, en gedoen het. Jy het gepropageer diegene veranderinge oral. En dit sou dieselfde wees in 'n dot h lêer as well. So enige vrae dus ver oor hierdie sintaksis? Alle reg, so ons het gedoen alles wat dit lyk behalwe eintlik implementeer hiperskakels. En so laat ons gaan voort en doen dit. Laat my gaan voort en skep 'n nuwe lêer hier. Ek gaan om dit te noem link.html, sit in vandag se kode. 

En ek gaan oop om te doen bracket tipe doc html. As 'n eenkant, hierdie ding by die top, hierdie dokument tipe verklaring dit is die enigste een wat vreemd met die uitroepteken. Jy moet net om dit daar te doen en dit beteken dat ons met behulp van HTML-weergawe 5. Ouer weergawes van taal baie langer moes snare wat jy nodig het om daar te sit. So hier is 'n voorbeeld genoem skakel. 

Ek het 'n liggaam van my webblad hier. En hier, 'n href gelykes Kom ons sê HTTP://www.disney.com en my gunsteling webwerf, sal ons sê. Alle reg, sodat 'n baie onskadelike, use bladsy. As ek nou gaan in my gids lys hier en maak link.html, ons het hiper teks. 

En inderdaad, dit is waar die H in HTTP vandaan kom. Hypertext Transfer Protocol is oor die oordrag teks wat skakels na ander hulpbronne. En inderdaad, hier is die bekende, As retro, blou skakel dat as gekliek, sal eintlik lei my Disney.com. Nou, o, wat kom uit gou. Alle reg, sodat nou, wat is 'n paar van die implikasies van hierdie? 

En eerlik, die wêreld begin om 'n bietjie meer vertroud te kry en ook 'n bietjie vreesaanjaend maar ook 'n bietjie meer self te verdedig sodra jy begin om hierdie dinge te verstaan. Omdat die kans is, sommige van julle, as jy gaan deur jou Gmail spam gids of selfs jou posbus, jy het waarskynlik gekry 'n soort van e-pos dit is wat vra dat jy verander jou wagwoord dalk of dalk verifieer jou PayPal geloofsbriewe of iets anders. 

En in die feit, kan jy ontvang iets wat sê soos, kliek hier om jou PayPal wagwoord te herstel. En nou, kennisgewing, indien dit is nie Disney.com maar soos badplace.com en herlaai, daarop te let dat die teks hier kon niks hoegenaamd te sê. En in die feit, dit is net woorde. Hoekom het ek nie eintlik super kwaadwillige en sê http://www.paypal.com. 

Klik hier weer jou PayPal wagwoord en nou herlaai. Dit lyk mooi wettige, reg? Ek bedoel, ek sou nie klik op n e-pos wat net sê dit. Maar kennis van die digotomie hier. Dit sê www.paypal.com, en in die feit, wag 'n minuut, ons weet wat jy wil die s vir veiligheid. So nou, gaan na www.paypal.com HTTPS, maar as jy dit nog nooit tevore gedoen het, doen kry in die gewoonte hang oor bietjie links hier. En dit is moeilik om te sien op die skerm is daar, en dit is hier nie al wat makliker. Maar pad af hier in die klein hoekie doen die leser eintlik julle wat ons gaan vertel om badplace.com plaas van Paypal.com. Nou, waar gaan ons met hierdie? Al die voorbeelde wat ons vandag gedoen het, ons het hard gekodeer en die hand getik. Die web is ongelooflik oninteressant wanneer jy hard kodeer jou webblaaie so dat die inhoud is staties en nooit verander. Natuurlik, almal van ons gunsteling webwerwe vandag of dit nou Gmail of Twitter of Facebook of enige aantal ander dinamies. Hulle is die verandering in reaksie op die gebruiker se toevoer net soos die Google soek resultate. 

En so op Woensdag, wat ons doen, is laat ons HTML en CSS bekendstelling agter ons en ons neem vanselfsprekend dat ons nou weet dit en ons stel 'n nuwe programmeertaal genoem PHP, wat graag C, gaan ons te gee die krag om werklik te skep programme wat hulself genereer uitset. In hierdie geval, sal ons gebruik PHP dinamiese web te genereer bladsye met hierdie nuwe taal. Sodat meer op daardie Woensdag. Sien jou dan. 

[Speel van musiek]