[Muusika mängib] 

DAVID J Humala: See on CS50 ja see on algus nädal 7. Nii tere tulemast tagasi. Ja te võite meelde tuletada, et probleemide seatud neli, seal oli natuke tänavapühkija hunt mõned vapustav auhindu, mille pärast tagasi fotod personali nii siin kui New Haven, sa nakatati leida nii palju need arvuti teadlased kui võiks. Ja meil on kogu kamp sõlmimiseks. Mõtlesin, et ma jagan mõned teiega täna siin. 

Ja me postiga kõiki neid online. Aga eelkõige tahtsin juhtida teie tähelepanu mina-- ka üks, Sam oli nii mõnelgi neist Üldiselt tekitavad niimoodi. Aga selgub, et alates Täna hommikul võitja oli teatud keegi nimega Ken koos 24 personali püütud kaamera või mõne rohkem kui võetakse moodustavad mitu personali pilte. Pildil on Ken järgmine Mary on New Haven. 

Nüüd, Ken, aga muutub välja on natuke nurgas juhul mis ei ole veel juhtunud varem. Selgub, et see ei toimunud mulle panna trahvi print probleem seatud neli, mis ütleb, et töötajad on jaoks kõlbmatuks vapustav auhindu sest Ken on muidugi üks fotograafid meie töötajad. Nüüd, et ütles, et ta Algselt kirjutas mulle öelda Palun ärge postitage neid fotosid. Ma arvan, et suur osa sest enamik pilte et see fotograaf võttis otsima natuke midagi sellist. Jms. 

Aga Ken tahaks mind veenda teid et ta on väga hea fotograaf, Ta on professionaalne, ta võtab pildid, mis ei ole udune, mis on parem keskenduda, ja ta võttis üsna vähe meie enda töötajad. Aga mitte ainult tunnistama Ken, mida me arvasime me tahaks teha on läbida nimekiri tegelik õpilased, kes esitasid. Ja selgub, et Lance koos 15 fotot tänase hommiku seisuga oli meie võitja. 

Ja pildil on Lance koos Colton, koos Skaz, mina ja Sam. Aga siis selgub, et alates 11:46, nii et natuke tagasi, Ma läksin tagasi oma email ja leitud et meil oli veel üks esitamine Õpilase poolt nimega Bonnie kelle e-posti ütles ainult seda. Ei kavatse valetada, ma olen Seejuures ajal klassis. Ja siis asus lisada ainult 14 fotot, üks häbelik Lance on 15. 

Aga Bonnie fotod, selgub välja oli mitu töötajat, Sam nende seas, nii me arvasime me teeks on tunnustada mõlemat. Nii et lisaks saada Dropbox ruumi, et igaüks, kes osales saab need kaks lõigud ka saada kena süüa lõunat neid ja nende osa koertega tuleval nädalal. Ja siis anname endast teada, Lance ja Bonnie, sellest. Nii suur Õnnitlused neile. Nüüd neile, kes nagu lõuna- üldisemalt tean, et CS50 lõunat Cambridge ja New Haven on sel reedel. Mine CS50 veebilehte kaldkriipsuga RSVP. Ja nüüd sõna seminare. Rohkem curricularly. Nii et me lähenemas punkti semestri kus sa peaks algama mõtled lõplik projekte. Ja tegelikult, vaid natuke, eks nn pre ettepanekuid maksta. Nii pre ettepanekud on mõeldud päris väike mõju ja tegelikult lihtsalt võimalus teil koostada lühike ülevaade õpetust mehe üles teavitama teda mida sa mõtled sina Võiksid teha oma lõplik projekt. 

Nüüd on paljud õpilased lõpuks teeme veebipõhine lõplik projekte. Ja muidugi, me oleme lihtsalt nüüd viimase nädala selle ja pärast sukeldumist veebi programmeerimine. Nii ei pea muretsema, kui sa ei ole absoluutselt aimugi, kuidas siis oleks ehitada ideed sa võisid meelt. See on tõesti ainult sundides funktsiooni saada sa mõtled ja räägid Teie TF midagi. Aga mis aitavad teil selle, ja lõplikud projektid lõpuks tean, et CS50 on traditsioon pakkuda seminare. 

Ja need on vabatahtlik, käed, või loengu põhineb võimalused rohkem teada teemad, mis on väike kõrvaltegevus kursuse ainekava, kuid siiski imeline materjali sõita lõplik projekte. Ja nii see on nimekiri, mis on CS50 töötajad siin New Haven on tulla ette Sel aastal umbes iOS programmeerimine, Android programmeerimine, mängu areng, ja kobarad rohkem vahendeid ja keelte ja tehnikaid. 

Nii et hoidke silm peal CS50 veebisaidil. Ja vahepeal, kui soovite registreerige oma huvi mõni neist, minna CS50 on kaldkriipsuga register. Ja me siis jälgida selle kohta, päeva ja lennuaegade ja kohad ja everything-- kõige kõik saab striimitakse ja ka nõudmise pärast, kui sa ei saa tegelikult teha. Nii ilma pikema jututa, me jäi viimase aja saad. 

Ja see oli nagu sõnum, mis oli sees virtuaalne ümbrik, mäletate, et me möödunud ruuter ruuter ruuteri vahel veebilehitseja ja veebi server. Ja et sõnum tundus natuke midagi sellist. See oli rohkem kauge sõnum, et Tegelikult oli sees ümbrik kirjutatud paberile, kelle Esimene rida ütleb sõna-sõnalt, saada kaldkriipsuga. 

Ja nii nagu meelerahu kontrolli, mida ei kaldkriipsuga tähistavad? Mida kaldkriipsuga mõtlen, kui taotlev veebileht? Sa nõuda seda kogu aeg. Enamik iga kord, kui külastada veebilehte, siis tegelikult ei kirjuta faili nimi. Sa ilmselt lihtsalt minema Facebook.com, siseneda, gmail.com, vms. Ja mida kaldkriipsuga esindavad? Mis faili? Või mis lehel, täpsemalt? 

Indeks, yeah. Nii vaikimisi lehel. Nii et kui sa ei määra fail nime me hakkame nägema, sa oled tegelikult lihtsalt paludes anna mulle default lehel Facebook või anna mulle minu postkasti või anda minu vaikimisi lehe uudised CNN kodulehel vms. Ja server siis reageerib et sõnum midagi niimoodi, öeldes jah, ma rääkida HTTP versioon 1.1. 

200, mis on status kood, mis me inimesed harva kunagi näha, sest see on hea. Sest see tähendab, OK, taotluse sai ja käideldud nõuetekohaselt. Ja sisutüüpi ilmselt vastus On üsna tihti, kuid mitte alati, teksti. Ja just, HTML. Ja see on tegelikult kus me vaatame täna. 

Nii et tegelikult ma lähen edasi ja avada brauseri. Ma lähen kasutada Chrome, mida saab kasutada Kõige tahes brauseri lähinädalatel. Soovitame tavaliselt Chrome sest see on eriti hea tarkvaraarendajatele. See ju palju ehitatud vahendid, mis lihtsustavad arendada mitte ainult HTML ja CSS, asju hakkame täna räägime, vaid ka teistes keeltes samuti. 

Ja ma lähen edasi minna ja minna mina-- Ma lähen juhtimine Kliki või paremal kliki kusagil veebilehel. Ja ma lähen kontrollida Element. Ja ma lähen näpistama minu ekraan natuke siin. Lubage mul liikuda selle põhja. Nii et see on see, mida nimetatakse Chrome'i inspektor. Nii et see on nagu silumine näitaja ehitatud Chrome. 

Kõik te juba seda Kui olete kasutanud Chrome. Ja siis saab näha, mis toimub kohta all kapuuts mõned veebilehele. Nii saab tegelikult võtta vaata seda järgmiselt. See on viis rohkem funktsioone ja me hoolime täna. Aga seal on neid kaarte siin. Elemendid, võrgu, allikad, ajakava ja mõned muud kraami. Ma lähen klikkima Võrk hetkeks. 

Ja see on natuke suur Esmapilgul siin. Aga mida ma lähen tegema, on lasta mulle lihtsustada seda natuke. Ma lähen sisse lülitada Salvestamise valgust, nii et see on punane. Ja ma ütlen säilitada samamoodi. Ja see on vaid väike asi, mida ma arvasin aja jooksul, mis läheb säästa kõik, mis juhtub brauseris. Ja nüüd ma lähen to http://facebook.com. 

Tegelikult teeme www hea meede, kaldkriips. Sisesta. Nii URL, et paljud võite käinud. Ja nüüd Facebook veebi lk kerkib tipus. Ja siis terve hunnik kraam lendas allosas. Ja tegelikult, selgub, et kui sa külastad Facebook.com, sa ei ole lihtsalt teha üks HTTP taotlust, Selgub, et läheb Facebook.com saadab 41 neist ümbrikud, igaühel on oma get taotluse, märgitud, kuigi taga ekraanil Siin allosas ekraani, see näitab, et tõepoolest, mu brauser tegi 41 taotlustest. 

Ja kogu see üle 861 kilobaiti ja see võttis miskipärast tervelt kaheksa sekundit alla laadida kõike seda. Nii et tegelikult natuke imelik et Facebook saidi võtaks selle pikk, kuid nii on see ka käesoleval juhul. Nüüd on see kõik ma tõesti ei hooli umbes välja arvatud tipmine taotluse. Nii lähme selle ühe siin ja lubage mul suumimiseks hetkeks. 

Ja las ma suumida seda. Mida ma olen teinud on jäänud, kuigi seal on palju toimub siin on mul esile Facebook.com ja seejärel märgata, et ma alla kerimine, allakerimine, kerimine alla nõuda päised. Ja te näete, et Chrome näitab mulle sisuliselt sisemine sisu taotluse tegin. See ei ole vorming päris sama Muide, kuid teate, seal on mainitud saada, märkate seal mainitud peremehe Facebook.com, tee või kaldkriipsuga mis on fail palusin. 

Ja siis, kui ma liikuda varundada, siis me tegelikult näha, et mida Facebook tagasi mulle on kõik need pealkirjad. Nii sees, et virtuaalne ümbrik tõepoolest on palju põhiväärtus paari. Sõna, koolon ja seejärel väärtus. Sõna, koolon ja väärtus. Neid nimetatakse päised. Ja seal on viis siin täpsemalt kui me tegelikult hoolivad kohe. 

Aga see on teine viimane sinna, märkate, et Facebook.com serverisse, tõepoolest ütles siin on mingi tekst HTML. Nii see kõik tähendab et kui sa taotleda web lehe brauseri kuni server, et server vastab ümbrisglükoproteiiniga oma mille sees on tekstis. Teisisõnu, HTML. HyperText Markup Language. Milline on teine ​​keel et tutvustame täna et inimestele või arvutite genereerida et rakendada veebilehti. 

Täpsemalt vaatame seda. Ma lähen nüüd tagasi minna Facebooki kodulehel. Ja ma lähen lihtsalt kontrolli kliki või paremklõps ja kliki View Page Source. Ja isegi kui sa ei kasuta Chrome, IE ei tee seda, Firefox seda teha, Safari seda teha, kuigi menüü võimalused võivad pisut erineda. Ja see on HTML, et Mark ja Ettevõte Facebookis on kirjutatud. 

Ja ühiselt, selles keeles siin rakendab sinine ja valge leht me nägime hetk tagasi. Nüüd on see veidi suur. Aga kui me vaatame üles ülaosas vasakul, me oleme kavatsen alustada, et näha mõned mustrid. Tundub, seal on palju Nende avatud nurksulu ja siis seal on see märksõna HTML. Siin on veel lahtine nurksulu ja head. 

Siin on, kui me keri ja alla ja alla, ma olen läheb edasi minna ja proovida otsida midagi. Seal viis üle paremale Siin on avatud sulg keha. Ja mäletate viimast aega, et tegime ettepaneku et lihtsam veebileht et inimene võib kirjutada näeb ehk midagi sellist. Avatud HTML tag avatud juht tag, avatud pealkiri tag, Seejärel suletakse pealkiri, suletud peas, avatud body, mingi tekst, suletud keha, Suletud HTML. 

Aga paus siin hetkeks. See kood, isegi kui olete kunagi kirjutatud enne kuid siiski ei saa päris hästi aru mis toimub, tundub päris hea. Õigus, see on väga puhas. See on väga stiililiselt kena. Palju taandus ja valge ruum. Facebook ei ole. Miks on Facebook nii palju hullem kui ma kirjutamiseks HTML? Ilmselt. 

Õigus, see on nagu üks viiest stiili. Seal on mõjuv põhjus neil lõigatakse need nurkades. Kõik õige, et nad ei taha oleks lihtsam lugeda. Nii mõnes mõttes, et nad on obfuscating see, omamoodi skrambleerimisbittide see vähemalt esteetiliselt nii et see on raskem Myspace minna ja šantažeerima oma Avaleheks ja HTML ta. Tuleb välja, et programmid kuigi, sealhulgas Chrome, saame puhastada see üles super lihtsalt. Nii see ei ole päris nii, nagu põhjust. Mis veel võiks olla põhjuseks. Jah. Jah, valge ruumi kulude andmed. Mida sa silmas pead? Jah, täpselt. Kui vajutad klahvi Tab palju või tühikut, arvesse mõju. Nii et iga klahvi on [Kuuldamatu] esindatud ühe baidi. 

Nii oletame, et Mark või mõne devs nendel päevadel tabab tühiku ainult üks kord Selles HTML lehekülge esindab Facebook kodulehte. Ja Facebook on palju kasutajate nendel päevadel. Nii oletame, et Facebook kodulehte külastab miljard inimest täna. Ja keegi Facebook on vajuta tühikut, vaid üks kord. 

Nii veel üks bait, miljardi taotlusi, kui palju andmeid on Facebook kandes üle interneti sest keegi tabas tühikut oma klaviatuuri? Miljard baiti, või üks gigabait andmed on saadetud Facebook serverid inimesed ümber maailma mingit põhjust. Nüüd, see on lihtsalt üks ruum. 

Kujutage ette, kui me tegelikult puhastamiseks asi üles ja liigestatud ta ja lisas, palju tühja ruumi ja tab ja tühikute, sa lõpuks kulutusi gigabaiti, kui mitte terra baiti rohkem ruumi. Ja nii super levinud reaalse maailmaga veebi arengut on alahindama oma koodi. Ja me lõpuks näha kuidas sa võiksid seda teha. 

Aga täna, me kirjutame koodi see on tegelikult loetav meile inimestele. Selgub aga, kui sa lähed tagasi Selle tööriista Chrome Kontrollige Element, Varem olime Network alt. Tuleb välja, et kui te lähete elemendid tab, mida sa tegelikult näha on Chrome'i päris trükitud versioon sama HTML. Nii oleme deobfuscated ta. Nii et see on ei sobi arvuti. Ja nüüd saab tegelikult kliki ümber ja alustada näha hierarhiat, mis on veebilehel. Nii saab tegelikult teha. Ma lähen edasi minna ja avada edasi minu Mac programm nimega teksti muuta. Ja meenutada, et see on lihtsalt super lihtne tekst programm. Windows on notepad.exe. Ja ma sõna-sõnalt tippige järgmine. Doc tüübist HTML, avatud sulg HTML, suletud sulg HTML, meil peas leht siin, lõpus juht leht siin, pealkiri on nagu, tere. 

Ja siis siin peame keha veebilehel. Suletud keha. Ja siis siin, tere. Hästi. Nii oleme kirjutanud super kiire veebilehel. Ma lähen salvestage see hello.html minu töölaual. Minu Mac läheb kurdavad, mõtlesin, et oodake minut, see on tekstifail, teha soovite seda kutsuda txt? Aga ei, ma tahan kasutada dot HTML. 

Ja mis siis on tore, kui ma lihtsalt topeltklõps faili, hello.html, siin on minu veebilehele. Kahjuks olen ainus inimene maailmas kes ei külasta seda lehekülge kohe. Sest kus ta elab ilmselt? See on minu Mac, eks? Milline on kasutu. Nagu keegi siin ruumis rääkimata internetis võib tegelikult külastada seda lehekülge. Nii et täna peame tutvustada teise element. 

Ja teha seda, ma lähen minna ja avada pilv 9. Nii pilve 9 on muidugi pilv põhinev service-- CS50 IDE-- See on kõik meie tööruumid töötab kusagil internetis. Ja see tähendab, et kõik meie faile on avalikkusele kättesaadav juba. Nii saab minna ja teha seda. Ma lähen edasi minna ja Uue faili NCS50IDE. Ma lähen salvestage see enne kui hello.html ja klõpsake päästa. Ja nüüd lihtsalt säästa aega, ma lähen minna ja kopeerida kleebi see kood mitte korrake seda. Ja see salvestada. Ja nii nüüd on mul fail nimega hello.html. Aga kuidas ma tegelikult avada seda veebilehte? Noh, selgub ehitatud, et CS50 IDE ei ole ainult koostaja nagu rõkkama ja siluri nagu GDB ja kobarad teisi programme, seal on tegelikult küps veebiserver töötab jooksul CS50 IDE. 

Kõik te, see tähendab, on oma veebiserver. Ja veebiserver on lihtsalt tükk tarkvara, mille eesmärk elus on teenida kuni veebilehti. Kuulata taotlusi brauserid ja vastata vähe virtuaalne ümbrikud mille sees on sisu, mis olen kirjutanud. Nii et see veebiserver on tegelikult tasuta ja avatud lähtekoodiga. Kui avatud lähtekoodiga tähendab lihtsalt tarkvara, et keegi teine ​​on kirjutatud, et kõik meist ei saa tegelikult näha ja alla laadida ning isegi muuta lähtekoodi. Ja seda nimetatakse Apache. 

Ja me oleme teinud natuke lihtsam kasutada CS50IDE nimetades seda Apache 50. Nii et see võib tegelikult mõista järgmine. Ma ütlen Apache 50 algus. Ja siis ma lihtsalt ütlen dot. Ja me näeme mõned mõnevõrra kauge sõnum milles Apache dokumendis [? rühmas?] koju, ubuntu, mis iganes see on, kaldkriips tööruumi. Alates veebiserver Apache 2 edukalt. 

Nii pikk lugu lühike, ma just surutakse nupp ja välja veebiserver, kes on nüüd kuulata internetis TCP port 80 kindlal aadressil. Ja ta ütleb siin, ja see muutub Based Teie kasutajanimi ja muid tegureid, aga märkate nüüd, kui ma vajutan seda, IDE50 dot jharvard ja nii ja nii, märkate, et kõik see aeg mitmendat nädalat, siis võib-olla märkasin, et oma kasutajanimi on põimitud üleval paremal nurgas CS50IDE. 

Ja et tegelikult on see kõik ajalt aadress, mille kaudu saab külastada kõiki oma faile veebi kaudu. Seni ei ole Olulised, sest C, siis üldiselt tahad asju kulgeb terminal, mitte netis. Aga täna, hakkame kirjalikult veebipõhine koodi et me tahame kättesaadav avalik URL. Mis ma lähen tegema, on klõpsa selle URL. 

Ja teate, mis ma näen üsna kole indeks, firmaregistris, aga mis faili hüppab välja siis ilmselt? Hello.html. Seda sellepärast, et ma päästsin faili minu tööruumi. Ja mida ma olen öelnud, Apache veebiserver on vaadata Davidi tööruumi kataloogi. Ja las keegi maailma näha neid faile. 

Ja tõepoolest, kui ma nüüd kliki hello.html, Ma näen selles tab täpselt, et failist. Nüüd märkate, pilved 9 teeb midagi veidi kasulik meile. Jooksul CS50 IDE, märkate seal äkki aadressiribale. Seda sellepärast, et kuigi me oleme kasutades Chrome külastada CS50IDE, sees CS50IDE on oma versioon veebilehitsejat kohe. Ja nii mitte keeruliseks asju sellistena, Ma lähen edasi minna ja lihtsalt kopeeri see URL. Ma lähen edasi minna ja lihtsalt avada oma Chrome aknast. Seega puudub magic siin ei CS50IDE. Ma lihtsalt sõna otseses mõttes kleebi minu J Harvard URL ja vajuta Enter. Ja voila, nüüd ma ja teoreetiliselt kõik Internetis, kui olen seadistatud vastavad õigused, saab külastada seda pilti. Ja nii nüüd, kui ma ütlesin hello.html, voila, seal Mul on väga underwhelming veebilehel. Nii teeme kiire meelerahu kontrolli. Kuna kõik see on kontseptuaalne loodud. Ja me oleme tegelikult ei ole tõesti õpetatakse, kuidas kirjutada HTML per se. Kõik küsimused seni mida see lihtsalt juhtus? Jah. Kas CS50 ise neid veebilehti? Mis mõttes? Hea küsimus. Nii CS50 on omab CS50.io. Me oleme tõepoolest ostis, et domeeninimi. Ja loomult kutid logige CS50IDE, te kõik saada, mida nimetatakse alamdomeen. 

Nii IDE50-Humala või IDE50-Rob.CS50.io, mis on sinu sees unikaalne aadress Meie domeeninime. Nii eesmärgil käigus, teil on oma unikaalne aadress. Aga me oleme lihtsustatud asju osta tippdomeeni, CS50 dot I / O ja siis kõik teised on sees, et nii-öelda. Ja me tuleme tagasi, et paari nädala arvatavasti eriti lõplik projekt aega, kui mõned teist Võiksid saada oma domeeninime. See on tegelikult suhteliselt lihtne. Hästi. Nii saab nüüd teha. Ma lähen tagasi CS50IDE, kus mu faili kohe, hello.html, ei ole nii huvitav. Sooviksin teha midagi veidi kenamaks kui see. Nii et ma teen midagi sellist. Lubage mul avatud paragraphs.html. Nii et see on faili kirjutasin eelnevalt. Ülaosas see, nagu Alati on meil kommentaarid. Aga HTML, kommentaarid pisut erineda. On line kolm ja joon 14, siis vaata süntaks alustatakse kommentaari ja lõpuks kommentaari. 

Aga ükski kraami vahel küsimustes funktsionaalselt. See on lihtsalt märkme inimese, mis toimub siin. Ja nagu kiire meelerahu vaadake, kui ma keri, Milline on ilmne uusi tag, et oleme kasutusele? Tags seni oleme näinud on avatud sulg HTML juht, pealkiri ja keha. Aga mis on ilmselt uue nüüd? 

Jah, nii p. P tag või lõikes tag. Ja siis ma lihtsalt laenatud default Ladina teksti moodustavad minu punktid. Sest see, mis ma tahtsin näidata, kuidas te võite esindavad paragrahvi teksti HTML. Ja mis on hakanud juhtuma siin on see, et seal on juba muster arendada. Ja lubage mul minna ja teha seda. Lubage mul kõigepealt välja lülitada Apache. Ja ma ütlen, et alustada ise jälle sees tänapäeva allikas seitse m kataloogi. Nii et mul on juurdepääs kõike. 

Ja nüüd, kui ma lähen tagasi Selle kataloogi sisu, märka ma näen iga faili täna. Ja te näete, et Järgmine probleem komplekti, siis me teile juhiseid teeme just seda. Kui ma avan paragraphs.html, võib see samuti välja nagu programmeerimiskeelt kui sa ei räägi või lugeda ladina keeles. Aga see on vaid kolm lõiku teksti, mis on märgistatud HTML. 

Ja märka lõikes vaheaegadega. Kuna selgub, ja kuigi sa olla valmis selleks, samas reaalses maailmas, kui sa tahad panna line pause vahel asju, Sa võid lihtsalt Selleks tabas Save. Ja nüüd, kui ma uuesti siin, teate et kõik lihtsalt hägustab kokku vaid üks kämp teksti. Kuna HTML on selline loll keeles. 

See on mõeldud kasutamiseks selliste nii, et brauser ainult teha selgelt, mida sa öelda tahad. Nii et kui sa ei ütle seda anna mulle uus lõige, sa ei kavatse näha uus lõige. Ja tegelikult, mida brauseri tegema hakkab isegi kui sa Enter, oletame uuesti ja uuesti ja jälle liigub see tekst teed Ekraanil väheneb ja seejärel salvestada ja pange brauser läheb ahendada kõik, et valge ruumi arvesse vaid ühe nähtav tühik. Hästi. Nii et lõikes tag. Ja mis siis on muster mis areneb siin? Noh, see tundub olevat nii, et HTML on kõike alustades tag ja lõpetades tag. Ja mis on silt? Noh, see on lihtsalt patakas süntaks. Avatud sulg, märksõna, suletud sulg, on tag. Või alustada tag. Ja siis, kui sa oled teinud väljendada ennast, kui sa oled teinud lõikes, sa nii rääkida vastupidist. Aga vastupidine ei ole päris tahapoole. 

Sa lihtsalt eesliide sama sildi nimi kaldkriipsuga niimoodi. Hästi. Nii ei ole sugugi nii põnev. Ja tegelikult, me ei tee web kõik, et huvitavam. Mis siis, kui ma tahan teha asjad suuremaks ja julge? Nii selgub, et siin on näide in headings.html, kus mu keha, Mul on H1 tag, H2, H3, nelja, viie või kuue, mis kõik tunduda üsna kauge. Aga kui ma lähen avada Näiteks võtame pilk. Headings.html. 

Nii brauserid vaikimisi teile anda teksti see on suur ja julge erinevad suurused. H1 on suur. H6 on väiksem ja seejärel kõik muu vahel. Nii et huvitav, kuid siiski ei ole tõesti web ma tean. Mis siis, kui me tahame, et mul on midagi nimekirja. . Nii et siin on täppidega nimekirja kolm Harvardi maju. 

Kuidas sa minna seda teed? Noh, kui heita pilk list.html. Ja siin me näeme natuke funkiness kuid Vaatleme, mis toimub. Nii selle põhjal, mida sa oled näinud, UL tähistab järjestamata nimekirja. Tavalise nimekirja tähendab lihtsalt täppidega. Pole numbrid. Seal on ka midagi, mida nimetatakse järjestuses, mis on OL kell tag. Siis LI, loendiüksusele on kõik see tähendab. 

Ja nii see automaatselt numbrid kõike teile. Aga jälle, kõik mu taandus ja valge ruum on lihtsalt minu pärast. Brauser ei ole tegelikult läheb huvita. Nii et isegi kui sa ei saanud Selleks, lihtsalt olla kindel, siis ei tohiks kuigi Brauseri ikkagi aru saama, et just fine. Ma lööb reload oma brauser, ma klikkides reload ja ei muutu toimub sest brauser veel teeb täpselt seda, mida ma ütlen seda teha. 

Hästi. Nii et see kõik on lihtsalt teksti. Nüüd teeme midagi huvitavat. Ma lähen edasi minna ja laenata seda HTML. Ma lähen edasi minna ja luua uus pilt siin. Ja me nimetame seda rick.html. Meil on ebaproportsionaalselt Kasutatud midagi nimetatakse rick roll selles klassi sel aastal, ma ei tea, see lihtsalt juhtus orgaaniliselt. 

Ja nüüd on see väljusid kontrolli alt. Nii et ma lähen lihtsalt minna sellega. Ja kui ma lähen Google Pildid ja Rick Astley. Kui sa ei tea, miks me seda teeme see lihtsalt lugeda üles Wikipedia. Iga kord, kui olete klikkinud lingile, keegi naernud kusagil. Ja lase mul minna ahead-- seal me läheme, olgem näha seda pilti. 

Nii et siin on meil image Google Images. Ja Oletame, et see on mõistlikult kõikjal internetis. Nii et ma lähen eeldada, et see on OK minu jaoks tegelikult panna see minu veebilehele. Ma lähen edasi minna ja kopeerida URL. Ja nüüd, kui ma lähen tagasi Cloud 9, vaatame, mis teha siin. Nii et siin on lihtsalt veebilehele. See on Rick Astley, haha, Ma lähen nüüd tagasi minna minu brauser, reload, ja huvitav. 

Kus on Rick? Nii et lubage mul vaadata, mis juhtus. Tegelikult, ma lähen teeselda nagu ma ei teinud seda. [Kuuldamatu] pani ta siin. Me tuleme tagasi, et ühel hetkel. Nii et siin on rick.html. Nii et see ei Rick Astley. Nii selgub saame tegelikult lisada teda siin. See on Rick Astley. Ma ütlen mulle pildi, kelle allikas on URL ma lihtsalt kopeerida, mille Ilmselt on õnnelik sünnipäeva või millegi muu. 

Ja nüüd ma lähen sulgeda tag niimoodi. Nii et see on ümbriste super pikk. Aga teate, et ma olen teha on avatud sulg pilti, allikas atribuut seda. Ja see on tõesti pikk URL. Ja päris lõpus, märka seda. Miks ma olen teinud kaldkriipsuga angled sulg selle asemel, nagu iga teine ​​silt, võttes avatud sulg, IMG suletud sulg? Võtke vist isegi siis, kui ei ole harjunud üldse HTML varem. 

Nii see on, kuidas see sulgub käsu, kuid miks see ei ole tõesti intuitiivne mõtet teha midagi veidi lobise nagu tihe pilti? Jah. Jah. Just semantiliselt, ei ole mõttes alates pilti ja lõpetades pilt, see kas on või seda ei ole. Seega ei ole mõtet jätta lõhe midagi muud sees pilt. Sa lihtsalt ei saa seda teha. Ja nii süntaks korral oleks lihtsalt teha kaldkriipsuga sees Avatud tag või algusmärgendi ja siis vajuta Save. 

Nii et kui ma nüüd uuesti selle faili, nüüd Mul on hea veebilehe toiduvalmistamise siin. Ja me võiksime kindlasti tõesti tüütama inimesi kinnistades asemel nagu YouTube link. Ja tegelikult, ükskõik millal olete kunagi läinud YouTube, ja las ma tegelikult kogemata Rick rulli ennast siin. Nii Rick roll. Nii Rick roll-- ma lähen siin. 

[Muusika mängib] 

OK, üks inimene meeldis seda. Nii märkate kõik see aeg, kui te kliki Share link, siis muidugi saada URL, et saate tegelikult kinnistada talle või kohtuekspertiisi pilt või probleem esitatud või slaidi. Ja nüüd, kui ma selle asemel klõpsata embed, märgata, et kogu see aeg, seda kraami on olemas. Ma lähen edasi minna ja kopeeri see. 

Ja just nii me näeme seda parem, ma olen läheb kleepige see oma tekstiredaktoris. Pange tähele, et see, mida YouTube on teile rääkinud. Iga kord, kui külastada YouTube video, kui te soovite embed video oma Veebilehe lihtsalt rüütama see. Nii et see on järjekordne HTML sildi iframe. Või on raamiks. Seega liiga paistab pisut rohkem keerulisem kui kõik teised. Nii selgub, et pilti tag ja ilmselt iframe tag võtta nn atribuudid. 

Ja see on veel üks tükk süntaks HTML. Lisaks sildi nimi, avatud sulg sildi nimi saate kontrollida käitumist tag võttes terve hunnik atribuut võrdub väärtusega. Oskus võrdne väärtus. Ja nii näiteks YouTube on meile Kui soovite laiusega video olema 420 pikslit ja kõrgus olla 315 pikslit, mis on kuidas väljendada seda HTML. 

Allikas video läheb olla nii kaua YouTube URL ja siis mõned muud kraami nagu Raami on null, nii et ilmselt tähendab seal no raami asi. Laske täisekraanil ilmselt tähendab, et kasutaja võib klõpsata nuppu ja tegelikult täisekraanil video. Nii et kui ma tõesti tahan olla muljetavaldav siin Rick dot HTML, mitte kasutada pildi tag, las minu kustutada, et mitte kleepida. Ja nüüd uuesti. Ja nüüd siin me läheme uuesti. Olgu, see on piisavalt. Kõik õige, ma püüan raske mitte teha seda uuesti. Millised on mõned takeaways siin? Nii HTML, nii kole kui neid veebilehti on, on tegelikult üsna lihtne. See ei ole programmeerimiskeel. See ei pea funktsioone. See ei pea silmad. See ei pea tingimused. Kõik see on on kümneid eri silte, millest igaüks on null või enam atribuute. Ja tegelikult, millised on lõbus kohta HTML kui hakkate sukelduda on see, et see on väga self sõnavõtlik. 

Kõik see võtab on arusaam üldise raamistiku HTML. Mis on silt, mis on atribuut, kuidas sa tegelikult seadistada veebilehe järgnevalt. Ja kõik muu on tõesti tulemus soojaks online-viide või googling kuidas teha mõned tehnika või nagu me oleme näinud, Vaadates Facebook allikas kood, vaadates veebileht mis sulle meeldib on see lähtekoodi ja mõista, kuidas arendajad seal tegelikult ette asju teha. 

Nii saame teha pilte ka. Ja tegelikult, me tegime seda hetk tagasi. Lubage mul minna ja lihtsalt näitan sulle. Siin on mõned proovi kood. Kui sa kunagi tahad näha tõre kass. Nii märkate, et ma suudan on pilt tag siin. Ja mul on kommentaar selle kohal. Mul alternatiivi teksti kättesaadavuse. Nii et keegi, kes on kasutades ekraani Lugeja põhjustel vaatepilt võib tegelikult siis on nende ekraanilugeja öelda tõre kass. Sest kui nad ei saa vaata pilti, nad saab vähemalt on oma arvuti ütle neile verbaalselt, mis see on. Ja allikas, et fail on cat.jpeg. Nii et tegelikult, kui ma tõesti tahtsin saada tark, mida ma oleks võinud done-- Ma luban mitte minna Rick Astley, nii Ma lähen google kass asemel. Ja kui ma lähen Google Images siin, ja me eeldame et see on pilt minu kass. 

Oletame, et mul on kontrolli klõpsanud või klõpsata selle kogemata jube. Ja cat.jpeg ma lähen päästa minu töölaual. Lubage mul nüüd minna tagasi pilve 9. Pange tähele, et siin, ma ei saa mine laadida kohalikku faili. Ja kui ma haarata selle faili, cat.jpeg, teate et ma ei lohista ja raputage see pilv 9 ja see läheb peale karjuda siin. 

Sest me oleme juba andnud teile cat.jpeg faili aga see on super lihtne haarata photo, et olete võetud Facebook või Flickr vms ja tegelikult lohistada see arvesse pilv 9 ja siis oleks osa oma isikliku veebisait või probleem pani seitse või kaheksa, kui me kohe näha. Ja siis, kui sa Lõpuks külastada, et kass, eeldades, ma alla, et sama kass, teate selle-- et oli jumalik. 

Mis sa näeksid on midagi sellist nägu siin. Nii failide viide jooksul veebilehe võib olla kas kohalik oma konto või serveri mõnel teisel server nagu näiteks, et Rick Astley photo natuke tagasi. Nii et kui else-- mida me saame teha siin? Võtame pilk järgmine. Sa tead, mis selline lahe? 

Meil on seni olnud tegemist väga staatiline veebilehti. Ma tahan vürtsi asju üles järgmiselt. Ma tahan teha oma otsingumootori. Nii, et otsingumootor, olgem minna ja hakata seda tegema. Ma lähen edasi minna ja luua uus fail nimega search.html. Ja me oleme prefabed versioonid online. Oih. Ärge kleepige oma terminali aknas. Prefab versioonid online. Ja ma hakkan järgmiselt. Nii et siin on algusest fail nimega search.html. Ma lähen salvestada Tänapäeva allikas kataloog. Ma nimetan seda Search. Tegelikult me ​​teeme seda parem. CS50 Otsi ja tegelikult brändi see. Ja nüüd, ma ütlen midagi H1 CS50 Otsi. Ja siis siia, H2 varsti. Ja just jäämast, H1 ja H2 tähenda see, mida vastavalt? 

Jah, nii suur ja julge, ja ei ole nii suur, kuid siiski julge. Nii et kui ma hoian seda ja minna üle siin, Vaatame faili search.html. Kõik õige, ja see üks on right-- [kuuldamatu]. Ootel. David on segaduses. Oh, see on seal. David on idioot. OKEI. Nii et see on. Nii CS50 otsing varsti. Nüüd oletame, sünteesida mida me tegime eelmisel nädalal. 

Kus me rääkisime madalamal tasemel mehaanika HTTP. Ja neid uusi ideid HTML, mis on lihtsalt Selle märgistuskeel, kus te rääkige brauser täpselt, mida teha ja rakendada oma otsingumootori. Nii et selle asemel, et lihtsalt öeldes varsti, ma olen tuvustada midagi, mida nimetatakse vormi tag. Ja sellisel kujul, ma lähen on midagi sisestusväli. 

Ja nime selle sisendi valdkonnas, ma lähen kutsun seda Q. Ja millist tüüpi see sisestusväli Ma ütlen lihtsalt "text". Ja tekstivälja, nagu me tulen vaata, on lihtsalt teksti kasti. Ja nii see ei tunneta siin on midagi sees on sel hetkel. Ja nii ma lihtsalt lähen sulgeda silt, et kaldkriipsuga õige tag ise. Ja siis ma lähen on üks teine ​​sisend. Input type võrdub esitada. Ja siis ma lähen sulgeda see ka. 

Ja nüüd ma lähen siia tagasi. Ja juba näeme, kuigi päris kole, ma olen sai alguse minu otsingu lehekülge siin. Tegelikult, las ma püüan puhastada selle üles natuke. Selgub, et on input siin, saan teine ​​omadus nimega kohatäide. Ja ma võin näha midagi märksõnu või täpsemalt, otsingusõnaks q. 

Ja teate, nüüd on mul selline hall tekst et kaob Niipea, kui ma kirjutama hakata, aga see on ilmselt midagi olete näinud teistes veebilehti. Ma tõesti ei meeldi nuppu Esita. Nii et ma tegelikult toimub anda Saada nuppu väärtuses otsing. Ja nüüd, kui ma uuesti, märkad, et minu nupp muutub nimega otsing. Tead, ma tõesti ei nagu logo siin. Nii Google Font generaator. 

Ma tahan vürtsi see üles veelgi. Nii CS50 otsing. Lubage mul luua oma logo. See ilus. Nüüd lubage mul salvestada kui-- tule. Kus see läheb? Seal. OKEI. Vastamata seda. Salvesta kui. Stupid brauseritega. Stand by me läheme määrata see üks kord ja kõik. Seal me läheme. Hästi. Vabandust. Väljas päev. Nüüd see on funky. Exit täisekraanil. Hästi. 

Nüüd nagu tavaline isik, salvestada pilt. Logo.gif. Nüüd ma lähen minema CS50IDE ja Ma lähen lihtsalt haarata logo, Ma lähen lohista see minu allikas seitse kataloog, fail on juba olemas, ma olen OK sellega. Nii et ma lähen alistada sest ma juba olnud. Ja nüüd, kuidas ma saan lahti sellest? 

Lähme edasi siin ja teha Pildi allikas võrdne logo.gif. Sulge see. Säästa. Ja nüüd, kui ma lähen tagasi oma otsingut lehele, nüüd ta otsib päris hea. Olgu, nii et see ei ole üsna teinud midagi kasulikku. Tegelikult, las ma proovida otsida kass ja vaata, mis juhtub. Kassid. Pagan võtaks. See ei ole lihtsalt töö, ilmselt. Mis siis tähtsaim osa mis siit puudu? 

Õigus, isegi kui te ei tea ühtegi HTML, Olen hakanud märgistus Telefoni kujul ja ma olen öelnud seda, kuidas sisendid, mulle teksti kasti ning esitama nuppu, Mis tükk on ilmselt kadunud? Oletame, et me tahame tegelikult saada see asi töötab korralikult. Mida me peame tegema? Meil on vaja rakendada kolp andmebaasi või otsingumootori ise, ja et läheb võtma palju aega, ausalt. 

Seega pidage meeles, mida me tegime viimast korda. Nii et kui te otsite midagi Google ja olete eelnevalt välja lülitatud, Meenuta, instant search. Nii et lubage mul pöörduda, et välja nii, et see tegelikult käitub nagu vanemad kooli brauser, kui ma nüüd otsida midagi kassid, meenutada, mida URL näeb välja. See on päris segasena. Aga varjatud seal, Meenuta, on kaldkriipsuga otsing. Küsimärk q võrdub kassid. 

Ja see tundub mulle terve hunnik otsingutulemustes. Nii et sa tead, mida ma lähen tegema? Ma laenata Google vaid mõne minuti. Ma lähen üle siin ja ma ütlen et see moodustab tegevuse või kohtades, nii et rääkida, peaks olema sõna otseses mõttes Google. Ja meetod tahtsin kasutamisega saab olema saada. 

Mis on tegevus? Tegevus on kummaliselt nimega, kuid see tähendab lihtsalt kes läheb tegelema tegevuse sellisel kujul? Kui ma vajutan Search, kus Kui tulemus minna? Ja kui ma nüüd lähen tagasi oma vormi siin ja uuesti oma veebilehele ja nüüd otsida midagi nagu koer, märkate nüüd Olen taas ellu Google. Õigus? 

Kui ma tahan, et otsida midagi muud, see toimib mitte ainult koerad, see töötab ka kassidele. Samuti töötab CS50. Ja OK, see on lihtsalt all whelming, kas pole? Kõik õige, kuid see toimib. Mis siis tegelikult toimub? Nii et ma olen õpetanud oma brauseri abil HTML, võtta kasutajalt ja tegelikult talle, et sisend serveritega HTTP. 

Ja kuna minu brauser mõistab HTTP, siis tegelikult ehitada URL, nii et mida Ma lõpuks üle minu brauser, pane tähele, mis juhtub kui ma otsinud koer. Kui ma vajutan Search, märkate, et URL muutub, kui ma mõeldud to google.com/search~~V päringu võrdub koer. Ja et sellepärast kujul teab, sest meetod saada, lihtsalt lisada see, et URL on. 

Nüüd on need veebilehti on ikka kole. Nii saab tutvustada üks muu tükk süntaks kui me suudame täna. Ja see on midagi, tuntud kui Kaskaadlaadistik. Nii et lubage mul heita pilk Selle näiteks on siin ja vaata kui saame järeldada, mis toimub. See on CSS0.html. Ja see on koht, kus asjad natuke kole. Sest kahjuks maailma veebis, HTML üksi ei suuda kõike teha. Ja kui sa tahad Stilisoida oma veebilehel, sa tegelikult vaja keskenduda esteetika teistmoodi. Nii et siin, mul on keha minu web leht, mille sees on suur div. Ja div lihtsalt tähendab jagamist. Nii et see on nagu punkt, kuid see ei ole sama semantika Lõigu teksti. 

See tähendab lihtsalt, et brauser, siin suur ristkülikukujuline piirkond minu web lehele, ma tahan sellega hakkama spetsiaalselt. Nüüd joon 21 on koht, kus see div hakkab. Ja lihtsalt võtta vist. Milline on mõju line 21 kohta Ülejäänud lehe sisu? Tsentreerimine ta. See on kõik. Nii et me ei ole näinud viis tegelikult keskele teksti. 

Tegelikult minu otsingumootori Erinevalt tegelike Google, kõik oli õigustatud üle vasakule. Ja nii nüüd joon 21, ma räägin, hey brauser, luua jagamise lehel. Anna mulle suur, nähtamatu ristkülik. See, kuidas ma tahan mõtle veebilehel. Ja siis Stilisoida see järgmiselt. Toas jutumärgid, Nüüd on teine ​​keel et me tutvustas täna nimetatakse Kaskaadlaadistik. Õnneks see liiga ei programmeerimiskeel, nii et see on väga piiratud tema süntaks, kuid Samuti väga piiratud funktsionaalsus samas HTML on kõike markeerimiseks andmed veebilehekülje ja struktuuri veebilehel. CSS on üldiselt umbes viimane miil, esteetika, saada suuruse ja värvi ning paigutuse täpselt õige veebilehele. Ja tõepoolest, see on moodustatud peamiste väärtus paare. 

Vara niimoodi, teksti joondada järgneb koolon, järgneb väärtusest antud vara, mis antud juhul on keskel. Ja nüüd näevad sind saab pesa neid asju. Kui ma tahtsin kõike, mis Olen rõhutanud, et tsentreeritud, Sellepärast ma pean line 21 ja vastavale reale 31. Aga oletame nüüd tahan öelda John Harvard, tere tulemast minu kodulehekülg. 

Copyright sümbol John Harvard. Ja arvan, et ma tahan, et esimene need read on päris suur. 36 pikslit. Nii et korralik suurus. Ja ma tahtsin selle kaal olla julge. Aga siis allapoole, Ma tahan väiksem tekst. Ja allpool, et ma tahan isegi väiksem tekst. Vabandust. Täna tundub off päev. 

Nüüd, mida ma teen, et väljendada seda? Siin on line 22 on varjatud div või nested div, kui soovite. See liiga on oma stiil tag. Ma määrata kirjasuurus 36. Ma määrata fondi paksuseks julge. Alla siin, ma määrata ainult 24 pikslit. Ja lõpuks, vastavalt 28, täpsustatakse I 12. Nii nagu kiire meelerahu kontrolli ja kui inimlugemine Selle mis sõnad ekraanil on tegelikult saab olema julge? Milline read on tegelikult julge? 

Just John Harvard. Õigus? Sest nagu line 22 ütleb hei brauser, siin on jagunemisel lehel. Tee font size 36 punkti. Tee font kaalu julge. Niipea kui jõuad vastava lõpumärgendi või suletud tag line 24, See tähendab, hey brauser, stop teed iganes see on te teete. Ja teate olevat selge, kuigi line 22 on kõik need omadused nagu stiilis, kui sulgeda sildi line 24, sa ainult mainida sildi nime. 

Sa ei korda sõna stiilis või midagi, mis on seestpoolt neid hinnapakkumisi. Ja kui ma vaatan seda nüüd minu brauser, võtame pilk lõpptulemus. Lase mul minna edasi, et see fail, mis on CSS 0. Ja see on ikka päris tavaline, kuid saan päris huvitav. Aga selgub, et tema muid asju mida ma teha saan siin ja riisikol teha see täiesti kole, märkate siin, et minu keha minu veebilehele, Ma ei tee midagi naljakat nagu bg või taustavärvi. 

Ja kiire, millised on sinu lemmikvärv? Roheline kuulsin. Hästi. Nüüd, kui ma tabanud reload nüüd, meil on roheline veebilehel. Hea küll, nii et pole paha. Ja nüüd, kui ma tahan teha seda tõesti lahe, ma saan teha minu värv teksti isegi punane. Vaatame, mis see välja näeb. Nüüd ta otsib päris hea. Ja siin, kui sa tõesti taha jama keegi või kui sa tahad olla üks neist inimestest, kes üritab petta teid külastavad veebi lehte, sest nad on petnud Google mõtlema, seal on terve hunnik võtmesõnadeks like-- vaatame, laadida. Kust see minna? Ja seal juures. Hästi. Nii et ma ütlen seda kui kõrvale, siis me räägime seda kraami paari nädala jooksul kui me räägime turvalisuse, kui te tegelikult kinnistada kogu kobarad märksõnad veebilehele, isegi kui nad ei ole nähtav inimese, keegi nagu Google, muidugi, saab ikka tegelikult leida seda. Hea küll, et on päris kole päris kiiresti. 

Ja tegelikult, see pole veel kõik et palju erinevalt oma veebi lk bakalaureuseõppe, mis Hakkasin googling ümber leida viimase versiooni oma vana veebilehed. See oli päris halb. Tegelikult ma ei leia üks vahetult enne klassi. Aga seal on veel hullem seal. See ilmselt oli minu avalehele tagasi 1996. aastal. Ilmselt ma arvasin, et see oli asjakohane küsida inimestelt oma nime enne kui nad võivad tegelikult näha oma veebilehel. 

Ja siis ma näitasin neile midagi loll, ilmselt. Ma kaevama rohkem järgmiseks korraks. Aga nüüd, olgem kaaluda natuke disaini. Me rääkisime stiilis. Ja see leht siiani ja Kõige kõike olen kirjutanud on päris puhas stiililiselt. Aga kujundus? Noh, seal on palju koondamine mida ma olen teinud siin. 

Olen mainitud sõna värv paar kohti. Olen mainitud fondi suurust paari kohti ja julge paar kohti. Ja põhimõtteliselt, ma olen co segunemine kahes keeles. Mul HTML minu sildid ja minu atribuutide ja siis äkki, jutumärkides, mul on teine ​​keel täna nimetatakse CSS, mis jällegi on ainult need põhiväärtus paari või nende omadused eraldatud kooloniga. 

Tuleb välja, et palju nagu C, kus me saab alustada tegur välja Mõnes kood päisfailid, nii saame teha sama HTML. Ja samm, et on järgmine. Pange tähele, et see versioon, CSS1.html on Struktuurselt täpselt sama veebilehel. Nii et mul on terve hunnik of divs, kuid seekord, ma olen saanud lahti ümbris div nagu näete. 

Ja ma olen andnud neile kolmele divs top, keskmine ja alumine, kordumatuid identiteete. See on tore, sest andes vaheseinad lehekülje kordumatute tunnuste, Ma ei viide neid mujal. Kus? Noh, las ma keri üles. Ja seni, millal me vaatasime eesotsas veebilehe, mis on ainus tag oleme olnud juht veebilehe? Vähe kõvemini. Just pealkiri siiani. Aga selgub, et tema mõned muud asjad võite panna seal, üks mis seda nimetatakse stiilis tag. Nii hetk tagasi, me vaatasime kell stiilis atribuut. Selgub seal on stiilis tag. See kuulub sees juht veebilehel. Ja nüüd märganud, mida ma teen. Mul on sees see stiilis tag järgmised. Ma sõna otseses mõttes märkimist real 20 nimi tag, et ma tahan Stilisoida. 

Siis mul on avatud lokkis traksidega ja suletud lokkis traksidega. Nii sarnase sisuga C, kuid Ka see ei ole mingi funktsiooni see on lihtsalt süntaktiliste detail siin. Ja siis muidugi, ma räägin brauser, hey brauser, muuta kogu keha lehekülje on teksti viimist keskus. Ja siis see ütleb järgmist. Hei brauser, kui näed HTML element või sildi lehekülge on kordumatu tunnus top, nii räsi märk siin lihtsalt tähendab, unikaalne idee top, laske käia ja teha oma fondi suurus 36 ja selle fondi paksuseks julge. 

Hei brauser, element, kelle ID on keskel, oleks 24 pikslit. Ja hei brauser, kui näed Idee alt, et see 12 pikslit. Mõju lõpuks on täpselt sam. Kui ma minema CSS 1 lehekülg näeb sama. Aga me oleme samm veidi parem disain. Lubage mul nüüd minna tagasi siia CSS2 ja vaata, mis muidu ma olen teinud. 

Nüüd leht on tõesti väga puhas. Tegelikult ma ei sobi kõigile sisu lehel siin. Aga mida uus silt on mul kasutusele, ilmselt? Link. Ja see ei ole parim nimi silti, sest see ei ole link selles mõttes et me teame seda, kuid see tähendab, link mõne muu faili. See on selline nagu teravad lisada C. 

See on viis, kuidas HTML öelda hey brauser, mine saada sisu fail nimega css2.css. Suhe, mulle on see, et see on laaditabeli. Ja tõepoolest, see on, mida üks Si in Kaskaadlaadistik vahenditega. See on stiil lehel. See on lihtsalt tekstifail, mis sisaldab terve hulk vara. See on terve hulk stiile mis sa tahad pöörduda lehel. 

Ja nii see ilmselt on viidates teise faili. Ja kui ma avan, et CSS2.css, märgata, et kõik, mida ma olen teinud on kopeerida kõik Selle sellesse faili. Ja nüüd, isegi kui te pole kunagi kodeeritud see kraam enne, lihtsalt kaaluda koos lõpmatuseni inseneri mütsi kohta, miks on see on parem disain ilmselt? Faktooring välja need CSS omadused, laskmiseks oma faili. Kuigi me lahendada seda probleem nagu viis minutit tagasi kõige esimene versioon. 

Meil ei ole paranenud lk stiililiselt, see on lihtsalt parem disain mõnes mõttes. Miks sa arvad? Jah. Paindlikum kuidas? Jah. Nii et kui sa tahad minna tagasi ja muuta asju, Nüüd on teil üks koht kus saab asju muuta. Ja tegelikult midagi nagu probleem pani seitse, kus me ellu aktsia kauplemise kodulehel, et läheb on terve hunnik lehti. Ja see oleks tõesti tüütu, kui sa otsustad, hm, Ma tõesti ei meeldi 24 pikslit, ma tahan see oleks 28 pikslit või veidi suuremad. Ja siis pead tegema globaalne leida ja asendada või avada kõik veebisaidi failide lihtsalt tegelikult muuta üks väärtus. Faktooringteenus neid stiile ühte kesksesse kohta, saate nüüd avada ühe tekstifaili in CS50IDE ühtegi programmi, muuta, salvestada ja teha. Olete paljundatud neid muutused kõikjal. Ja see oleks sama a dot h faili ka. Nii küsimusi seega palju selle süntaksit? Olgu, mistõttu oleme teinud kõik tundub va tegelikult ellu linke. Ja nii lähme edasi ja tee seda. Lubage mul minna ja luua uus pilt siin. Ma kutsun seda link.html, panna tänapäeva koodi. 

Ja ma teen avatud sulg doc tüübist html. Selle kõrvale, et see asi on top, see doc tüübideklaratsiooniga, see on ainus, mis on imelik koos hüüumärk. Sa lihtsalt pead tegema seda seal ja see tähendab, et me kasutame HTML versioon 5. Vanemad versioonid keel oli palju kauem stringe, mis teil on vaja panna sinna. Nii et siin on näide nn link. 

Vajan keha minu veebileht siin. Ja siin, a href võrdsete oletame HTTP://www.disney.com ja minu lemmik veebilehel, siis ütlen. Olgu, nii väga kahjutud, kasutajasõbralik lehel. Kui ma nüüd minema minu kataloog loetledes siin ja avada link.html, meil hüper teksti. 

Ja tõepoolest, see on koht, kus H HTTP pärineb. Hypertext Transfer Protocol on umbes kandes teksti mis on hüperlinke teistele ressurssidele. Ja tõepoolest, siin on tuttav, kui retro, sinine link, et kui klõpsad, tegelikult viib mind Disney.com. Nüüd, oh, mis on tulemas varsti. Olgu, nii et nüüd, milline on mõned ning selle mõju? 

Ja ausalt öeldes, maailm hakkab saada natuke rohkem tuttavad ja ka veidi scarier aga ka veidi rohkem ise kaitstav kui hakkate mõista neid asju. Kuna tõenäosus on, et mõned teist, kui sa lähed läbi Gmaili rämpsposti kausta või isegi postkasti, oled ilmselt saanud mingi email mis küsib muuta oma Parooli äkki või äkki kontrollida Paypal volikirja või tühi-tähi. 

Ja tegelikult, võite saanud midagi, mis ütleb, nagu siit taastada oma PayPal salasõna. Ja nüüd, märkate, kui see ei ole Disney.com kuid nagu badplace.com ja uuesti, pange tähele, et tekst siin Võiks öelda midagi üldse. Ja tegelikult, see on lihtsalt sõnad. Miks ma ei tegelikult super pahatahtlik ja öelda http://www.paypal.com. 

Vajuta siia taastada oma PayPal parool ja nüüd uuesti. See tundub üsna õigustatud, eks? Ma mõtlen, et ma ei kliki talle, et lihtsalt ütleb seda. Aga märgata dihhotoomia siin. Ta ütleb www.paypal.com, ja tegelikult, oodake minut, me teame, et sa tahad s turvalisuse. Nüüd minge www.paypal.com HTTPS, aga kui sa oled seda kunagi varem teinud, ei sattuda harjumus Uusehitise üle vähe lingid siin. Ja see on raske mõista Ekraanil on, ja see pole veel kõik, et lihtsam siin. Aga tee alla siin väike vähe nurgas ei brauser tegelikult öelda, et me ei kavatse to badplace.com asemel Paypal.com. Nüüd, kus me tahame seda? Kõik näited oleme teinud täna oleme kõva kodeeritud ja trükitud käsitsi. Veebis on uskumatult ebahuvitav kui raske koodataksesi veebilehti, et sisu on staatiline ja kunagi muutub. Muidugi, kõik meie lemmik veebilehed täna kas see on Gmail või Twitter või Facebook või mitmeid teisi on dünaamiline. Nad muutuvad vastuseks kasutaja sisend nagu Google otsingutulemustes. 

Ja nii kolmapäeval, mida me teeme, on jätame HTML ja CSS sissejuhatus möödas ja me võtame iseenesestmõistetavaks, et me nüüd tean, et see ja tutvustame uus programmeerimiskeel nimetatakse PHP, mis meeldib C, läheb meile võimu tegelikult luua programme et ise luua väljund. Sel juhul me kasutame PHP genereerida dünaamiliselt web lehekülge kasutades seda uut keelt. Nii rohkem, et kolmapäeval. Näeme siis. 

[Muusika mängib]