[Muzikos grojimo] 

DAVID J Malan: Tai CS50 ir tai yra 7 savaitę pradžia. Taigi sveikiname atgal. Ir jūs tikriausiai žinote, kad į problemą nustatyti keturi, ten buvo maitėda medžioti tiek kai Pasakų prizų pagal kurias po susigrąžinti nuotraukų darbuotojai ir čia, ir New Haven, Jums buvo užginčytos rasti, nes daugelis iš tie kompiuterių mokslininkai, kaip jūs galėtų. Ir mes turime visa krūva argumentų. Maniau aš pasidalinti keletas su jumis čia šiandien. 

Ir mes po visų šių internete. Bet visų pirma, aš norėjau atkreipti jūsų dėmesį to-- šulinio vieną, Sam buvo gana keletą iš jų paprastai kelia, kaip šis. Tačiau atrodo, kad nuo šį rytą, nugalėtojas buvo tam tikra kažkas pavadino Ken su 24 darbuotojų perimta kamerą arba keli, kai jūs atsižvelgti į daugialypę darbuotojai, nuotraukas. Čia nuotraukoje yra Kenas Kitas Marijai New Haven. 

Dabar, Ken, nors, pasirodo išeitis yra tiek kampinio atveju kad dar ne atsitiko anksčiau. Pasirodo, kad tai neįvyko man įdėti baudos spausdinti probleminėse nustatyti keturi, kad sako, kad darbuotojai yra netinkama Pasakų prizų nes Kenas yra, žinoma, vienas iš ant mūsų darbuotojai fotografų. Dabar, tai sakė, jis Iš pradžių man parašė pasakyti prašome rašyti šias nuotraukas internete. Manau, didele dalimi nes dauguma nuotraukų kad šis fotografas paėmė atrodo šiek tiek kažką panašaus į tai. Ir panašiai. 

Bet Kenas būtų panašus į mane nuraminti jus kad jis labai geras fotografas, Jis yra profesionalus, jis mano nuotraukos, kurios nėra neryškus, kad geriau sufokusuotas, o jis paėmė gana mūsų pačių darbuotojų nedaug. Tačiau užuot tik pripažinti, Kenas, ką mes maniau, mes norime padaryti yra eiti per sąrašą faktiniai studentai, kurie pateikė. Ir paaiškėja, kad Lance su 15 nuotraukos kaip šį rytą buvo mūsų nugalėtojas. 

O čia nuotraukoje yra Lance su Colton, su Skaz, su savimi, ir su Sam. Bet tada jis Pasirodo, kad, kaip iš 11:46, todėl tik šiek tiek prieš, Grįžau į mano elektroninio pašto ir nustatė, kad mes turėjome dar vienas argumentas studento vardu Bonnie Kieno elektroninio sakė tik tai. Nesiruošia melas, aš Tokiu būdu per klasę. Ir tada pradėjo pridėti tik 14 nuotraukos, viena drovūs Lance s 15 d. 

Bet Bonnie nuotraukos, paaiškėja iš buvo keli darbuotojai, Sam tarp jų, todėl tai, ką manėme būtų padaryti, tai pripažinti abu. Taigi, be gauti Dropbox erdvę, kuri visiems, kurie dalyvavo gauna, šie du skyriai taip pat bus gauti gražią aptarnavo pietūs už juos ir jų skyrių Mates tai kitą savaitę. Ir todėl jūs išgirsite iš mūsų, Lance ir Bonnie, apie tai. Taigi dideli sveikinimai su jais. Dabar, tie iš jūsų, kurie būtų kaip pietų plačiau žinau, kad CS50 pietūs, Cambridge ir New Haven tai penktadienį. Eiti į CS50 tinklapyje slash RSVP. O dabar žodis seminaruose. Daugiau curricularly. Taigi mes artėja prie taškas semestrą kur jums reikia pradėti galvoju apie galutinius projektus. Ir iš tikrųjų, tik šiek tiek, bus Vadinamasis anksto pasiūlymai turi būti mokami. Taigi iš anksto pasiūlymai yra skirti būti gana mažo poveikio ir tikrai tik už galimybę jums komponuoti trumpą pastabą Jūsų mokymo kolega, kad informuoti jam ar jai, ką jūs galvojate jus galbūt norėsite padaryti savo galutinį projektą. 

Dabar, daugelis studentų baigtis daro žiniatinklio galutinius projektus. Ir, žinoma, mes tik dabar praėjusią savaitę ši ir už jos ribų pasinerdamas į interneto programavimo. Taigi ne nerimauti, jei neturi jokios idėjos, kaip Jums būtų sukurti idėjas, jums gali turėti savo galvoje. Tai tikrai tik verčia funkcija kad jums galvoti ir kalbėti su savo TF apie tai. Tačiau, siekiant padėti jums su tuo, ir su galutiniais projektų galiausiai, žinau, kad CS50 yra tradicija pasiūlyti seminarus. 

Ir tai yra neprivaloma, rankas, ar paskaitą remiantis galimybes Norėdami sužinoti daugiau apie temas, kurios yra šiek tiek pagalbinės aikštyno programa, bet vis dėlto nuostabus medžiaga vairuoti galutinius projektus. Ir todėl tai yra sąrašas, kurį CS50 darbuotojai čia New Haven turi sugalvoti už Šiemet apie iOS programavimas, programų Android programavimas, žaidimų kūrimo, ir kekių daugiau įrankių ir kalbos ir būdai. 

Taigi užmesti akį į CS50 tinklalapyje. Ir tuo tarpu, jei norite registruoti susidomėjimą bet kuriuo iš šių, eiti į CS50 anketa slash registre. Ir mes tada sekti, kaip į dienų ir skrydžių laikai ir vietos ir everything-- dauguma viskas bus būti transliuojamas ir pagal pareikalavimą po, jei jūs negalite iš tikrųjų padaryti. Taigi be tolesnio ceremonija, mes baigėte paskutinį kartą su įrankiais. 

Ir tai buvo tarsi pranešimą, kad buvo viduje virtualiame voką, primename, kad mes praėjo nuo maršrutizatorius maršrutizatorius maršrutizatorius tarp interneto naršyklės ir interneto serveris. Ir tai žinutę atrodė tiek kažką panašaus į tai. Tai buvo daugiau paslaptingą pranešimą, kad iš tikrųjų buvo viduje voke parašyta ant popieriaus lapo, kurio Pirmoji eilutė sako pažodžiui, gauti velniop. 

Ir tik kaip normalumas patikrinti, ką gi velniop reiškia? Ką reiškia, kai velniop Prašančioji svetainėje? Jūs prašyti jį visą laiką. Labiausiai bet kuriuo metu galite aplankyti svetainę, jūs ne iš tikrųjų įveskite failo vardą. Jūs tikriausiai tiesiog eikite į Facebook.com, įvesti, gmail.com, ar pan. Ir ką velniop atstovauti? Kas failą? Arba kokį puslapį, specialiai? 

Indeksas, taip. Taigi numatytąją puslapio. Taigi, jei jūs neturite nurodyti failą pavadinimas, kaip mes pradėsime matyti, jūs iš tikrųjų tik prašančioji man numatytąją puslapio Facebook arba duoti man mano pašto dėžutę arba suteikti man numatytasis puslapis naujienas CNN tinklalapyje ar pan. Ir serveris tada reaguoja į kad pranešimas su kažkuo kaip tai, sako taip, aš kalbėti HTTP versiją 1.1. 

200, kuris yra statusą kodas, kuris mes, žmonės retai kada nors pamatyti, nes tai gerai. Nes tai reiškia OK, prašymas buvo gauta ir tinkamai tvarkomos. Ir turinio tipas matyt atsakyme yra gana dažnai, bet ne visada, teksto. Ir būtent, HTML. Ir tai iš tikrųjų kur mes pažvelgti šiandien. 

Taigi iš tiesų, aš ruošiuosi eiti į priekį ir atverti naršyklę. Aš ruošiuosi naudoti "Chrome", galite naudoti bet dauguma naršyklę ateinančias savaites. Mes rekomenduojame Chrome nes tai ypač geras programinės įrangos kūrėjams. Jis gavo daug ir pastatytas Įrankiai, kad būtų lengviau plėtoti ne tik HTML ir CSS, dalykų mes pradėsime kalbėti apie šiandien bet ir kitomis kalbomis, taip pat. 

Ir aš ruošiuosi eiti į priekį ir eiti to-- Aš ruošiuosi Kontroliuokite Spauskite arba dešinę spustelėkite bet kurioje tinklalapio. Ir aš ruošiuosi eiti į Apžiūrėkite elementas. Ir aš ruošiuosi keisti mano Ekranas truputį čia. Leiskite man pereiti tai apačioje. Taigi tai yra tai, kas vadinama "Chrome" inspektorius. Taigi tai yra tarsi derinimo įrankis įmontuotas į "Chrome". 

Visi jūs jau turite tai Jei jau naudojate "Chrome". Ir tai leidžia jums pamatyti, kas vyksta nuo po tam tikro tinklalapio gaubtu. Tad iš tikrųjų imtis pažvelgti į tai, kaip nurodyta toliau. Ji turi daugiau funkcijų būdas ir mums rūpi ir šiandien. Bet ten šiuos skirtukus čia. Elementai, tinklo, šaltiniai, tvarkaraštis ir kai kurių kitų dalykų. Aš ruošiuosi spustelėkite Tinklas akimirką. 

Ir tai šiek tiek absoliuti Iš pirmo žvilgsnio čia. Bet ką aš ruošiuosi padaryti, tai tegul man jį supaprastinti truputį. Aš ruošiuosi kad įjungtumėte įrašymo šviesą taip, kad jis raudonas. Ir aš ruošiuosi pasakyti išsaugoti žurnalą. Ir tai yra tik šiek tiek dalykas, aš raštuotas, laikui bėgant, kad ketina taupyti Viskas, kas vyksta naršyklėje. Ir dabar aš ruošiuosi eiti į http://facebook.com. 

Tiesą sakant, darykime www gera priemonė, velniop. Įveskite. Taigi URL, kad daugelis Jūs galbūt jau aplankė. Ir dabar "Facebook" interneto puslapis ateina viršuje. Ir tada visa krūva Daiktai skrido apačioje. Ir iš tiesų, it turns out, kad kai Jūs lankotės facebook.com, jūs ne tik priimant vieną HTTP užklausą, paaiškėja, kad ketina Facebook.com siunčia 41 šių vokų, kiekvienas su savo prašymą GET, kaip nurodyta, nors ir už ekrano čia tuo ekrano apačioje, tai rodo, kad, tiesą sakant, mano naršyklė tapo 41 prašymus. 

Ir iš viso, tai perkeltas 861 kilobaitų ir jis paėmė kažkodėl net aštuonias sekundes atsisiųsti visi, kad. Taigi, kad tikrai truputį keistai kad "Facebook" svetainėje užtruktų, kad ilgio, bet taip, kad ją šiuo atveju. Dabar visa tai man nerūpi apie išskyrus viršutinį prašymu. Taigi eikime į šį čia ir leiskite man nutolinti tik už akimirką. 

Ir leiskite man priartinkite tai. Taigi, ką aš padariau ne liko, nors ten daug vyksta per čia yra aš pabrėžė Facebook.com ir tada pastebėsite, kad aš slinkimo žemyn, Pereikite, šliaužiantis žemyn, prašyti antraštes. Ir jūs pamatysite, kad "Chrome rodo man iš esmės vidiniai turinys prašymo aš padariau. Tai ne formatavimą visai tą patį būdas, bet pastebėsite, ten paminėjimas gauti, Pastebėjus paminėjimas šeimininką, Facebook.com, kelias, arba velniop, kuris yra failas aš prašoma. 

Ir tada, jei aš pereikite atsarginę kopiją, mes iš tikrųjų matyti, kad tai, ką "Facebook" grįžo man yra visų šių antraščių. Taigi viduje tos virtualios voke iš tiesų yra pagrindinių verčių porų daug. Žodžiu, dvitaškis, o tada tai yra, vertės. Žodžiu, dvitaškis, o vertė. Tai yra vadinamieji antraštes. Ir ten būdas išsamiau čia nei mes iš tikrųjų rūpi dabar. 

Bet tai yra antra, paskutinis ten, pastebėti, kad facebook.com serverio, iš tiesų sakė čia ateina tam tikrą teksto HTML. Taigi, visa tai pasakyti kad kai jūs prašote interneto puslapis iš naršyklės į A serveris, kad serveris atsako su jos pačios voke kurio viduje yra tekstas. Kitaip tariant, HTML. Hiperteksto kalba. Kuris yra kita kalba kad mes pristatome šiandien kad žmonės ar kompiuteriai generuoti siekiant įgyvendinti tinklalapius. 

Tiksliau, pažvelkime į tai. Aš ruošiuosi dabar grįžti "Facebook" tinklalapyje. Ir aš ruošiuosi tik kontrolės paspaudimu arba dešiniuoju pelės mygtuku spustelėkite ir spustelėkite Rodyti puslapio šaltinį. Ir net jei jums nereikia naudoti "Chrome", IE galite tai padaryti, "Firefox" gali tai padaryti, Safari galite tai padaryti, nors meniu galimybės gali atrodyti šiek tiek kitoks. Ir tai yra HTML, kad Markas ir bendrovei "Facebook" parašė. 

Ir apibendrinant, ši kalba čia įgyvendina mėlynos ir baltos spalvos puslapį kad mes matėme prieš momentas. Dabar, tai yra šiek tiek absoliuti. Bet jei žiūrime viršuje kairėje, mes ketina pradėti rodyti Kai kurie modeliai. Atrodo, ten daug Šių atviro kampo laikikliu ir tada ten Šis raktažodis HTML. Štai dar vienas atviras Konsolė ir galvos. 

Čia yra, jei mes slinkti žemyn ir žemyn ir žemyn, aš ketina eiti į priekį ir pabandyti ieškoti kažko. Yra būdas per dešinėje Čia yra atvira laikiklis kūno. Ir prisiminti, nuo paskutinis laikas, kad mes pasiūlėme kad paprasčiausias tinklalapį kad žmogus gali rašyti gali atrodyti šiek tiek kažką panašaus į tai. Atidaryti HTML tegus, atviru viršumi žymeklį, atidarykite pavadinimas žymeles, tada uždaro pavadinimas, uždara galva, atvira kūno žymeles, kai tekstas, Uždaras kėbulas, uždara HTML. 

Bet pauzė čia tik akimirką. Šis kodas, net jei jūs niekada parašyta anksčiau bet vis dar ne visai suprantu kas vyksta, atrodo gana gerai. Teisė, tai labai švarus. Tai labai stilistiškai gražus. A įdubimas ir baltos spalvos daug erdvės. "Facebook" nėra. Taigi, kodėl yra tiek daug "Facebook" blogiau nei I ne rašyti HTML? Matyt. 

Teisė, tai kaip vienas iš penkių stiliui. Yra įtikinamų priežasčių jiems sumažinti šiuos kampus. Gerai, kad jie nenori Kad būtų lengviau jums jį perskaityti. Taigi tam tikra prasme, jie obfuscating ją, tarsi stengiamasi ją bent estetiškai taip kad tai sunkiau MySpace eiti ir nuplėšti jų puslapyje ir už jį HTML. Pasirodo, kad su programomis nors, įskaitant "Chrome", mes galime valyti tai iki super lengvai. Taigi, tai ne visai, kad dėl kokios priežasties. Ką dar gali būti priežastis. Taip. Taip, baltos vietos išlaidos duomenys. Ką turi galvoje? Taip, tiksliai. Jei paspausite klavišą TAB daug arba tarpo, apsvarstyti pasekmes. Taigi kiekvienas jūsų klaviatūros klavišą yra [Nesigirdi] atstovavo vieną baitą. 

Taigi tarkime, kad Markas arba bet DEVS šių dienų hitai tarpo tik vieną kartą Šiame HTML puslapį, kad atstovauja Facebook "svetainėje. Ir "Facebook" turi daug vartotojų šių dienų. Taigi tarkime, kad "Facebook" puslapis šiandien apsilankė milijardo žmonių. Ir kažkas "Facebook" paspauskite tarpo klavišą tik vieną kartą. 

Taigi vienas papildomas baitas, milijardas prašymai, kiek daugiau duomenų Facebook " perkeliant per internetą nes kažkas nukentėjo tarpo nuo jo klaviatūra? A milijardas baitų arba vieną gigabaito duomenys siunčiami iš "Facebook" serveriuose žmonių aplink Pasaulio be priežasties. Dabar, kad tik vienas tarpas. 

Įsivaizduokite, jei mes iš tikrųjų valyti tai dalykas aukštyn ir atitraukiama ją ir pridūrė, baltųjų daug erdvės ir skirtukas simbolių ir tarpų, jūs galų gale išleisti gigabaitų, jei ne Terra baitų daugiau erdvės. Ir taip super dažniau būna Tikrasis pasaulis interneto svetainių kūrimas yra nemenkinti savo kodą. Ir mes galų gale pamatyti kaip jums gali tai padaryti. 

Tačiau šiandien, mes pradėsime rašyti kodą kad iš tikrųjų perskaitomas mus žmonėmis. Pasirodo, nors, jei jūs einate atgal šį įrankį Chrome Apžiūrėkite elementas Anksčiau mes buvome Tinklo kortelėje. Pasirodo, kad jei jūs einate į elementai skirtuką, ką jūs iš tikrųjų matyti yra "Chrome" gana spausdinami versija tame pačiame HTML. Taigi mes deobfuscated ją. Taigi tai ne rungtynės kompiuterio. Ir dabar jūs iš tikrųjų galite spustelėkite aplink ir pradėti pamatyti hierarchiją, kuri yra puslapyje. Tad iš tikrųjų tai padaryti. Aš ruošiuosi eiti į priekį ir atverti nuo mano Mac programa, vadinama teksto redaguoti. Ir prisiminti, kad tai tik super paprastas tekstinis programa. Langai turi Notepad.exe. Ir aš ruošiuosi Verbatim įrašykite šiuos. Dok tipas HTML, atviras laikiklis HTML uždarytas laikiklis HTML, turime puslapio galvutę čia iš puslapio galvos čia pabaiga, pavadinimas, bus kaip, hello pasaulyje. 

Ir tada žemyn čia, mums reikia iš tinklalapio turinys. Uždaras kėbulas. Ir tada čia hello world. Gerai. Taigi, mes parašiau super greitai tinklalapį. Aš ruošiuosi išsaugokite jį kaip hello.html ant mano darbastalio. Mano Mac ketina skųstis, galvoju, kad palauk, tai yra tekstinis failas, tai norite jį vadiname .txt? Bet ne, aš noriu naudoti dot HTML. 

Ir kas tada malonu, jei aš tiesiog dukart spustelėkite failą, hello.html, čia mano puslapyje. Deja, aš esu tik žmogus pasaulyje kurie gali aplankyti šį puslapį dabar. Nes kur jis gyvena, matyt? Tai mano Mac, tiesa? Kuris yra nenaudingas. Kaip niekas šiame kambaryje jau nekalbant internete iš tikrųjų galite aplankyti šį puslapį. Taigi, šiandien mes turime pristatyti kitą elementą. 

Ir tai padaryti, aš ruošiuosi eiti į priekį ir atverti Cloud 9. Taigi Cloud 9, žinoma, Debesis pagrįstas service-- CS50 IDE-- Tai turi visi mūsų darbo vietoms veikia kažkur internete. O tai reiškia, kad visi mūsų failus yra viešai prieinama jau. Taigi eikime į priekį ir tai padaryti. Aš ruošiuosi eiti į priekį ir sukurti naują failą NCS50IDE. Aš ruošiuosi jį išsaugoti kaip anksčiau kaip hello.html ir spustelėkite Įrašyti. O dabar tik sutaupyti laiko, aš ruošiuosi eiti į priekį ir nukopijuokite įklijuokite šį kodą o ne Pakartokite ją. Ir išsaugokite jį. Ir todėl dabar turiu failas, vadinamas hello.html. Bet kaip tai padaryti, aš iš tikrųjų atidarykite jį kaip interneto puslapyje? Na, it turns out pastatytas į CS50 IDE yra ne tik kaip klingsėti kompiliatorius ir kaip GDB debugeris ir kekių kitas programas, ten tikrai pilnavertį Web serveris veikia per CS50 IDE. 

Visi jūs, ty, turėti savo serverį. Ir žiniatinklio serveris yra tik gabalas programinė įranga kurio gyvenimo tikslas yra tarnauti tinklalapius. Norėdami klausytis prašymų iš naršyklių ir reaguoti su mažai virtualių vokų kurio viduje yra turinys, kad aš parašiau. Taigi tai žiniatinklio serveris yra iš tikrųjų nemokama ir atviro kodo. Kur atviro kodo tiesiog reiškia, Programinė įranga, kad kažkas turi parašyta, kad visi iš mūsų gali realiai pamatyti ir atsisiųsti ir net pakeisti kodą. Ir tai vadinama Apache. 

Ir mes padarėme tai šiek tiek lengviau naudoti CS50IDE paskambinę ją Apache 50. Taigi, kad ji iš tikrųjų suprasti taip. Aš ruošiuosi pasakyti "Apache 50 pradžia. Ir tada aš tiesiog norėčiau pasakyti tašką. Ir mes matome, kai šiek tiek Arcane pranešimą sakydamas nustatant Apache dokumente [? grupė?] namų, Ubuntu, kokia tai yra, slash darbo vietos. Pradedant interneto serveris Apache 2 sėkmingai. 

Taigi ilga istorija trumpa, aš tik stumti mygtuką ir įjungtas interneto serverio, kuris dabar klausytis ant TCP internete 80 tam tikru adresą. Ir ji sako čia, ir tai pasikeis Based Jūsų vartotojo vardas ir kitų veiksnių, bet pastebėsite, dabar, jei aš spustelėkite šią, IDE50 dot jharvard ir tt ir Taigi, pastebėsite, kad visą šį laiką Per pastaruosius kelis savaites, galite turėti Pastebėjome, kad jūsų vartotojo vardas yra įdėta į viršų dešinėje kampe CS50IDE. 

Ir tai iš tikrųjų buvo visa tai laikas adresą, kuriuo galite aplankyti visus failus internete. Iki šiol ji nėra svarbiau, nes C, jums paprastai nori dalykų eiga terminalas, o ne internete. Tačiau šiandien, mes pradedame rašyti žiniatinklio kodą kad mes norime prieinama viešojo URL. Taigi, ką aš ruošiuosi padaryti, tai spauskite šią nuorodą. 

Ir pastebėsite, kad aš matau gana negraži indeksas, katalogas sąrašas, bet ką failo šuoliai į tave tikriausiai? Hello.html. Tai todėl, kad įrašiau Į mano darbo vietos failą. Ir ką aš sakė Apache web serverį yra ieškoti Dovydo darbo srities kataloge. Ir tegul kas nors Pasaulio pamatyti tuos failus. 

Ir iš tiesų, jei aš dabar spustelėkite hello.html, Matau, kaip tiksliai Šiame skirtuke šio failo. Dabar pastebėti, Cloud 9 daro nors šiek tiek naudinga mums. Per CS50 IDE, pastebėsite, ten Staiga adreso juostą. Tai todėl, kad nors mes naudojant "Chrome" aplankyti CS50IDE, viduje CS50IDE yra jo paties versija naršyklėje dabar. Ir taip, o ne apsunkinti kaip toks, Aš ruošiuosi eiti į priekį ir tiesiog nukopijuokite šį URL. Aš ruošiuosi eiti į priekį ir tik atidaryti savo "Chrome langą. Taigi nėra magija čia nėra CS50IDE. Aš tik ketina pažodžiui įklijuokite mano J Harvardo URL ir paspauskite "Enter". Ir voila, dabar aš ir teoriškai, kiekvienas internete, jei aš sukonfigūruota Permissions tinkamai, galite aplankyti šį failą. Ir todėl dabar, jei aš sakė hello.html, voila, yra mano neįtikėtinai underwhelming interneto puslapis. Taigi darykime greitai normalumas patikrinti. Kadangi visi, kad yra konceptualus išsidėstymą aikštelėje. Ir mes iš tikrųjų tikrai ne mokoma, kaip rašyti HTML savaime. Turite klausimų iki šiol apie tai, kas atsitiko? Taip. Ar CS50 savo šiuos tinklalapius? Kokia prasme? Geras klausimas. Taigi CS50 s priklauso CS50.io. Mes iš tikrųjų nusipirkau tą domeno vardą. Ir gamta iš jūsų vaikinai prisijungti prie CS50IDE, jūs visi gauti tai, kas vadinama subdomenas. 

Taigi IDE50-Malan arba IDE50-Rob.CS50.io, tai yra jūsų unikalus adresas, per Mūsų domeno vardas. Taigi, už kurso tikslais, turite savo unikalų adresą. Bet mes supaprastinta dalykus perkant aukščiausio lygio domenas, CS50 taškas I / O ir tada visi kiti viduje, kad taip sakant. Ir mes grįžti į tą į porą savaičių tikriausiai, ypač galutinės projekto laikas, kai kai kurie iš jūsų galbūt norėsite gauti savo domeno pavadinimus. Tai tikrai gana paprasta. Gerai. Tad dabar pats tai padaryti. Aš ruošiuosi grįžti į CS50IDE, kur mano failą dabar, hello.html, yra ne visi, kad įdomus. Norėčiau padaryti kažką šiek tiek gražiau nei tai. Taigi, aš ruošiuosi daryti kažką panašaus į tai. Leiskite man atvira paragraphs.html. Taigi tai yra failas rašiau iš anksto. Tuo jo viršuje, pavyzdžiui, visada, mes turime pastabas. Bet HTML, komentarai atrodo šiek tiek kitoks. Trimis linijos ir linijos 14, jums matyti sintaksė pradėti komentarą ir galų komentarą. 

Tačiau nė vienas iš stuff tarp klausimais funkcionaliai. Tai tiesiog užrašą su žmogaus, kas vyksta čia. Ir kaip greitai normalumas Tikrinti, ar aš slinkite žemyn, kas yra akivaizdu, nauja Tag kad mes įdiegėme? Į šiol mes matėme žymės yra atvira laikiklis HTML, galvos, antraštė ir kūno. Bet kas akivaizdžiai nauja dabar? 

Taip, taip, p. P tegus arba žyma dalis. Ir tada aš tiesiog pasiskolino kai pagal nutylėjimą Lotynų tekstą sudaro mano pastraipas. Nes tai, ką aš norėjau parodyti, kaip jums gali atstovauti pastraipas teksto HTML. Ir taip, kas pradeda atsitikti čia yra tai, kad ten jau modelis vystosi. Ir leiskite man eiti į priekį ir tai padaryti. Leiskite pirmiausia išjunkite Apache. Ir aš ruošiuosi pasakyti, pradėti save vėl viduje šiandienos šaltinio septynių m katalogas. Taigi, kad aš turiu priėjimą prie visko. 

Ir dabar, jei aš einu atgal į Šiame kataloge sąrašas, pastebėti matau kiekvieną failą iš šiandien. Ir jūs pamatysite, į Kita problema rinkinys, mes pateikti jums nurodymus už tai tiksliai tai. Jei aš atidarau paragraphs.html, tai gali taip pat atrodyti programavimo kalba jums, jei jūs neturite kalbėti ar skaityti lotynų. Bet tai tik trys punktai teksto, kad yra pažymėta HTML. 

Ir pastebėsite punktą pertraukos tarp jų. Kadangi it turns out, ir nors jums gali būti linkęs tai padaryti, o realiame pasaulyje, Jei norite įdėti eilutę pertraukos tarp dalykų, jums gali paprasčiausiai tai padaryti ir paspauskite Save. Ir dabar, jei aš iš naujo įkelkite čia pranešimas kad viskas tiesiog išsilieja kartu tik viena blob tekstą. Kadangi HTML rūšies kvailas kalba. 

Jis yra skirtas būti naudojamas, pavyzdžiui taip, kad naršyklė bus tik padaryti aiškiai, ką pasakyti, daryti. Taigi, jei jūs neturite pasakyti, duok man naują pastraipą, jūs nesiruošia, kad matytumėte naują pastraipą. Ir iš tiesų, ką naršyklės ketinate daryti net jei paspausite Enter tarkim vėl ir vėl ir vėl, juda Šis tekstas būdas žemyn ekrane ir tada išsaugoti ir tada perkraukite, naršyklė vyksta žlugti visa tai tuščios vietos į tik vieną, matomos tarpų. Gerai. Taigi, kad ši dalis žymė. Ir kas taip yra modelis kad manimi kurti čia? Na, atrodo, kad tas atvejis, kad HTML yra visa informacija apie pradedant žymą ir baigiant žymą. Ir kas yra žymė? Na, tai tik vienas iš sintaksės riekė. Atidaryti laikiklis, raktažodis, uždara laikiklis, yra žymė. Arba pradėti žymą. Ir tada, kai esate padaryta išreikšti save, kaip baigsite su dalį, jūs taip sakant priešingai. Tačiau yra priešingai ne visai atgal. 

Jūs galite tiesiog priešdėlis tas pats Tag s pavadinimas pasvirusiu brūkšneliu, kaip šis. Gerai. Taigi ne visi, kad įdomus. Ir iš tiesų, mes ne padaryti Web visa tai įdomiau. Ką daryti, jei noriu, kad dalykų didesnis ir paryškinti? Taigi paaiškėja, kad čia pavyzdys į headings.html, kur mano kūną, Aš turiu H1 žymeles, H2, H3, keturių, penkių, šešių arba, kurie visi atrodo gana paslaptinga. Bet jei aš einu atidaryti šį Pavyzdžiui, leiskite pažvelgti. Headings.html. 

Taigi naršyklių pagal nutylėjimą gali suteikti jums tekstą tai didelis ir drąsus ir skirtingų dydžių. H1 yra didelis. H6 yra mažesnis, o tada visa kita tarp. Taigi, kad įdomu, bet vis dar tikrai ne interneto žinau. Ką daryti, jei norime Turiu kažkas panašaus į sąrašą. , Taigi čia ženkleliais sąrašas trys iš Harvardo universiteto namus. 

Kaip tu apie tai darote? Na, pažvelgti list.html išvaizdą. Ir čia mes matome Šiek tiek funkiness bet tegul mano kas vyksta. Taigi remiantis tuo, kas ką tik matėme, UL stovi netvarkingai sąrašą. Nerūšiuotas sąrašas tiesiog reiškia ženkleliais. Nėra jokių numeriai. Taip pat kažkas vadinamas tvarkingai sąrašą, kuris yra bent žyma KT. Tada LI, sąrašo elementas yra visa tai reiškia. 

Ir todėl jis automatiškai numeriai viską už jus. Bet vėl, visą savo įdubimas ir balta erdvė yra tik dėl manęs. Naršyklė nėra tikrųjų vyksta rūpintis. Taigi, nors tu negali tai padaryti, tiesiog, kad būtų aišku, jums neturėtų nors Naršyklė dar galėtų jį suprasti tik baudą. Aš pataikyti Perkrauti Mano naršyklė, aš paspauskite Perkrauti ir ne kaita vyksta nes naršyklė dar daro būtent tai, ką aš sakau tai daryti. 

Gerai. Taigi visa tai tik tekstas. Dabar galime padaryti kažką įdomesnio. Aš ruošiuosi eiti į priekį ir skolintis kai šios HTML. Aš ruošiuosi eiti į priekį ir sukurti naują failą čia. Ir mes tai vadiname rick.html. Mes turime neproporcingai Naudota kažkas vadinamas Rick Roll tai Šiemet klasė, aš nežinau, tai tiesiog atsitiko organiškai. 

Ir dabar jis nebekontroliuojamas. Taigi, aš tik ketina eiti su juo. Ir jei aš einu į "Google" Vaizdai ir Rickas Astley. Jei jūs nežinote, kodėl mes darome Tai, tiesiog skaityti Vikipedijos. Kiekvieną kartą, kai jūs paspaudėte nuorodą, kažkas buvo juoko kažkur. Ir leiskite man eiti ahead-- ten mes einame, tegul peržiūrėti šį įvaizdį. 

Taigi čia mes turime vaizdas "Google Images. Ir įsivaizduokime, kad tai yra pagrįstai visur internete. Taigi, aš ruošiuosi daryti prielaidą, viskas OK man kad iš tikrųjų įdėti į mano tinklalapį tai. Aš ruošiuosi eiti į priekį ir kopijuoti vaizdo URL. Ir dabar, jei aš einu atgal į debesis 9, pažiūrėkime, ką aš galiu padaryti čia. Taigi čia yra tik interneto puslapis. Tai Rick Astley, cha cha, Aš ruošiuosi dabar grįžti mano naršyklėje, perkrauti, ir įdomi. 

Kur yra Rick? Taigi leiskite man pamatyti, kas atsitiko. Tiesą sakant, aš ruošiuosi apsimesti, kaip aš nepadarė. [Nesigirdi] įdėti jį čia. Mes grįžti į tą, kuris akimirkai. Taigi čia rick.html. Taigi, kad ne Rick Astley. Taigi paaiškėja, mes galime iš tikrųjų įtraukti jį čia. Tai Rick Astley. Aš ruošiuosi pasakyti man vaizdą, kurio šaltinis yra URL aš tiesiog nukopijuoti, kuris matyt yra laimingas gimtadienis kažkas ar kita. 

Ir dabar aš ruošiuosi uždaryti panašaus žymą. Taigi tai yra vyniojimo itin ilgai. Tačiau pastebite, kad visi aš padaryti yra atvira laikiklis vaizdą, šaltinis su šio požymio. Ir tai tikrai ilgas URL. Ir pačioje pabaigoje, pastebėti tai. Kodėl aš padariau velniop kampu laikiklis vietoj, kaip ir kiekvienas kitas žymeles, turintys atvirą laikiklį, IMG, uždarytas laikiklį? Tiesiog spėti, net jei neturi nieko bendra pažinimas su HTML anksčiau. 

Taigi, tai, kaip jis užsidaro komanda, bet kodėl tai tikrai ne padaryti intuityvus jausmas kažką daryti šiek tiek daugiau VERBOSE kaip glaudžiai vaizdą? Taip. Taip. Tiesiog semantiškai, ten nėra prasmės pradedant vaizdą ir baigiant vaizdą, tai arba ten, arba tai ne. Taigi nėra prasmės palikti tarpą kam nors kitam viduje vaizdą. Jūs tiesiog negali padaryti. Ir taip sintaksė būtų paprastai tik padaryti įstrižas brūkšnys viduje atviro žyme arba pradedamas žymeniu ir tada paspauskite Išsaugoti. 

Taigi, jei aš dabar iš naujo įkelkite šį failą, dabar Aš turiu gerą tinklalapį virimo čia. Ir mes tikrai galėtų tikrai erzina žmones įdėdami vietoj kaip "YouTube" nuorodą. Ir iš tikrųjų, bet kuriuo metu jūs kada nors nuėjo į "YouTube", ir leiskite man iš tikrųjų netyčia Rick Roll save čia. Taigi Rick Roll. Taigi Rick roll-- aš ruošiuosi eiti čia. 

[Muzikos grojimo] 

Gerai, vienas žmogus patiko, kad. Taigi pastebėti visą šį laiką, jeigu jūs spustelėkite Share nuorodą, jums žinoma gauti URL, jūs iš tikrųjų galite įdėti į elektroninį paštą arba teismo paveikslėlio arba problema nustatyti arba šliaužiklio. Ir dabar, jei aš vietoj spustelėkite Įterpti, pastebėti, kad visą šį laiką, ši medžiaga buvo ten. Aš ruošiuosi eiti į priekį ir nukopijuokite tai. 

Ir tik todėl mes galime matyti geriau, aš ketina įklijuokite jį į savo teksto redaktoriumi. Atkreipkite dėmesį, kad tai, ką Pagrindinis "YouTube" buvo sakau. Kiekvieną kartą, kai apsilankote Pagrindinis "YouTube" vaizdo, jei jums norite įterpti ant vaizdo jūsų Interneto puslapis, tiesiog paimti tai. Taigi, šis yra dar vienas HTML tegus vadinamas iframe. Arba in linijos rėmo. Taigi ji taip pat atrodo šiek tiek daugiau sudėtingesnė nei visi kiti. Taigi paaiškėja, kad vaizdas Tag ir matyt iframe žymė imtis, kas yra vadinama atributai. 

Ir tai yra dar gabalas sintaksė HTML. Be tag 's vardas, atviras laikiklis žymos pavadinimas, Jūs galite kontroliuoti žyma elgesį turėdami visa krūva atributu lygus vertę. Pavadinimas lygus vertę. Ir taip, pavyzdžiui, YouTube mums jei norite šio vaizdo plotį būti 420 pikselių ir aukštis būti 315 pikselių, tai kaip jums išreikšti tai HTML. 

Vaizdo įrašo šaltinis vyksta būti, kad ilgai "YouTube" URL ir tada kai kurių kitų dalykų kaip rėmas siena yra nulis, kad tikriausiai reiškia, kad yra ne aplink dalykas sienos. Leiskite visą ekraną tikriausiai tai reiškia, kad vartotojas gali paspausti mygtuką ir iš tikrųjų visą ekraną vaizdo. Taigi, jei aš tikrai noriu būti Įspūdingas čia Rick dot HTML, o ne naudoti vaizdo žymeles, tegul me ištrinti, kad vietoj pasta tai. Ir dabar perkraukite puslapį. Ir dabar čia mes einame vėl. Gerai, kad yra pakankamai. Visos teisės taip bandysiu sunku ne kartą tai padaryti. Taigi, kas yra kai kurie iš čia takeaways? Taigi HTML, bjaurus kaip ir šių tinklalapių yra, iš tiesų yra gana paprasta. Tai nėra programavimo kalba. Ji neturi funkcijas. Ji neturi kilpas. Ji neturi sąlygas. Visa tai turi, yra dešimtys Įvairios žymės, kurių kiekvienas turi nulį ar daugiau atributų. Ir iš tiesų, kas smagu apie HTML pradėsite pasinerti į yra tai, kad tai labai save Pojętny. 

Visa tai trunka supratimas bendrojo sistemą HTML. Kas yra žyma, kas yra atributas, kaip jūs iš tikrųjų konfigūruoti žiniatinklio puslapį taip. Ir visa kita yra tikrai rezultatas ieško iki internetinėje nuoroda ar "Google" paiešką, kaip tai padaryti kai technika, arba kaip mes matėme, ieško "Facebook" šaltinio kodas, žiūri svetainėje kad jums patinka ne tai kodo ir suprasti, kaip ten kūrėjai iš tikrųjų padėjo dalykus. 

Taigi, mes galime padaryti vaizdus, ​​taip pat. Ir iš tiesų, mes tai padarėme prieš momentas. Leiskite man eiti į priekį ir tiesiog parodyti jums. Štai keletas kodo pavyzdys. Jei jūs kada nors norite matyti pikto katė. Taigi pastebėti, kad aš galiu turėti paveikslėlio žymelę čia. Ir aš turiu virš jo komentarą. Aš turiu alternatyvą tekstas prieinamumą. Taigi tas, kuris yra naudojant ekraną Skaitytojas sumetimais žvilgsnio iš tikrųjų gali tada turi savo ekrano skaitytuvą pasakyti pikto katė. Nes jei jie negali matyti vaizdą, jie gali bent jau savo kompiuterį pasakykite jiems žodžiu kas tai yra. Ir dėl šios bylos šaltinis yra cat.jpeg. Taigi iš tiesų, jei aš tikrai norėjau gauti protingas, ką galėčiau turėti done-- Pažadu ne eiti į Rick Astley, todėl Aš ruošiuosi Google katės vietoj. Ir jei aš einu į Google Images čia, ir mes prielaidą, kad tai yra mano katė nuotrauka. 

Tarkime, kad turiu kontrolė paspaudėte arba į dešinę paspausti ant to, atsitiktinai Creepy. Ir cat.jpeg aš ruošiuosi taupyti ant mano darbastalio. Leiskite man dabar grįžti į debesis 9 d. Atkreipkite dėmesį, kad čia aš galiu eiti įkelti vietinius failus. Ir jei aš patraukti šio failą, cat.jpeg, pranešimas kad galiu vilkite jį ir upuść jį į debesis 9 ir jis ketina klykauti ne man čia. 

Kadangi mes jau ve davė jums cat.jpeg failą, bet tai super lengva patraukti nuotrauką, kad jūs paimta iš "Facebook" ar "Flickr" ar panašiai ir iš tikrųjų vilkite ir upuść jį į debesis 9 ir tada padaryti jį dalis savo asmeninį svetainės ar problema nustatyti septynis ar aštuonis, kaip mes netrukus pamatysite. Ir tada, kai jūs pagaliau apsilankyti, kad katė, darant prielaidą, kad aš atsisiuntė tą pačią katę, pranešimas that-- tai buvo žavinga. 

Ką galėtumėte pamatyti yra kažkas panašaus į šį veidą čia. Taigi failus, kad jūs nuoroda per tinklalapį gali būti arba vietinio savo sąskaitą arba nuotolinio ant kitu serveriu kaip ir iš Rick atveju Astley nuotrauka šiek tiek prieš. Taigi, kur else-- ką dar galime padaryti čia? Taigi tegul šiuo išvaizdą. Jūs nežinote, kas tipo kietas? 

Mes iki šiol buvo padaryti labai statiniai interneto puslapiai. Noriu paįvairinimui taip. Noriu padaryti savo paieškos variklį. Taigi, norint padaryti paieškos variklį, tegul eiti į priekį ir pradėti tai daryti. Aš ruošiuosi eiti į priekį ir kurti naujas failas vadinamas search.html. Ir mes prefabed versijas internete. Oi. Negalima įklijuokite į savo terminalo lange. Surenkami versijos internete. Ir aš ruošiuosi pradėti taip. Taigi čia pradžios failas vadinamas search.html. Aš ruošiuosi jį išsaugoti šiandien šaltinis katalogas. Aš ruošiuosi skambinti šią paiešką. Tiesą sakant, mes padaryti tai geriau. CS50 Paieška ir iš tikrųjų jis markės. Ir dabar, aš ruošiuosi pasakyti kažkas panašaus H1 CS50 paieška. Ir tada žemyn čia, H2 netrukus. Ir tik Priminti, H1 ir H2 galvoje tai, ką atitinkamai? 

Taip, toks didelis ir drąsus, ir nėra tokie dideli, bet vis tiek paryškinti. Taigi, jei aš išsaugoti tai ir eiti per čia pažiūrėkime failų search.html. Gerai, o tai vienas yra right-- [nesigirdi]. Budėjimo. Davidas yra sutrikę. Oi, tai tiesiai ten. Dovydo idiotas. GERAI. Taigi ji yra. Taigi CS50 paieška netrukus. Taigi dabar, tegul sintetinti ką mes padarėme praėjusią savaitę. 

Kur mes kalbėjome apie žemesnio lygio mechanika HTTP. Ir šių naujų idėjų HTML, kuris yra tik Tai žymėjimo kalba, kur jūs pasakyti naršyklę, ką daryti ir įgyvendinti savo paieškos variklį. Taigi, o ne tik sakydamas netrukus, aš ketina pristatyti kažkas vadinamas formos žymą. Ir šią formą, aš ruošiuosi turi kažką panašaus į įvesties lauką. 

Ir šio įėjimo vardas laukas, aš ruošiuosi jį vadiname Q. Ir šio įvesties lauko tipas Aš ruošiuosi pasakyti tik "tekstas". Ir teksto laukas, kaip mes pamatyti, yra tik teksto laukelis. Ir todėl ji nėra jausmas čia, kad nieko viduje ji šiuo metu. Ir todėl aš tiesiog vyksta uždaryti žymą, kad Persiųsti velniop teisę pati žyma. Ir tada aš ruošiuosi turi vieną kitą įvestį. Įėjimo tipas lygus pateikti. Ir tada aš ruošiuosi uždaryti šį vieną per daug. 

Ir dabar aš ruošiuosi grįžti čia. Ir jau matome, nors gana negraži, aš pateko į pradžią my own paieškos puslapis čia. Tiesą sakant, leiskite man pabandyti išvalyti tai iki šiek tiek. Pasirodo, kad dėl įvesties čia, aš gali turėti kitas atributas vadinamas vietos rezervavimo. Ir aš galėčiau pamatyti kažką panašaus į žodžius, arba tiksliau, užklausos q. 

Ir pastebėsite, dabar turiu Tai iš pilkojo tekstą natūra kad dingsta kaip kai tik aš pradedu rašyti, bet tai tikriausiai kažkas mačiau kitose interneto svetainėse. I do not really like mygtuką Pateikti. Taigi, aš iš tikrųjų ketiname skiria Mygtuką "Siųsti" vertė yra paieškai. Ir dabar, jei aš perkrauti, pastebėsite, kad Mano mygtuką tampa pavadintas paieška. Žinote, aš tikrai ne kaip logotipu čia. Taigi "Google" Šrifto generatorius. 

Noriu paįvairinti tai iki toliau. Taigi CS50 paieška. Leiskite sukurti savo logotipą. Tai atrodo gražus. Taigi dabar leiskite man išsaugoti tai as-- ateiti. Kur tai vyksta? Ten. GERAI. Vėl ją. Išsaugoti kaip. Kvailas naršyklių. Budėjimo, mes ketiname išspręsti šią problemą kartą ir visiems laikams. Čia mes eiti. Gerai. Atsiprašau. Off dieną. Dabar tai yra funky. Išeiti per visą ekraną. Gerai. 

Dabar, kaip ir normalus asmuo, Save Image As. Logo.gif. Dabar aš ruošiuosi eiti į CS50IDE ir Aš ruošiuosi tiesiog patraukti logotipą, Aš ruošiuosi vilkite jį į mano šaltinis septyni katalogas, failas jau egzistuoja, man viskas gerai su tuo. Taigi, aš ruošiuosi jį pakeisti nes aš jau turėjo. Ir dabar kaip man atsikratyti šio? 

Vykime į priekį čia ir daryti Image Source lygus Logo.gif. Uždaryti šį. Išsaugoti. Ir dabar, jei aš einu atgal į mano paieška puslapis, dabar jis ieško gana gera. Visos teisės, todėl ji turi ne gana padaryta nieko naudingo. Tiesą sakant, leiskite man pabandyti ieškoti Katinas ir pamatyti, kas atsitiks. Katės. Velnias. Tai ne tik dirbti, matyt. Taigi, kas yra svarbiausia gabalas kad trūksta čia? 

Teisė, net jei jūs nežinote jokio HTML, Aš pradėjau ženklinimas ragelį formą ir aš jį papasakojo, kaip gauti žaliavas, man teksto laukelį ir pateikti mygtuką, kas gabalas yra akivaizdžiai trūksta? Tarkime, mes norime iš tikrųjų gauti šis dalykas veikia tinkamai. Ką turime daryti? Mes turime poreikį įgyvendinti atgal pabaigoje duomenų arba paieškos sistema pati, ir kad ketina imtis visai daug laiko, tiesą sakant. 

Taigi prisiminti, ką mes padarėme, paskutinį kartą. Taigi, jei jūs ieškote kažko "Google" ir jūs iš anksto išjungta, Prisiminkite, momentiniai paieška. Taigi leiskite man kreiptis, kad ne taip, kad tai iš tiesų elgiasi kaip vyresnio mokyklinio naršyklėje jei aš dabar ieškoti kažką panašaus katėms prisiminti ką URL atrodo. Tai gana paslaptingas. Tačiau integruotas ten, Prisiminkite, yra velniop paieška. Klaustukas Q yra lygus kates. 

Ir tai atrodytų, kad mane visa krūva paieškos rezultatuose. Taigi jūs žinote, ką aš ruošiuosi daryti? Aš ruošiuosi skolintis Google tik minutę. Aš ruošiuosi eiti per čia, ir aš ruošiuosi pasakyti kad šis formuoja veiksmų arba paskirties, taip sakant, turėtų tiesiog būti "Google". Ir metodas norėjau į naudojimo bus gauti. 

Taigi, kas yra veiksmas? Veiksmas yra keistai pavadintas, bet kad tik reiškia, kas ketina dirbti tokią formą veiksmų? Kai aš spustelėkite Ieškoti, kur Jeigu gautas rezultatas eiti? Ir jei aš dabar grįžti į savo forma čia ir perkraukite savo tinklalapį ir dabar ieškoti kažko kaip šuo, pastebėsite dabar Aš vėl įgyvendinti "Google". Teisė? 

Jei aš noriu ieškoti kažko kitur, ji dirba ne tik šunims, ji taip pat dirba katėms. Ji taip pat dirba už CS50. Ir gerai, kad tai tik pagal whelming, ar ne? Viskas gerai, bet ji iš tikrųjų veikia. Taigi, kas iš tikrųjų vyksta? Taigi aš mokė savo naršyklę, naudojant HTML, imtis įvestį iš naudotojo ir iš tikrųjų atsiunčia tokią įvestį prie nuotolinio serverio naudojant HTTP. 

Ir todėl, kad mano naršyklė supranta, HTTP, ji iš tikrųjų statyti, kad ką URL Aš galų gale per savo naršyklėje, pastebėti, kas atsitinka, kai aš ieškojau šuo. Jei aš spustelėkite "Ieškoti" pastebėti, kad URL keičia kaip aš skirtas į google.com/search~~V užklausa lygus šunį. Ir tai todėl, kad formos žino, dėl to, kad būdas yra gauti, tiesiog pridėkite ją į tą URL ten. 

Dabar šie tinklalapiai yra dar negraži. Taigi leiskite pristatyti vienas kitas gabalas sintaksė jei mes galime šiandien. Ir tai yra kažkas, žinoma kaip pakopinių stilių. Taigi leiskite man pažvelgti Šis pavyzdys čia ir pamatyti jei mes galime numanyti, kas vyksta. Tai CSS0.html. Ir tai, kur viskas gauti šiek tiek negraži. Nes, deja, atsižvelgiant į interneto pasaulyje, HTML vien negali daryti viską. Ir todėl, jei norite Stilizuoti savo tinklalapį, jūs iš tikrųjų reikia sutelkti dėmesį į Estetika kitaip. Taigi čia turiu mano interneto kūną puslapis, kurio viduje yra didelis skyrius. Ir div tiesiog reiškia padalinys. Taigi, tai tarsi dalį, tačiau ji neturi tas pačias semantiką iš teksto dalį. 

Tai tiesiog reiškia, į naršyklė, čia ateina didelis stačiakampis regionas mano interneto puslapis, noriu ją apdoroti specialiai. Dabar, linija 21 yra kur, kad DIV prasideda. Ir tik spėti. Kas yra linija 21 d poveikis Kitos puslapio turinį? Centravimo ją. Tai viskas. Taigi mes nematėme daug kelią iš tikrųjų centravimo tekstą. 

Tiesą sakant, mano paieškos, skirtingai nei faktinio Google, buvo viskas pateisinama nei į kairę. Ir todėl dabar atitinka 21, aš sakau, ei naršyklė, sukurti puslapio padalinys. Tiesiog man didelis, nematomą stačiakampį. Štai kaip aš noriu galvoti apie tinklalapį. Ir tada Stilizuoti jį taip. Viduje iš tų kabučių, dabar yra antroji kalba, kad mes pristatėme šiandien vadinami pakopinių stilių. Laimei, ji taip pat nėra programavimo kalba, todėl jis labai ribotas savo sintaksę, bet taip pat labai ribotas jos funkcionalumą o HTML yra visa informacija apie ženklinimo up tinklalapio duomenis ir tinklalapio struktūra. CSS yra paprastai apie paskutinės mylios, estetika, gauti dydį ir spalvą, o vieta tiksliai tiesiai į tinklalapį. Ir iš tiesų, jis yra suformuotas su pagrindiniais vertės poromis. 

Kaip ši, teksto nuosavybė suderinti, po kurio dedamas dvitaškis, o po to, kad vertės turtas, kuris šiuo atveju yra centras. Ir dabar pastebės galite sudėlioti šiuos dalykus. Jei aš norėjau viską, kad Aš pabrėžė būti orientuotas, Štai kodėl aš turiu liniją 21 ir atitinkamoje eilutėje 31. Bet manau, dabar noriu pasakyti Jonui Harvardo, kviečiame mano pagrindiniame puslapyje. 

Autorinės teisės simbolis Jonas Harvardo. Ir manau, noriu pirma tie linijos turi būti gana didelis. 36 taškų. Taigi, kad padorus dydis. Ir aš norėjau savo svorį bus paryškinti. Bet tada toliau, kad Noriu mažesnį tekstą. Ir toliau, kad aš noriu dar mažesnis tekstas. Atsiprašau. Šiandien jaučiasi off dieną. 

Taigi, dabar, ką aš darau išreikšti tai? Čia on-line 22 yra įterptinis DIV ar įdėtos div, jei bus. Jis taip pat turi savo stilių žymą. Aš nurodyti šrifto dydį 36. Aš nurodyti šrifto svorį paryškinti. Žemyn čia, aš tik nurodyti 24 taškų. Ir, pagaliau, pagal 28, galiu nurodyti 12. Taigi tik kaip greitai normalumas patikrinti ir kaip žmogus, skaitant tai, kurie žodžiai ekrane yra tikrųjų ketiname būti drąsus? Kuris linijos yra iš tikrųjų drąsus? 

Tiesiog Jonas Harvardo. Teisė? Nes kaip linija 22 sako hey naršyklė, čia Puslapio padalinys. Padaryti šrifto dydį 36 punktas. Padaryti šrifto svoris paryškinti. Kaip tik jums pasiekti atitinkama pabaiga žymė ar uždara tegus linija 24 Tai reiškia, ei naršyklė, nustoti daryti kokia ji yra, darai. Ir pranešimas, kad būtų aišku, nors linija 22 yra visų šių atributų kaip stilius, kai jūs uždaryti tag line 24 jūs tik paminėti TAG vardą. 

Jūs neturite pakartoti žodį stilių arba nieko, kad viduje tų kabučių. Ir todėl, jei žiūriu tai dabar savo naršyklėje, galime imtis Žvilgsnis į galutinį rezultatą. Leisk man eiti į priekį į šį failą, kuris yra CSS 0. Ir tai vis dar gana paprastas, bet vis gana įdomi. Tačiau paaiškėja, ten kiti dalykai, ką galiu padaryti čia ir tuo priėmimo rizikos Tai visiškai šlykštus, Nuoroda Čia, kad mano organas savo tinklalapį, Galiu padaryti kažką juokinga kaip bg arba fono spalvą. 

Ir greitai, kas yra jūsų mėgstamiausia spalva? Žalia aš girdėjau. Gerai. Taigi dabar, jei aš paspauskite Perkrauti dabar turime žalią tinklalapį. Gerai, kad tai nėra blogai. Ir dabar, jei noriu, kad tai tikrai kietas, aš galiu padaryti, kad mano teksto spalva net raudona. Taigi pažiūrėkime, ką tai atrodo. Dabar jis ieško gana gera. Ir žemyn čia, jei jūs tikrai nori, kad netvarka su žmogumi arba jei norite, kad būtų vienas iš tų žmonių, kurie bando apgauti jus į apsilankę internete puslapis, nes jie jau apgaulė "Google" į mąstymo ten visa krūva iš raktažodžiai like-- pažiūrėkime, perkraukite puslapį. Kur jam eiti? Ir ten jis su mumis. Gerai. Taigi, aš tai sakau kaip panaikinti, mes kalbėti apie šią medžiagą per kelias savaites kai kalbame apie saugumas, jei jūs iš tikrųjų dėti visa kekių Raktiniai žodžiai į tinklalapį, net jei jie nėra matomas iki A žmogaus, kažkas kaip Google, žinoma, vis dar gali iš tikrųjų rasti šią. Gerai, kad gana šlykštus gana greitai. 

Ir iš tiesų, tai dar ne viskas kad daug skirtingai mano paties interneto puslapis kaip bakalauro, kuri Aš pradėjau "Google" paiešką aplink rasti senesnės versijos mano senas svetaines. Tai buvo gana blogai. Tiesą sakant, aš rasti vienas prieš klasę. Tačiau yra dar blogiau ten. Tai, matyt, buvo mano puslapis atgal į 1996 m. Matyt aš maniau jis buvo tikslinga paklausti žmonių savo vardą prieš jie galėtų iš tikrųjų matyti mano tinklalapį. 

Ir tada aš juos parodė kažkas kvailas, tikriausiai. Aš atkasti daugiau kitą kartą. Bet dabar, tegul apsvarstyti dizaino tiek. Mes kalbėjome apie stilių. Ir šį puslapį todėl toli ir beveik viską parašiau yra gana švarus stilistiškai. Bet kas apie dizainą? Na, ten atleidimo iš darbo partija į tai, ką aš jau čia darai. 

Minėjau žodį spalva pora vietų. Minėjau šrifto dydį kurį pora vietos ir paryškinti pora vietų. Ir iš esmės, aš co susimaišymo dvi kalbas. Aš turiu HTML su mano žodžius ir mano atributus ir tada visi staiga, tarp kabučių, turiu antroji kalba šiandien vadinamas CSS, kuris vėl, tik jie rakto poros ar šios savybės atskirti dvitaškius. 

Pasirodo, kad daug kaip C, kur mes gali pradėti veiksnys iš kai kodą į header files, taip mes galime padaryti tą patį HTML. Ir link, kad žingsnis yra taip. Atkreipkite dėmesį, kad ši versija, CSS1.html yra struktūriškai tą patį tinklalapį. Taigi aš turiu visa krūva nuo div us, bet šį kartą, aš Dotarłeś atsikratyti vyniotuvo kaip pamatysite DIV. 

Ir aš Atsižvelgiant į šiuos tris DIV-ų viršuje, viduryje ir apačioje, unikalūs identifikatoriai. Tai yra gražus, nes iki suteikiant šiuos padalinius Į puslapio unikalių identifikatorių, Galiu nuoroda juos kitur. Kur? Na, leiskite man slinkite aukštyn. Ir iki šiol, bet kuriuo metu mes pažvelgė tuo tinklalapio galvos, kas tik tegus mes turėjome iš tinklalapio galva? Šiek tiek garsiau. Tiesiog pavadinimas iki šiol. Tačiau paaiškėja, ten keletas kitų dalykų, jūs galite įdėti ten, vienas iš ji vadinama stiliaus tag. Taigi momentas prieš, mes pažvelgė ne stiliaus atributas. Pasirodo, ten stilius žymė. Jis priklauso viduje iš tinklalapio vadovas. Ir dabar pastebėsite, ką darau. Turiu viduje tai stilius žyma taip. Aš tiesiog paminėti on-line 20 d Pavadinimas žymos, kad aš noriu Stilizuoti. 

Tada aš turiu atvirą garbanotas petnešomis ir uždarytas garbanotas petnešomis. Taigi panaši dvasia C, tačiau vėl, tai yra ne funkcija, tai tik sintaksinė detalė čia. Ir tada, žinoma, aš sakau naršyklė, ei naršyklė, kad visą kūną puslapio turėti teksto lygiavimą centre. Ir tai sako taip. Ei naršyklė, jei matote HTML elementas arba tag puslapio, turi unikalų identifikatorių viršuje, taip maišos simbolis čia tiesiog reiškia, Unikalus idėja viršuje, eiti į priekį ir kad jos šrifto dydį 36 ir jos šrifto svoris paryškinti. 

Ei naršyklė, elementas, kurio ID viduryje, kad ji 24 taškų. Ir ei naršyklė, jei matote idėja apačioje, kad ji 12 taškų. Galų gale efektas yra būtent Sam. Jei aš einu į CSS 1 puslapis atrodo taip pat. Bet mes esate link žingsnis šiek tiek geriau dizainas. Leiskite man dabar grįžti čia CSS2 ir pamatyti, ką dar aš padariau. 

Dabar puslapis yra tikrai, tikrai švarus. Iš tiesų, galiu tilptų visi ant puslapio turinys čia. Bet kas Nauja žymė aš pristatė, žinoma? Nuoroda. Ir tai ne pats geriausias vardas žymos, nes tai ne ta prasme, nurodo kad žinome, bet tai reiškia, kitu failo nuorodą. Tai lyg aštrūs įtraukti į C 

Tai yra HTML būdas pasakyti ei naršyklę, eiti gauti turinio failas vadinamas css2.css. Santykiai, man yra tai, kad stiliaus lapas. Ir iš tiesų, tai, ką vienas iš S 's pakopinių stilių priemonėmis. Tai stilių. Tai tiesiog tekstas failas, kuriame yra visa krūva turtą. Tai visa krūva stilių kad norite kreiptis į puslapio. 

Ir todėl tai, matyt, yra nuoroda į antrą failą. Ir jei aš atidarau, kad CSS2.css, pastebėti, kad viskas, ką aš padariau yra nukopijuoti ir įklijuoti visus tai į šį failą. Ir dabar, net jei jūs niekada prieš koduojami šią medžiagą, tik mano su patarlė inžinerijos kepurė apie, kodėl ar tai geriau dizainas tikriausiai? Faktoringas tuos CSS savybių, jų išleidimą į savo failą. Nors mes išspręsti šią problema kaip penkias minutes prieš į pirmą versiją. 

Mes ne pagerėjo puslapis stilistiškai, tai tik geriau Dizainas tam tikra prasme. Kodėl jūs manote? Taip. Daugiau lanksti kaip? Taip. Taigi, jei norite eiti atgal ir pakeisti dalykus, Dabar jūs turite vieną vietą kur jūs galite pakeisti dalykus. Ir iš tiesų, nors kaip problema nustatyti septyni, kur mes įgyvendinti Stock Trading svetainė, kad ketina turėti visa krūva puslapių. Ir tai būtų tikrai erzina, jei jūs nuspręsite, HM I do not really like 24 taškų, aš noriu kad ji būtų 28 taškų arba šiek tiek didesnis. Ir tada turi padaryti Pasaulinė rasti ir pakeisti arba atidaryti visus jūsų svetainės failus tiesiog iš tiesų pakeisti vieną reikšmę. Faktoringo iš šių stilių į vieną centrinę vietą, dabar galite atidaryti vieną tekstinį failą į CS50IDE į bet kurią programą, jį pakeisti, išsaugokite jį ir padariau. Jūs dauginami tie pokyčiai visur. Ir kad būtų tas pats į dot h failą, taip pat. Todėl bet koks klausimai taip kas dėl šio sintaksę? Visos teisės, todėl mes padaryti viską, atrodo, išskyrus tikrųjų įgyvendinti hipersaitus. Ir todėl galime eiti į priekį ir tai padaryti. Leiskite man eiti į priekį ir sukurti naują failą čia. Aš ruošiuosi jį vadiname link.html, įdėti šiandienos kodą. 

Ir aš ruošiuosi daryti atvira laikiklis dok tipas HTML. Kaip panaikinti, šioje ne dalykas Top šis dok tipas deklaracija, tai tik viena, kad keista su šauktuko. Jūs tiesiog turite padaryti jį ten ir jis reiškia, kad mes naudojame HTML versija 5. Senesnės versijos kalba turėjo daug ilgiau įsipareigojimų, kad jums reikia įdėti ten. Taigi čia yra pavyzdys vadinamas ryšys. 

Man reikia mano tinklalapio kūną čia. Ir čia, a href nelygiaverčiai tarkim HTTP://www.disney.com ir mano mėgstamiausia svetainė, mes pasakyti. Visos teisės, todėl labai nežalingas, patogi puslapis. Jei aš dabar einu į savo katalogą čia išvardinti ir atverti link.html, turime hiper tekstą. 

Ir iš tikrųjų, tai yra, kur Į HTTP O ateina iš. Hiperteksto perdavimo protokolas apie perkelti tekstą kad turi nuorodas į kitus išteklius. Ir iš tiesų, čia yra pažįstamas, jei retro, mėlyna nurodo, kad jei paspaudėte, bus iš tikrųjų veda mane į Disney.com. Dabar, Oi, tai išeina greičiau. Gerai, kad dabar, kas yra kai iš šios pasekmės? 

Ir tiesą sakant, pasaulis prasideda gauti šiek tiek labiau susipažinę ir taip pat šiek tiek baisiau bet taip pat šiek tiek daugiau savarankiškai pateisinami, kai pradėsite suprasti šiuos dalykus. Kadangi šansai yra, kai kurie iš jūsų, jei jūs einate per Gmail šlamšto aplanką ar net pašto dėžutę, jūs tikriausiai šiokio elektroninio pašto natūra kad klausia jums pakeisti savo slaptažodis gal gal patikrinti PayPal įgaliojimai ar Plauktiņš. 

Ir iš tiesų, galbūt gavome kažkas, kad sako kaip spauskite čia pakeisti savo PayPal slaptažodį. Ir dabar, pastebėsite, jei tai ne Disney.com bet kaip badplace.com ir perkrauti, atkreipkite dėmesį, kad tekstas čia Galima sakyti, nieko apskritai. Ir iš tiesų, tai tik žodžiai. Kodėl aš iš tikrųjų super kenksminga ir pasakyti http://www.paypal.com. 

Spauskite čia pakeisti savo PayPal slaptažodis ir dabar perkraukite puslapį. Tai atrodo gana teisėtas, ar ne? Aš turiu galvoje, aš nebūtų spustelėkite žinutę, kad tiesiog sako tai. Bet pastebėsite dichotomiją čia. Ji sako www.paypal.com, ir iš tiesų, palauk, mes žinome, kad jūs norite Europos saugumo Š. Taigi dabar, eikite į www.paypal.com HTTPS bet jei jūs niekada padaryti prieš tai, do patekti į įpročio sklandė virš mažai Susiję puslapiai. Ir tai sunku pamatyti ekrane ten, ir tai dar ne viskas, kad lengviau čia. Bet kelią žemyn čia maža maža kampelis daro naršyklė tikrųjų pasakyti, kad mes ketiname į badplace.com vietoj PayPal.com. Dabar, kur mes ketiname daryti? Visi pavyzdžiai mes padarėme šiandien, mes sunkiai koduojami ir įvedėte rankiniu būdu. Internete yra neįtikėtinai neįdomu, kai jūs sunkiai kodą savo tinklalapius, kad medžiaga yra statinis ir niekada keičiasi. Žinoma, visi mūsų Mėgstamiausios svetainės šiandien ar tai "Gmail" ar "Twitter" arba "Facebook" ar bet kiti skaičius yra dinamiškas. Jie keičiasi atsakas į vartotojo įvestį kaip ir "Google" paieškos rezultatuose. 

Ir taip trečiadienį, ką mes darome, yra mes palikti HTML ir CSS įvedimas už mus ir mes savaime suprantama, kad dabar mes žinome ir mes pristatyti nauja programavimo kalba vadinamas PHP, kuri, kaip C ketina duoti mums galia iš tikrųjų sukurti programas kad patys generuoti išėjimo. Tokiu atveju, mes naudojate PHP generuoti dinamiškai interneto puslapiai, naudojantys šią naują kalbą. Taigi daugiau apie tai trečiadienį. Pasimatysime. 

[Muzikos grojimo]