[TÓNLIST spila] 

DAVID J MALAN: Þetta er CS50 og þetta er upphaf viku 7. Svo velkomin aftur. Og þú getur muna að í Heimadæmi fjórum, það var a hluti af a hrææta veiði fyrir nokkrum stórkostlegur verðlaun þar eftir að þú batna myndir af Starfsfólk bæði hér og í New Haven, þú varst áskorun til að finna eins og margir af þessir tölva vísindamenn og þú gætir. Og við höfum fengið allt fullt af uppgjöf. Hélt ég myndi deila fáir með þér hér í dag. 

Og við munum senda allar þessar netinu. En einkum, ég vildi vekja athygli þína to-- vel eitt, Sam var í alveg nokkrar af þeim almennt gera ráð fyrir svona. En það virðist sem eins af í morgun, sigurvegari var ákveðin einhver heitir Ken með 24 starfsfólks tekin á myndavél eða nokkrar fleiri þegar þú tekur inn reikningur margar starfsfólk á myndunum. Myndinni hér er Ken næsta til Maríu í ​​New Haven. 

Nú, Ken, þó, snýr út er hluti af horninu að ræða það er ekki enn gerst áður. Það kemur í ljós að það var ekki komið mér að setja smáletur í vanda sett fjögur sem segir að starfsmenn eru gjaldgengir fyrir stórkostlegur verðlaun vegna þess að Ken er að sjálfsögðu, einn af ljósmyndararnir á starfsfólk okkar. Nú, með því að segja, að hann upphaflega skrifaði mér að segja vinsamlegast ekki senda þessar myndir á netinu. Ég held að í stórum hluta vegna flestar myndirnar að þetta ljósmyndari tók líta a lítill eitthvað eins og þetta. Og þess háttar. 

En Ken langar mig að fullvissa þig að hann er mjög góður ljósmyndari, Hann er faglegur, hann tekur myndir sem eru ekki þoka, sem eru betri í fókus, og hann tók alveg nokkrar af okkar eigið starfsfólk. En frekar en bara að viðurkenna Ken, sem við héldum að við myndum gera er að fara í gegnum listann yfir Raunveruleg nemendur sem lögð fram. Og það kemur í ljós að Lance með 15 myndir sem í morgun var sigurvegari okkar. 

Og á myndinni hér er Lance með Colton, með Skaz, með sjálfum mér og með Sam. En þá kemur í ljós að frá og með 11:46, svo bara svolítið síðan, Ég fór aftur á netfangið mitt og fann sem við höfðum enn eitt uppgjöf af nemanda sem heitir Bonnie Hvers tölvupóst sagði bara þetta. Ekki að ljúga, ég er gera þetta á bekknum. Og þá halda áfram að hengja bara 14 myndir, einn feiminn Lance er 15. 

En í myndum Bonnie er, það kemur í út voru margar starfsmenn, Sam meðal þeirra, svo hvað við héldum að við myndi gera er að viðurkenna að báðir þessir. Svo í viðbót við að fá Dropbox rúm sem allir sem tóku þátt fær þessar tvær köflum mun einnig fá gott veitingamaður hádegismat fyrir þá og kafla þeirra Mates þetta kemur viku. Og svo þú munt heyra frá okkur, Lance og Bonnie, um það. Svo stór hamingjuóskir til þeirra. Nú, þeir sem myndu eins hádegismat almennt vita að CS50 hádegismat í Cambridge og New Haven er á föstudaginn. Fara á CS50 er vefsíða slash RSVP. Og nú orð á námskeiðum. Meira curricularly. Þannig að við erum að nálgast benda á önn þar sem þú ættir að byrja hugsa um lokaverkefni. Og í raun, í bara smá, mun Svonefnd fyrirfram tillögur stafað. Svo fyrirfram tillögur er ætlað að vera nokkuð lítil áhrif og í raun bara tækifæri fyrir þú að skrifa stutta athugasemd kennslu náungi þinn að apprise hann eða hana hvað þú ert að hugsa þér might vilja til að gera fyrir lokaverkefnið þitt. 

Nú, margir nemendur endað gera vefur undirstaða lokaverkefni. Og auðvitað, við erum bara nú í síðustu viku í þessu og víðar köfun í forritun á vefnum. Svo ekki að hafa áhyggjur ef þú hef ekki hugmynd um hvernig þú myndi byggja hugmyndir sem þú gætir hafa í huga. Þetta er í raun bara að neyða virka til að fá þig til að hugsa og tala með TF þinn um það. En til að hjálpa þér með það, og með lokaverkefni að lokum, veit að CS50 hefur hefð að bjóða námskeið. 

Og þetta eru valfrjáls, hendur á, eða fyrirlestur miðað tækifæri til að læra meira um efni sem smá viðbót við námskeiðið er kennsluáætlun, en engu að síður yndislegt efni til að keyra lokaverkefni. Og svo er þetta listi sem er CS50 starfsfólk hér í New Haven hafa komið upp með fyrir á þessu ári um IOS forritun, Android forritun, leikur þróun, og bunches af fleiri verkfæri og tungumál og aðferðir. 

Svo að hafa auga á heimasíðu CS50 er. Og í millitíðinni, ef þú vilt skrá áhuga þinn á eitthvað af þessu, fara til CS50 er slash skrá. Og við munum þá fylgja allt sem til daga og flugáætlanir og staðir og everything-- mest allt mun vera streyma og einnig í boði á eftirspurn eftir ef þú getur ekki í raun að gera það. Svo án frekari fjaðrafok, við horfið síðasta skipti með FÁ. 

Og þetta var eins og skilaboð sem var inni af the raunverulegur umslagi, muna, að við liðin frá leið til leið til að leið milli vefur flettitæki og vefur miðlara. Og að boðskapur horfði lítill eitthvað eins og þetta. Þetta var meira Bogagöng skilaboðin sem var í raun inni umslagi skrifað á blað sem Fyrsta lína segir bókstaflega, fá skástrik. 

Og rétt eins og andleg heilbrigði stöðva, hvað gerði rista tákna? Hvað þýðir rista meina þegar að biðja um vefsíðu? Þú biður um það allan tímann. Flest allir skipti sem þú heimsækir vefsíðu, þú í raun ekki að slá inn heiti skráarinnar. Þú sennilega bara að fara að Facebook.com, að slá inn, gmail.com, eða þess háttar. Og hvað þýðir rista tákna? Hvað skrá? Eða hvaða síðu, sérstaklega? 

Vísitalan, já. Svo sjálfgefna síðu. Þannig að ef þú tilgreinir ekki skrá nafn eins og við munum byrja að sjá, þú ert í raun bara að biðja gefa mér sjálfgefna síðu af Facebook eða gefa mér pósthólfið mitt eða gefa mér sjálfgefið síða fréttum á vefsíðu CNN eða þess háttar. Og miðlara bregst þá til að skilaboðin með eitthvað eins og þetta, að segja já, ég tala HTTP útgáfa 1.1. 

200, sem er staða númer sem við menn sjaldan alltaf að sjá því það er gott. Því það þýðir lagi, að beiðni barst og meðhöndlaðar á réttan hátt. Og efnisgerð virðist í svari er nokkuð oft, en ekki alltaf, texta. Og sérstaklega HTML. Og það er í raun þar sem við lítum á dag. 

Svo í raun, ég ætla að fara á undan og opna vafra. Ég ætla að nota Chrome, getur þú notað flest allir vafrann á næstu vikum til að koma. Við mælum með almennt Chrome vegna þess að það er sérstaklega gott fyrir forritara. Það fékk mikið af innbyggður í verkfæri sem gera það auðveldara að þróa ekki aðeins HTML og CSS, hlutir sem við munum byrja að tala um í dag, en einnig önnur tungumál eins og heilbrigður. 

Og ég ætla að fara á undan og fara to-- Ég ætla að stjórna smellur eða rétt smelltu einhvers staðar á vefsíðu. Og ég ætla að fara að skoða frumefni. Og ég ætla að fínstilla minn skjár bara svolítið hér. Leyfðu mér að færa þetta til botns. Svo er þetta það sem er kallað Króm Inspector. Svo er þetta eins og kembiforrit tól byggð í Chrome. 

Öll ykkar þegar hafa þetta ef þú hefur verið að nota Chrome. Og það gerir þér kleift að sjá hvað er að gerast á undir hetta sumra vefsíðu. Svo skulum við taka í raun líta á þetta eins og hér segir. Það hefur þannig fleiri möguleika og okkur er annt um í dag. En það er þessi flipa hérna. Elements, net, heimildir, tímalína, og sum önnur efni. Ég ætla að smella á Net um stund. 

Og það er svolítið yfirþyrmandi við fyrstu sýn hér. En það sem ég ætla að gera er að láta mér einfalda það svolítið. Ég ætla að kveikja á upptöku ljósið þannig að það er rautt. Og ég ætla að segja að varðveita þig inn. Og þetta er bara smá sem ég mynstrağur út tímanum sem er að fara að spara allt sem gerist í vafranum. Og nú ætla ég að fara að http://facebook.com. 

Reyndar, við skulum gera www gott mál, rista. Sláðu. Svo URL að margir af þú gætir hafa heimsótt. Og nú vefur Facebook síðu kemur upp á toppinn. Og þá er allt fullt af efni flaug með neðst. Og í raun, kemur í ljós að þegar þú heimsækir facebook.com, þú ert ekki bara að gera eitt HTTP beiðni, það kemur í ljós að fara til Facebook.com sendir 41 af þeim umslag, hvert með eigin FÁ beiðni hennar, eins og tilgreint er, að vísu á bak við skjáinn hér, neðst á skjánum, það gefur til kynna að, örugglega, minn Vafrinn gerði 41 beiðnir. 

Og alls, flytja það 861 kílóbæti og það tók fyrir sumir ástæða eins og margir eins og átta sekúndur að sækja allt það. Svo er það í raun svolítið skrýtið þessi síða Facebook myndi taka að lengi, en svo vera það í þessu tilfelli. Nú, allt þetta sem ég er ekki alveg sama um nema hæstur beiðni. Svo skulum við fara til þessa hérna og láta mig súmma út fyrir réttlátur a augnablik. 

Og láta mig stækka á þessu. Svo það sem ég hef gert á vinstri jafnvel þótt það er mikið að gerast hérna er ég hápunktur Facebook.com og þá eftir því að ég er að fletta niður, fletta niður, skruna niður, að biðja haus. Og þú munt sjá að Chrome er að sýna me meginatriðum innri innihald beiðninnar ég gerði. Það er ekki að forsníða í alveg sama leið, en eftir það er minnst á að fá, eftir því að það er minnst á her, Facebook.com, leið, eða rista, sem er skrá I óskað. 

Og þá ef ég skruna aftur upp, munum við í raun sjá að það Facebook aftur mér er öll þessi haus. Svo inni í því raunverulegur umslagi reyndar eru fullt af helstu gildi pör. Orð, tvípunktur, og þá gildi. Orð, tvípunktur og gildi. Þetta eru kallaðir haus. Og það er vegur meira smáatriði hér en við sama í raun um núna. 

En þetta er annað að seinast þarna niðri, fyrirvara að miðlara facebook.com er, reyndar sagði hér kemur smá texti HTML. Svo er þetta allt að segja að þegar þú biður vefur síðu úr vafranum til a miðlara, að netþjónn bregst með umslagi á eigin spýtur inni sem er texti. Með öðrum orðum, HTML. HyperText Markup Language. Sem er annað mál að við kynna dag að menn eða tölvur búa í því skyni að hrinda í framkvæmd vefsíðum. 

Sérstaklega, við skulum líta á þetta. Ég ætla að nú fara aftur á vefsvæðið Facebook. Og ég ætla bara að stjórn smellur eða hægrismelltu og smelltu á View Page Source. Og jafnvel ef þú notar ekki Chrome, IE getur gert þetta, Firefox getur gert þetta, Safari getur gert þetta, jafnvel þótt valmyndinni möguleikar getur litið svolítið öðruvísi. Og þetta er HTML sem Mark og Félagið á Facebook hafa skrifað. 

Og sameiginlega, þetta tungumál hér útfærir bláa og hvíta síðu sem við sáum áðan. Nú, þetta er svolítið yfirþyrmandi. En ef við lítum upp á efst til vinstri, við erum að fara að byrja að sjá nokkrar mynstur. Það lítur út eins og það er mikið þessara open angle bracket og þá er það þessi leitarorð HTML. Hér er annar opinn oddklofi og höfuð. 

Hér er, ef við skruna niður og niður og niður, ég er að fara á undan og reyna að leita að einhverju. Það leið yfir á hægri hér er opinn krappi líkami. Og muna frá síðustu sinn sem við lagt sem einföldustu vefsíðu að mönnum gæti skrifað gæti litið svolítið eitthvað eins og this. Open HTML tag, opinn höfuð tag, opinn titill tag, síðan lokað titill, lokað höfuð, opinn líkami tag, einhver texti, lokað líkama, lokað HTML. 

En hlé hér fyrir réttlátur a augnablik. Þetta númer, jafnvel ef þú hefur aldrei skrifað það áður en samt ekki alveg að skilja hvað er að gerast, lítur mjög vel út. Rétt, það er mjög hreinn. Það er mjög stylistically gott. A einhver fjöldi af skerðing og hvítt rúm. Facebook er ekki. Svo er Facebook hvers vegna svo mikið verra en ég á að skrifa HTML? Apparently. 

Rétt, þetta er eins og einn af fimm fyrir stíl. Það er sannfærandi ástæða fyrir þá að skera þessar horn. Allt í lagi, svo þeir vilja ekki að gera það auðveldara fyrir þig að lesa það. Svo í einhverjum skilningi, þá eru þeir obfuscating það, eins konar spæna það að minnsta kosti fagurfræðilega svo að það er erfiðara fyrir Myspace að fara og rífa burt þeirra Heimasíðan og HTML fyrir það. Það kemur í ljós að með áætlunum þó, þar á meðal Króm, við getum hreinsa þetta upp frábær auðveldlega. Svo það er ekki alveg það sem ástæðu. Hvað annað gæti verið orsök. Já. Já, hvítt rúm kostnaður gögn. Hvað meinarðu? Já, einmitt. Ef þú högg á TAB takkann mikið eða rúm bar, íhuga afleiðingar. Svo er hver lykill á lyklaborðinu sem [Inaudible] fulltrúa sem eitt bæti. 

Svo ætla að Mark eða einhverju devs þessa dagana hits rúm bara einu sinni í þessari HTML síðu sem táknar upphafssíðuna Facebook. Og Facebook hefur mikið notenda þessa dagana. Svo ætla að heimasíðunni Facebook er heimsótt af milljarð manns í dag. Og einhver á Facebook hefur högg the rúm bar bara einu sinni. 

Svo einn til viðbótar bæti, milljarð beiðnir, hversu miklu meira gögn Facebook flytja yfir netið vegna þess að einhver högg rúm á lyklaborðinu hans eða hennar? A milljarða bytes, eða einn gígabæti af gögn eru send frá Facebook netþjónum að fólk í kringum heimur fyrir neitun góður ástæða. Nú, það er bara eitt bil. 

Ímyndaðu þér ef við hreinsa raun þetta hlutur upp og grafin það og bætti a einhver fjöldi af hvítum rúm og Tab stafir og bil, þú endar útgjöld gígabæta, ef ekki Terra bytes meira pláss. Og svo frábær algeng í Raunveruleg heimur vefur þróun er að minify kóðann þinn. Og við munum að lokum sjá hvernig þú gætir gert þetta. 

En í dag, munum við byrja að skrifa kóða það er í raun læsileg með okkur mönnum. Það kemur í ljós, þó, ef þú ferð aftur að þetta tól í Króm Skoðið Element, áður, við vorum á Network flipann. Það kemur í ljós að ef þú ferð til þættir flipann, það sem þú sérð í raun er Króm nokkuð prentuð útgáfa af sama HTML. Þannig að við höfum deobfuscated það. Svo það er ekki passa fyrir tölvu. Og nú þú geta raunverulega smella í kring og byrja að sjá stigveldi sem er vefsíða. Svo skulum gera í raun þetta. Ég ætla að fara á undan og opna upp á Mac minn forrit sem heitir texti breyta. Og muna að þetta er bara frábær einfaldur texti program. Windows hefur notepad.exe. Og ég ætla að orðrétt tegund the hópur stuðningsmanna. Doc tegund HTML, opið krappi HTML, lokað krappi HTML, við höfum höfuð síðu hér, the endir af the höfuð síðu hér, titill verður eins, halló heimur. 

Og þá niður hér, þurfum við líkami vefsíðu. Lokað líkami. Og þá hér, halló heimur. Allt í lagi. Þannig að við höfum skrifað frábær fljótur vefsíðu. Ég ætla að vista hana sem hello.html á skjáborðið. My Mac er að fara að kvarta, hugsa það, bíddu í eina mínútu, þetta er textaskrá, gera þú vilt kalla það .txt? En nei, ég vil nota punktur HTML. 

Og þá er það gott ef ég réttlátur tvöfaldur smellur á þessa skrá, hello.html, hér er vefsíða mín. Því miður, ég er eina manneskjan í heiminum sem getur heimsótt þessa síðu núna. Vegna þess að þar er það lifandi virðist? Það er á Mac minn, ekki satt? Sem er gagnslaus. Eins og enginn í þessu herbergi hvað þá á internetinu geta í raun fara á þá síðu. Svo í dag, þurfum við að kynna annar þáttur. 

Og til að gera þetta, ég ætla að fara á undan og opna ský 9. Svo er ský 9 auðvitað ský undirstaða service-- CS50 IDE-- Það hefur alla vinnusvæði okkar gangi einhvers staðar á internetinu. Og það þýðir að allar skrár okkar eru aðgengileg almenningi nú þegar. Svo skulum við fara á undan og gera þetta. Ég ætla að fara á undan og búa til nýja skrá NCS50IDE. Ég ætla að spara það eins og áður sem hello.html og smellir á Vista. Og nú bara til að spara tíma, ég er að fara að fara á undan og afrita líma þennan kóða frekar en retype það. Og vista hana. Og svo nú hef ég a skrá sem heitir hello.html. En hvernig get ég í raun opna sem vefsíðu? Jæja, það kemur í ljós að byggð á CS50 IDE er ekki bara þýðanda eins clang og a aflúsara eins gdb og bunches af öðrum forritum, there 'raunverulega a fullur viðvaningur vefur framreiðslumaður hlaupandi innan CS50 IDE. 

Allir þér, það er að segja, hafa eigin vefþjón þinn. Og a vefur framreiðslumaður er bara stykki á hugbúnaði en tilgangur hennar í lífinu er að þjóna upp vefsíður. Að hlusta eftir beiðnum frá vafra og bregðast við með litlu raunverulegur umslag inni sem er efni sem ég hef skrifað. Svo er þetta vefur framreiðslumaður í raun frjáls og opinn uppspretta. Þar opinn uppspretta þýðir bara hugbúnaður sem einhver annar hefur skrifað að allir af okkur getur í raun sjá og sækja og jafnvel breyta kóðann. Og það er kallað Apache. 

Og við höfum gert það svolítið auðveldara að nota í CS50IDE því að kalla það Apache 50. Þannig að það getur í raun skilja eftirfarandi. Ég ætla að segja Apache 50 byrjun. Og þá er ég bara að fara að segja punktur. Og við sjáum nokkrar nokkuð yfirnáttúrulegt skilaboð orðatiltæki setja Apache skjal [? hópur?] heimili, Ubuntu, hvað sem er, rista vinnusvæði. Byrjar vefþjóni Apache 2 með góðum árangri. 

Svo löng saga stutt, ég hafa bara ýtt á hnapp og kveikt á vefþjóni sem er nú hlusta á internetinu á TCP höfn 80 í tilteknu heimilisfangi. Og það segir hér, og þetta mun breytast Byggt á notendanafni og öðrum þáttum, en taka nú ef ég smelli þessu, IDE50 punktur jharvard og svo og svo, eftir að allan þennan tíma á undanförnum vikur, þú might hafa tók eftir því að eiga notendanafnið þitt er felldur inn í topp hægri hendi horni CS50IDE. 

Og að í raun hafi verið allt þetta tímasetja heimilisfang þar sem þú getur heimsækja allar skrár í gegnum vefinn. Þangað til nú, það hefur ekki máli, vegna þess að í C, er yfirleitt vilja það gangi í flugstöðinni, ekki á vefnum. En í dag, byrjum við skrifa vefur undirstaða kóða sem við viljum aðgengileg á opinberum slóðum. Svo það sem ég ætla að gera er að smella á þessa slóð. 

Og eftir að ég sé nokkuð ljótur vísitölu skrá skráningu, en hvaða skrá stökk út á þig sennilega? Hello.html. Það er vegna þess að ég bjargaði skrá í vinnurými mínu. Og það sem ég hef sagt Apache vefþjón er að leita í vinnusvæði skrá Davíðs. Og láta einhver í heimurinn sjá þær skrár. 

Og reyndar, ef ég nú smelltu á hello.html, Ég sé innan þessa flipa einmitt þessi skrá. Nú taka, Cloud 9 er að gera eitthvað smá gagnlegt fyrir okkur. Innan CS50 IDE, eftir því að það er skyndilega heimilisfang bar. Það er vegna þess að jafnvel þó að við erum nota Chrome til að heimsækja CS50IDE, inni CS50IDE er eigin útgáfa af vafranum núna. Og svo frekar en flækja hlutina sem slík, Ég ætla að fara á undan og bara að afrita þessa slóð. Ég ætla að fara á undan og bara opna eigin Chrome gluggann minn. Þannig að það er engin galdur hér, engin CS50IDE. Ég ætla bara að fara að bókstaflega líma minn J Harvard URL og ýta á Enter. Og voila, nú er ég, og í orði, allir á internetinu, ef ég hef stillt heimildir á viðeigandi hátt, getur heimsótt þessa skrá. Og svo nú, ef ég sagði hello.html, Voila, það er ótrúlega underwhelming vefsíðu mína. Svo skulum gera a fljótur geðheilsu stöðva. Vegna þess að öll sem er huglæg sett upp. Og við höfum í raun ekki raunverulega Kennt hvernig á að skrifa HTML í sjálfu sér. Einhverjar spurningar svona langt á hvað er bara gerðist? Já. Er CS50 eiga þessar vefsíður? Í hvaða skilningi? Góð spurning. Svo nú CS50 er CS50.io. Við höfum reyndar keypt það lén. Og með því að eðli ykkur skrá þig inn CS50IDE, þú fá allt það sem er kallað undirlén. 

Svo IDE50-MALAN eða IDE50-Rob.CS50.io, sem er einstakt netfang þitt innan lén okkar. Svo að því er varðar að sjálfsögðu, þú hafa eigin netfangið þitt. En við höfum einfaldað hlutina með kaupa lénsendingu, CS50 punktur I / O og þá er allir aðrir inni um það, svo að segja. Og við munum koma aftur til að í nokkrar vikur líklega, sérstaklega á lokaverkefni tími, þegar sumir af þú might vilja til fá eigið lén nöfn. Það er í raun tiltölulega einfalt. Allt í lagi. Svo skulum nú gera þetta. Ég ætla að fara aftur í CS50IDE, þar skrá minn núna, hello.html, er ekki allt sem áhugavert. Mig langar til að gera eitthvað svolítið betur en það. Þannig að ég ætla að gera eitthvað svona. Leyfðu mér að opna paragraphs.html. Þannig að þetta er skrá sem ég skrifaði í fyrirfram. Á toppur af það, eins og alltaf, höfum við athugasemdir. En í HTML, athugasemdir líta svolítið öðruvísi. Á línu þrjú og línu 14, þú sjá setningafræði fyrir byrjun athugasemd og enda umsögn. 

En ekkert af efni í milli mála virkni. Það er bara í huga að a manna hvað er að gerast hér. Og rétt eins og a fljótur geðheilsu athuga, hvort ég skruna niður, hvað er augljóst nýr tag sem við höfum kynnt? Merkin svona langt við höfum séð eru opin krappi HTML, höfuð, titill, og líkami. En hvað er augljóslega nýtt núna? 

Já, svo bls. P tag eða tag lið. Og þá er ég að láni bara smá sjálfgefið Latin texta til að mynda málsgreinar mínum. Því hvað ég vildi að sýna er hvernig þú gætir tákna málsgreinum texta í HTML. Og svo það sem er að byrja að gerast hér er að það er nú þegar mynstur þróa. Og láta mig fara á undan og gera þetta. Leyfðu mér að snúa fyrst burt Apache. Og ég ætla að segja það til að byrja sig aftur inni uppspretta dag sjö m skrá. Svo að ég hef aðgang að öllu. 

Og nú, ef ég fer aftur til þessari skrá skráningu, eftir ég sjá alla skrána frá því í dag. Og þú munt sjá í Næsta vandamál setja, við munum Þú færð leiðbeiningar fyrir að gera nákvæmlega þetta. Ef ég opna paragraphs.html, þetta gæti eins vel líta út eins og forritunarmál að þér ef þú talar ekki eða lesa latínu. En þetta er aðeins þremur liðum texta sem eru merktir upp í HTML. 

Og taka málsgrein hlé á milli þeirra. Vegna þess að það kemur í ljós, og jafnvel þó að þú gæti verið hneigðist til að gera þetta, en í hinum raunverulega heimi, ef þú vilt setja línuna hlé milli hluta, þú gætir einfaldlega gera þetta og högg Vista. Og nú, ef ég endurhlaða hér, tilkynning að allt dofnar bara saman í aðeins eitt Blob texta. Vegna HTML er góður af heimsk tungumáli. 

Því er ætlað að nota á þann leið að vafrinn mun aðeins gera sérstaklega hvað þú segir það að gera. Svo ef þú segir ekki það gefa mér nýja málsgrein, þú ert ekki að fara að sjá nýja málsgrein. Og í raun, hvað Vafrinn er að fara að gera er jafnvel ef þú högg inn, skulum segja aftur og aftur og aftur, færa textann leið niður á skjánum og vista síðan og þá endurhlaða, vafrinn er að fara að hrynja öll þessi hvítu plássi í aðeins einu, sýnilega bil. Allt í lagi. Svo er til að ákvæðið tag. Og svo hvað er að venju sem er að þróa hér? Jæja, það virðist vera raunin að HTML er allt um að byrja á merki og endar merki. Og hvað er tag? Jæja, það er bara klumpur af setningafræði. Open krappi, leitarorð, lokað krappi, er tag. Eða byrja tag. Og svo þegar þú ert gert að tjá þig, eins og í þú ert búinn með lið, þú gerir svo að segja hið gagnstæða. En hið gagnstæða er ekki alveg afturábak. 

Þú forskeytið einfaldlega sama tag er nafn með skástrik eins og þetta. Allt í lagi. Svo ekki allt sem spennandi. Og í raun, við erum ekki að gera vefur allt að meira áhugavert. Hvað ef ég vil gera það stærri og djörf? Svo kemur í ljós að hér er dæmi í headings.html, þar á líkama mínum, Ég hef fengið H1 tag, h2, h3, fjögur, fimm, eða sex, sem allt virðast nokkuð yfirnáttúrulegt. En ef ég fer að opna þetta dæmi, við skulum taka a líta. Headings.html. 

Svo vafrar sjálfgefið getur gefið þér texta það er stór og djörf af ólíkum stærðum. H1 er stór. H6 er minni og þá allt annað á milli. Svo er það áhugavert en samt í raun ekki vefur sem ég veit. Hvað ef við viljum ég hef eitthvað eins lista. . Svo hér er Doppulisti af þrír húsa Harvard. 

Hvernig fóruð þér að gera þetta? Jæja, taka a líta á list.html. Og hér, sjáum við smá funkiness en við skulum íhuga hvað er að gerast. Svo miðað við það sem þú hefur bara séð, UL stendur fyrir óraðaða lista. Óraðaðan lista bara þýðir áherslumerktur. Það er engin númer. Það er líka eitthvað sem nefnist pantaði lista, sem er OL á merkinu. Þá LI, listi atriði er allt það þýðir. 

Og svo það sjálfkrafa tölur allt fyrir þig. En aftur, öll skerðing mín og hvítt rúm er bara mín vegna. Vafrinn er ekki í raun að fara að kæra. Svo jafnvel þó að þú gætir ekki gera þetta, bara til að vera skýr, þú ættir ekki að jafna þó vafrinn mun enn vera fær um að skilja það bara fínt. Ég er hitting endurræsingu í mínum vafra, ég smella endurhlaða og engin breyting er að gerast vegna þess að vafrinn enn gera nákvæmlega það sem ég segja það að gera. 

Allt í lagi. Svo er þetta allt bara texti. Nú skulum gera eitthvað meira áhugavert. Ég ætla að fara á undan og láni sumir af þessum HTML. Ég ætla að fara á undan og búa til nýja skrá hér. Og við munum kalla þetta rick.html. Við höfum óhóflega notað eitthvað kallað Rick rúlla í þetta flokki á þessu ári, ég veit ekki, það gerðist bara lífrænt. 

Og nú er farið úr böndunum. Þannig að ég ætla bara að fara að fara með það. Og ef ég fer til Google Myndir og Rick Astley. Ef þú veist ekki hvers vegna við gerum þetta, bara að lesa upp á Wikipedia. Í hvert skipti sem þú hefur smellt á tengil, einhver hefur verið að hlæja einhvers staðar. Og láta mig fara ahead-- það við förum, við skulum skoða þessa mynd. 

Svo hér höfum við mynd í Google Images. Og við skulum gera ráð fyrir að þetta er nokkuð alls staðar á internetinu. Þannig að ég ætla að gera ráð það er í lagi fyrir mig að í raun setja þetta í vefsíðu mína. Ég ætla að fara á undan og afrita slóðina mynd. Og nú ef ég fer aftur til Cloud 9, við skulum sjá hvað ég get gert hér. Svo hér er bara vefur blaðsíða. Þetta er Rick Astley, haha, Ég ætla að nú fara aftur að vafrinn minn, endurhlaða, og áhugavert. 

Hvar er Rick? Svo láta mig sjá hvað gerðist. Reyndar ætla ég að láta eins og ég hafi ekki gert það. [Inaudible] settu hann hér. Við munum koma aftur til það í smá stund. Svo er hér rick.html. Svo það er ekki Rick Astley. Svo kemur í ljós að við getum reyndar bæta við hann hér. Þetta er Rick Astley. Ég ætla að segja gefa mér mynd sem lét Heimild er slóðin sem ég afrita bara, sem greinilega er hamingjusamur afmæli eitthvað. 

Og nú ætla ég að loka tag svona. Þannig að þetta er umbúðir frábær lengi. En eftir því að allt sem ég hef gert er opinn krappi mynd, Heimild með eigindi þetta. Og það er mjög langur URL. Og á mjög lok, taka þetta. Hvers vegna hef ég gert rista horn krappi í stað þess að, eins og öll önnur merki, með opinn krappi, IMG, lokað krappi? Bara taka giska jafnvel ef þú hafa enga þekkingu af neinu tagi með HTML áður. 

Svo það er hvernig það lokar stjórn, en hvers vegna er það ekki raunverulega gera innsæi vit til að gera eitthvað aðeins meira fjölorður eins nánu mynd? Já. Já. Bara merkingu, það er ekkert vit í byrja mynd og endar mynd, það er annað hvort það eða það er ekki. Svo það er ekki skynsamleg að fara bil fyrir neitt annað inni á myndinni. Þú bara getur ekki gert það. Og svo setningafræði myndi almennt vera bara að gera skástrik inni á opnum tag eða byrjun tag og þá högg Vista. 

Svo ef ég endurhlaða nú þessa skrá, nú Ég hef fengið góða vefur síðu elda hér. Og við gátum vissulega raunverulega ónáða fólk með embedding stað eins og YouTube tengil. Og í raun, hvenær þú hefur einhvern tíma farið á YouTube, og láta mig í raun tilviljun Rick rúlla mig hér. Svo Rick rúlla. Svo Rick roll-- ég ætla að fara hér. 

[TÓNLIST spila] 

OK, einn maður líkaði það. Svo eftir allan þennan tíma, ef þú smelltu á Deila hlekk þú auðvitað fá slóðina sem þú getur í raun embed í tölvupósti eða réttar mynd eða í Heimadæmi eða í slide. Og nú, ef ég smelli í stað á embed, eftir að allan þennan tíma, þetta dót hefur verið þar. Ég ætla að fara á undan og afrita þetta. 

Og bara svo við getum séð það betur, ég er fara að líma það inn í textaritlinum minn. Takið eftir að þetta það YouTube hefur verið að segja þér. Í hvert skipti sem þú heimsækir YouTube vídeó, ef þú vilt að embed vídeó á þinn Vefsíðan, einfaldlega grípa þetta. Svo er þetta enn eitt HTML tag kallast iframe. Or an línu ramma. Svo það lítur líka svolítið meira flókið en allir aðrir. Svo kemur í ljós að á myndinni tag og greinilega iframe tag taka það sem kallast eiginleika. 

Og þetta er annar stykki af setningafræði í HTML. Í viðbót við merkið er nafn, opið krappi tag nafn, þú getur stjórnað hegðun tag með því að hafa a heild búnt af eigindi jafngildir gildi. Eiginleiki jafngildir gildi. Og svo til dæmis, YouTube er að segja okkur ef þú vilt breidd þetta myndband að vera 420 pixlar og hæð að vera 315 pixlar, sem er hvernig þú tjá það í HTML. 

The uppspretta af the vídeó er að fara að vera það lengi YouTube URL og þá sumir önnur efni eins strikinu er núll, þannig að líklega þýðir að það er engin landamæri kringum málið. Leyfa fullur skjár líklega þýðir að notandi smelltu á hnappinn og reyndar fullur skjár vídeó. Svo ef ég vil virkilega að vera áhrifamikill hér í Rick punktur HTML, frekar en að nota mynd tag, láta mér eyða að í stað líma þetta. Og nú endurhlaða. Og nú hér við fara aftur. Allt í lagi, það er nóg. Allt í lagi svo ég mun reyna erfitt að gera það aftur. Svo hvaða ert sumir af the Takeaways hér? Svo HTML, eins ljótur og þessir vefsíðum eru, er í raun mjög einfalt. Það er ekki forritunarmál. Það þarf ekki virka. Það þarf ekki lykkjur. Það þarf ekki skilyrði. Allt það hefur er heilmikið af ólík merki, sem hver um sig hefur núll eða fleiri eiginleika. Og í raun, hvað er gaman við að HTML og þú byrjar að kafa í er að það er mjög sjálf teachable. 

Allt það tekur er skilningur um almenna ramma HTML. Hvað er tag, hvað er eiginleiki, hvernig þú stillir raun vefsíðu eins og hér segir. Og allt annað er í raun afleiðing að horfa upp á netinu tilvísun eða googling hvernig á að gera sumir tækni eða eins og við höfum séð, horfa á upptök Facebook númer, horfa á vefsíðu sem þú vilt í það er uppspretta merkjamál og skilja hvernig verktaki þar reyndar lagðar það út. 

Þannig að við getum gert myndir eins og heilbrigður. Og í raun, við gerðum það í smá stund síðan. Leyfðu mér að fara á undan og bara sýna þér. Hér er nokkur dæmi um kóða. Ef þú vilt alltaf að sjá geðillur köttur. Svo eftir að ég get hafa mynd tag hér. Og ég hef fengið athugasemd ofan það. Ég hef fengið val texti fyrir aðgengi. Svo einhver sem er með skjá lesandi af ástæðum augum geta í raun þá hafa þeirra skjár lesandi segja geðillur köttur. Vegna þess að ef þeir geta ekki sjá myndina, þeir geta að minnsta kosti hafa tölvuna sína segja þeim munnlega hvað það er. Og uppspretta þessi skrá er cat.jpeg. Svo í raun, ef ég vildi virkilega að fá snjall, það sem ég gæti hafa done-- Ég lofa ekki að fara að Rick Astley, svo Ég ætla að google fyrir kött í staðinn. Og ef ég fer á Google Myndir hér, og við munum gera ráð að þetta er mynd af kettinum mínum. 

Segjum að ég hef stjórn smellti eða hægri smellt á þetta, tilviljun hrollvekjandi. Og cat.jpeg ég ætla að vista á skjáborðið. Leyfðu mér nú að fara aftur til ský 9. Takið eftir að hér, ég get fara að hlaða staðbundnar skrár. Og ef ég grípa þetta skrá, cat.jpeg tilkynning að ég get draga það og falla það í ský 9 og það er að fara að æpa á mig hér. 

Þar sem við höfum nú þegar gefið þér cat.jpeg skrá, en það er frábær auðvelt að grípa mynd sem þú hefur tekið af Facebook eða Flickr eða þess háttar og í raun draga og falla því í ský 9 og þá gera það hluti af eigin persónulega website eða vandamál setja sjö eða átta eins og við munum fljótlega sjá. Og svo þegar þú loksins heimsækja þessi köttur, miðað Ég niður að sama kött, tilkynning that-- sem var yndisleg. 

Það sem þú vilt sjá er eitthvað eins og þetta andlit hér. Þannig að skrár sem þú tilvísun í vefsíðu getur annað hvort að vera staðbundin á eigin spýtur reikning eða fjarlægur á einhverjum öðrum miðlara eins og í tilviki Rick Astley mynd svolítið síðan. Svo hvar else-- hvað annars getum við gert hér? Svo skulum taka a líta á the hópur stuðningsmanna. Þú veist hvað er góður af kaldur? 

Við höfum hingað til verið að gera mjög truflanir vefsíðum. Ég vil til að hressa hlutina upp eins og hér segir. Ég vil gera eigin leitarvél mína vél. Svo til að gera a leita vél, við skulum fara á undan og byrja að gera þetta. Ég ætla að fara á undan og búa til ný skrá sem heitir search.html. Og við höfum prefabed útgáfur netinu. Úpps. Ekki líma ekki í flugstöðinni gluggann. Húshlutar útgáfur netinu. Og ég ætla að byrja eins og hér segir. Svo er hér upphafið skrá sem heitir search.html. Ég ætla að spara það í Heimild skrá dag. Ég ætla að hringja þessari leit. Reyndar munum við gera það betra. CS50 Leita og í raun tegund það. Og nú ætla ég að fara að segja eitthvað eins og H1 CS50 Leita. Og þá niður hér, H2 væntanlegar. Og bara til að ágrip, H1 og H2 meina það sig? 

Já, svo stór og djörf, og ekki eins stór, en samt djörf. Þannig að ef ég vista þetta og fara yfir hér, við skulum sjá the skrá search.html. Allt í lagi, og þetta er right-- [inaudible]. Standa við. David er ruglaður. Ó, það er rétt þar. David er hálfviti. OK. Þannig að það er það. Svo CS50 leit væntanlegar. Svo nú skulum við mynda það sem við gerðum í síðustu viku. 

Þar sem við ræddum um neðri hæð aflfræði HTTP. Og þessar nýju hugmyndir af HTML, sem er bara þetta Markup Language þar þig segja að vafra nákvæmlega hvað á að gera og innleiða eigin leit okkar vél. Svo í stað þess bara sagði væntanlegar, ég er fara að kynna eitthvað sem kallast formi tag. Og í þessu formi, ég ætla að hafa eitthvað eins og inntak sviði. 

Og nafn þessa inntak reit, ég ætla að kalla það Q. Og tegund þessu innsláttarsvæði Ég ætla að segja er bara "texti". Og texti sviði, eins og við munum sjá, er bara texti kassi. Og svo það er ekki vit hér til að hafa eitthvað inni af því á þessum tímapunkti. Og svo ég er einfaldlega að fara að loka tag með að skástrik rétt í merkinu sjálfu. Og þá er ég að fara að hafa eitt annað inntak. Input type jafngildir leggja. Og þá er ég að fara að loka þessa líka. 

Og nú ætla ég að fara aftur hingað. Og þegar við sjáum, að vísu ansi ljót, ég hef fékk upphaf eigin leit síðuna mína hér. Í raun, láta mig reyna að hreinsa þetta upp smá. Það kemur í ljós að á inntak hér, get ég hafa annar eiginleiki heitir tákn. Og ég gæti séð eitthvað eins leitarorð, eða nánar tiltekið, fyrirspurn fyrir q. 

Og eftir, nú, ég hef svona gráum texta sem hverfur eins og leið og ég byrja að skrifa, en það er líklega eitthvað þú hefur séð í öðrum vefsíðum. Ég í raun ekki eins og á Senda hnappinn. Þannig að ég er reyndar að fara að gefa Senda hnappinn gildið leit. Og nú, ef ég endurhlaða, eftir því hnappinn minn verður heitir leit. Þú veist, ég í raun ekki eins merkinu hér. Svo Google Font rafall. 

Ég vil til að hressa þetta upp frekar. Svo CS50 leit. Leyfðu mér að búa til eigin lógóið mitt. Þetta er flottur. Svo nú langar mig að vista þetta as-- koma á. Hvar er það að fara? There. OK. Missti það. Vista sem. Heimskur vafra. Standa eftir, við erum að fara að laga þetta í eitt skipti fyrir öll. Það sem við förum. Allt í lagi. Sorry. Frídagur. Nú er þetta angurvær. Hætta fullur skjár. Allt í lagi. 

Nú, eins og eðlilegt manneskja, vista myndina sem. Logo.gif. Nú ætla ég að fara í CS50IDE og Ég ætla að einfaldlega grípa merkið, Ég ætla að draga það inn í minn uppspretta sjö skrá, skrá er þegar til, ég er í lagi með það. Þannig að ég ætla að hunsa það vegna þess að ég hafði þegar það. Og nú hvernig ég losna við þetta? 

Við skulum fara á undan hér og gera Image Source jafngildir logo.gif. Loka þessu. Vista. Og nú ef ég fer aftur til leit minni síðu, nú er að leita nokkuð gott. Allt í lagi, svo það er ekki alveg gert neitt gagnlegt. Í raun, láta mig reyna að leita fyrir kött og sjá hvað gerist. Kettir. Fari það. Það er ekki bara vinna, greinilega. Svo er það lykillinn stykki sem vantar hér? 

Rétt, jafnvel ef þú veist ekki hvaða HTML, Ég hef byrjað að merkja upp símann mynd og ég hef sagt það hvernig á að fá inntak, gefa mér textabox og senda hnappinn, hvaða stykki er greinilega vantar? Segjum að við viljum raunverulega fá Þessi hlutur virki rétt. Hvað þurfum við að gera? Við höfum þörf fyrir að innleiða aftur enda Gagnagrunnurinn eða leitarvél sjálft, og það er að fara að taka a heild einhver fjöldi af tími, hreinskilnislega. 

Svo man hvað við gerðum síðast. Svo ef þú leitar að einhverju á Google og þú hefur fyrirfram slökkt, muna, augnablik leit. Svo láta mig snúa það burt þannig að þetta í raun hegðar sér eins og eldri skóla vafra, ef ég leita nú fyrir eitthvað eins ketti, muna hvað URL lítur út. Það er nokkuð dulinn. En embed in það, muna, er skástrik leit. Spurningarmerki q jafngildir ketti. 

Og það virðist að gefa mér a heild búnt af leitarniðurstöðum. Svo þú veist hvað ég er að fara að gera? Ég ætla að taka lán Google fyrir aðeins eina mínútu. Ég ætla að fara yfir hér og ég ætla að segja sem myndar aðgerð eða áfangastað, svo að segja, ætti bókstaflega að vera Google. Og aðferðin sem ég vildi að nota er að fara að vera að fá. 

Svo er það aðgerð? Aðgerð er furðulegur heitir, en það bara þýðir sem er að fara að takast á aðgerð af þessu formi? Þegar ég smelltu á Leita, þar ætti niðurstaðan að fara? Og ef ég fer nú aftur í formi minni hér og endurhlaða vefsíðu mína og nú leita að einhverju eins hundur, eftir nú Ég hef aftur innleitt Google. Ekki satt? 

Ef ég vil að leita að einhverju annars, það virkar fyrir ekki bara hunda, það virkar líka fyrir ketti. Það virkar einnig fyrir CS50. Og OK, þetta er bara undir whelming, er það ekki? Allt í lagi, en það virkar í raun. Svo hvað er í raun verið að fara á? Þannig að ég hef kennt vafrann minn, með HTML, að taka inntak frá notanda og í raun senda þessi inntak til a fjarlægur framreiðslumaður using HTTP. 

Og vegna þess að vafrinn minn skilur HTTP, reyndar það smíða slóðina svo að það Ég enda á í vafranum mínum, eftir hvað gerist þegar ég leitaði fyrir hundinn. Ef ég smelli Leita, eftir því slóðin breytist eins og ég ætlaði að google.com/search~~V fyrirspurn jafngildir hund. Og það er vegna þess formi veit, vegna þess að aðferðin er að fá, að einfaldlega bæta það til þessa vefslóð þar. 

Nú eru þessar vefsíður enn ljót. Svo skulum kynna eitt annað stykki af setningafræði ef við getum í dag. Og þetta er eitthvað þekkt eins stílblöð. Svo láta mig taka a líta á þetta dæmi hér og sjá ef við getum ætlað hvað er að gerast. Þetta er CSS0.html. Og þetta er þar sem hlutirnir fá smá ljót. Vegna miður, í heimi vefnum, HTML einn getur ekki gert allt. Og svo ef þú vilt stylize vefsíðu þinni, þú þarft í raun að einbeita sér að fagurfræði á annan hátt. Svo hér, ég hef líkama minn vefur síðu inni sem er stór div. Og div þýðir bara deild. Svo það er eins og lið en það hefur ekki sömu merkingu af málsgrein textans. 

Þetta þýðir bara að við vafra, hér kemur stór rétthyrnd svæði vefnum mínum síðu, ég vil að höndla það sérstaklega. Nú, lína 21 er þar sem div byrjar. Og bara taka giska. Hvað er áhrif línu 21 á restin af innihaldi síðunnar? Centering það. Það er allt og sumt. Þannig að við höfum ekki séð leið reyndar centering texta. 

Í raun, search engine minn, ólíkt raunverulegum Google, var allt réttlætanlegt yfir til vinstri. Og svo nú í línu 21, ég er að segja, hey vafra, búa til deild á síðunni. Bara gefa mér stóran, ósýnilega rétthyrningur. Það er hvernig ég vil hugsa um vefsíðu. Og þá stylize það sem hér segir. Inni þessara vitna, nú, er annað tungumál sem við kynnt í dag kallast Cascading Style Sheets. Sem betur fer, það er líka ekki forritunarmál, svo það er mjög takmarkað í setningafræði þess en einnig mjög takmarkað í virkni þess en HTML er allur óður í merking upp gögn af vefsíðu og uppbyggingu vefsíðu. CSS er almennt um Lokaspretturinn, fagurfræði, fá stærð og lit og þess Staðsetning nákvæmlega rétt í a vefur blaðsíða. Og reyndar er það myndast með helstu gildi pör. 

A eign svona, texta samræma, eftir tvípunkti, fylgt eftir með virði sem eign, sem í þessu tilfelli er sent. Og nú eftir þér geta byggt hreiður þetta. Ef ég vildi allt í að Ég hef bent á að vera fyrir miðju, það er hvers vegna ég hef línu 21 og samsvarandi lína 31. En býst nú vil segja John Harvard, velkomin á heimasíðuna mína. 

Copyright tákn John Harvard. Og ætla ég vil fyrsta þær línur að vera nokkuð stór. 36 pixlar. Svo er það ágætis stærð. Og ég vildi þyngd sína að vera djörf. En þá neðan að, Ég vil minni texta. Og neðan að, ég vil jafnvel minni texta. Sorry. Í dag er eins og á daginn. 

Svo nú, hvað er ég að gera til að tjá þetta? Hér á línu 22 er embed in div eða hreiður div, ef þú vilt. Það hefur líka eigin stíl tag sína. Ég tilgreina leturstærð 36. Ég tilgreina leturgerð þyngd feitletraðar. Niður hér, tilgreina ég bara 24 punktar. Og að lokum, í samræmi 28, ég tilgreina 12. Svo bara eins og a fljótur andleg heilbrigði stöðva og við manneskju að lesa þetta, hvaða orð á skjánum eru í raun að fara að vera djörf? Hvaða línur eru í raun djörf? 

Bara John Harvard. Ekki satt? Því bara eins og línan 22 segir hey vafra, hér er deild síðunni. Gerðu það leturstærð 36 lið. Gera letrið þyngd feitletraðar. Um leið og þú nærð Samsvarandi endir tag eða lokað tag á línu 24, það þýðir, hey vafra, hætta að gera hvað sem það er sem þú ert að gera. Og takið eftir að vera skýr, jafnvel þótt lína 22 er öllum þessum eiginleikum eins stíl, þegar þér loka tag í línu 24, þú nefnir aðeins nafn tag er. 

Þú endurtaka ekki orðið stíl eða eitthvað sem er inni í þessum tilvitnunum. Og svo ef ég horfi á þetta núna í vafranum mínum, við skulum taka a líta á the endir afleiðing. Slepptu mér undan þessari skrá, sem er CSS 0. Og það er enn nokkuð látlaus, en að fá ansi áhugavert. En það kemur í ljós að það er aðrir hlutir sem ég get gert hér, og í hættu á að gera þetta alveg hideous, eftir hér að mínu Lík vefsíðu mína, Ég get gert eitthvað fyndið eins bg eða bakgrunnslit. 

Og fljótur, það er uppáhalds liturinn þinn? Grænn Ég heyrði. Allt í lagi. Svo nú, ef ég högg endurhlaða núna, Gróðurhús vefsíðu. Allt í lagi, svo það er ekki slæmt. Og nú, ef ég vil gera þetta virkilega flott, ég get gert lit á texta mínum jafnvel rautt. Svo skulum sjá hvað þetta lítur út. Nú það er að leita nokkuð gott. Og hérna, ef þú virkilega langar að skipta við einhvern eða ef þú vilt vera einn af þeim sem reynir að plata þig í að heimsækja vefinn síðu vegna þess að þeir hafa brögð Google í hugsun það er allt fullt af lykilorðin like-- skulum sjá, endurhlaða. Hvar var það að fara? Og það það okkur. Allt í lagi. Svo ég segi þetta eins og innskot, við munum tala um þetta efni í nokkrar vikur þegar við tölum um öryggi, ef þú í raun embed heild bunches af leitarorð í a vefur blaðsíða, jafnvel ef þeir eru ekki sýnileg a manna, einhver eins og Google, að sjálfsögðu, getur samt í raun að finna þetta. Allt í lagi, svo það er ansi hideous ansi fljótt. 

Og í raun, það er ekki allt að mikið ólíkt mínu eigin vefnum síðu sem grunnnámi, sem Ég byrjaði googling kring til að finna fyrri útgáfur af gömlum vefsíðum mínum. Það var frekar slæmt. Í raun gerði ég finna einn rétt fyrir bekknum. En það er verra þarna úti. Þetta var greinilega minn heimasíða árið 1996. Virðist ég hélt að það væri viðeigandi að spyrja fólk nafn sitt áður en þeir gátu í raun sjá vefsíðu mína. 

Og þá sýndi ég þeim eitthvað heimskur, sennilega. Ég grafa upp meira fyrir næsta tíma. En nú, við skulum íhuga smá hönnun. Við höfum talað um stíl. Og þessari síðu svona langt og mest allt sem ég hef skrifað er nokkuð hreinn stylistically. En hvað um hönnun? Jæja, það er mikið offramboð í það sem ég hef verið að gera hér. 

Ég hef getið orðið litur í nokkra staði. Ég hef getið leturstærð í nokkra stöðum og djörf í nokkra staði. Og grundvallaratriðum, ég er co mingling tvö tungumál. Ég hef fengið HTML með tags mitt og eiginleika og þá allt í einu, milli gæsalappa, ég hef sem annað tungumál í dag kallað CSS, sem aftur er bara þessi lykill gildi pör eða þessir eiginleikar aðskilin með tvípunkti. 

Það kemur í ljós að mikið eins og í C þar sem við getur byrjað að þáttur út sumir kóða í haus skrá, svo við getum gert það sama í HTML. Og skref í átt sem er sem hér segir. Takið eftir að þessi útgáfa, CSS1.html er byggingu nákvæmlega sömu vefsíðu. Svo ég hef fengið a heild búnt af Divs, en í þetta skipti, hef ég fengið losa af umbúðir div eins og þú munt sjá. 

Og ég hef gefið þeim þrjú Divs efst, miðju og neðst, einstakt auðkenni. Þetta er gott, því við gefa þeim deildum af bls einkvæm auðkenni, Ég get vísað þeim annars staðar. Hvar? Jæja, láttu mig fletta upp. Og svona langt, hvenær við höfum litið í höfuðið á a vefur blaðsíða, það er eina tag við höfum haft í yfirmaður vefsíðu? Smá hávær. Bara titillinn hingað til. En það kemur í ljós að það er nokkur önnur atriði þú getur sett í það, einn af sem það er kallað stíl tag. Svo smá stund síðan, leit við á stíl eiginleiki. Skrúfjárn út það er stíll tag. Það tilheyrir inni yfirmaður vefsíðu. Og nú eftir hvað ég er að gera. Ég hef inni þetta stíl tag eftirfarandi. Ég er bókstaflega að minnast á línu 20 á Heiti merki sem ég vil stylize. 

Þá hef ég opinn hrokkið Brace og lokað hrokkið Brace. Svo líkur í anda að C, en aftur, þetta er ekki fall, þetta er bara nokkur dæmi um setningarleg smáatriði hér. Og þá auðvitað er ég að segja vafra, hey vafra, gera allan líkamann á síðunni hafa texta jöfnun miðju. Og þá er þetta að segja eftirfarandi. Hey vafra, ef þú sérð HTML þáttur eða tag í síðunni sem hefur einstakt auðkenni á toppinn, svo kjötkássa tákn hér þýðir bara einstök hugmynd um toppinn, fara á undan og gera leturstærð hennar 36 og letur þyngd hennar feitletraðar. 

Hey vafra, stak sem ID er miðja, gera það 24 punktar. Og hey vafra, ef þú sérð Hugmyndin um botn, gera það 12 punktar. Áhrifin á endanum er einmitt Sam. Ef ég fer inn í CSS 1, gáir sama. En við erum skref í átt örlítið betri hönnun. Leyfðu mér nú að fara aftur hingað til CSS2 og sjá hvað ég hef gert. 

Nú er síðan í raun, mjög hreinn. Í raun get ég passa alla innihald á síðunni hér. En hvað nýja tag hef ég kynnt, augljóslega? Link. Og það er ekki það besta nafn fyrir tag, vegna þess að það er ekki tengill í skilningi að við vitum það, en þetta þýðir tengill í annan skrá. Þetta er góður af eins og skarpur eru í C. 

Þetta er leiðin í HTML að segja hey vafra, fara að fá innihald skráin heitir css2.css. Sambandið, að mér er að það er stíll lak. Og reyndar, það er það sem einn af S er í Cascading Style Sheets hætti. Þetta er stíll lak. Það er bara textaskrá sem inniheldur a heild búnt af hótelinu. Það er allt fullt af stíl sem þú vilt beita á síðu. 

Og svo þetta virðist er vísa til seinni skráin. Og ef ég opna það, CSS2.css, eftir því að allt sem ég hef gert er að afrita og líma allt þetta í þessari skrá. Og nú, jafnvel ef þú hefur aldrei dulmáli þetta efni áður, bara telja með proverbial verkfræði húfu á, hvers vegna er þetta betri hönnun sennilega? Þátta út þá CSS eiginleika, setja þau í eigin skrá þeirra. Jafnvel þó að við leyst þetta vandamál eins fimm mínútum í fyrsta útgáfa. 

Við höfum ekki batnað á síðu stylistically, þetta er bara betra hönnun í einhverjum skilningi. Hvers vegna finnst þér? Já. Sveigjanlegri hvernig? Já. Svo ef þú vilt fara aftur og breyta hlutum, nú hefur þú einn stað þar sem þú getur breytt hlutum. Og í raun, fyrir eitthvað eins Heimadæmi sjö, þar sem við munum innleiða birgðir viðskipti website, það er að fara að hafa allt fullt af síðum. Og það væri mjög pirrandi ef þú ákveður, HM, Ég í raun ekki eins og 24 punkta, ég vil það að vera 28 pixlar eða örlítið stærri. Og þá þarf að gera a alþjóðlegt finna og skipta eða opna allar skrár vefsvæðis þíns einfaldlega að raunverulega breyta einu gildi. By þátta út þessar stíl í einum miðlægum stað, þú getur nú opnað einn textaskrá í CS50IDE í einhverju forriti, breyta því, vista það, og gert. Þú hefur ræktað þá breytingar alls staðar. Og það væri sama í punktur h skrá eins og heilbrigður. Svo einhverjar spurningar þannig langt á þessari setningafræði? Allt í lagi, þannig að við höfum gert allt það virðist nema raunverulega framkvæma tengla. Og svo skulum fara á undan og gera þetta. Leyfðu mér að fara á undan og búa til nýja skrá hér. Ég ætla að kalla það link.html, setja í númerið dag. 

Og ég ætla að gera opinn krappi doc tegund HTML. Sem innskot, þetta hlutur á að efst, þetta doc tegund yfirlýsingu, það er eina sem er skrítið með upphrópunarmerki. Þú verður bara að gera það þar og það þýðir að við erum að nota HTML útgáfu 5. Eldri útgáfur af Tungumál hafði mikið lengur strengir sem þú þarf til að setja það. Svo hér er dæmi kölluð tengilinn. 

Ég þarf líkama vefsíðu mína hér. Og hér, a href jafngildir skulum segja HTTP://www.disney.com og uppáhalds vefsíðan mín, munum við segja. Allt í lagi, svo mjög innocuous, notendavænt síðu. Ef ég fer nú í möppuna mína skráningu hér og opna link.html, við höfum há texta. 

Og reyndar, þetta er þar sem H í HTTP kemur frá. Hypertext Transfer Protocol er um að flytja texta sem hefur tengla á aðrar auðlindir. Og reyndar, hér er kunnugt, ef Retro, blár tengill að ef smellt mun í raun leiða mig til Disney.com. Nú, ó, sem er að koma út fljótlega. Allt í lagi, svo nú, hvað eru sumir þeim áhrifum sem þetta? 

Og hreinskilnislega, heimurinn byrjar að fá smá meira kunnugleg og líka litla scarier en einnig aðeins meira sjálf defensible þegar þú byrjar að skilja þetta. Vegna líkurnar eru, sumir af þú, ef þú ferð gegnum Gmail spam mappa eða jafnvel pósthólfið, hefur þú sennilega fengið einhvers konar tölvupósti sem er að biðja þig að breyta þinn lykilorð kannski eða kannski staðfesta PayPal persónuskilríki eða whatnot. 

Og í raun, þú gætir hafa fengið eitthvað sem segir eins smelltu hér að endurstilla PayPal lykilorðið þitt. Og nú, eftir, ef þetta er ekki Disney.com en eins badplace.com og endurhlaða, athugið að texti hér gæti sagt neitt af neinu tagi. Og í raun, þetta er bara orð. Hví ekki ég reyndar vera frábær illgjarn og segja http://www.paypal.com. 

Smelltu hér endurstilla paypal lykilorð og nú endurhlaða. Þetta lítur mjög lögmæt, ekki satt? Ég meina, ég myndi ekki smella á tölvupóst sem bara segir þetta. En taka á slag hér. Það segir www.paypal.com, og í raun, bíddu í eina mínútu, við vitum að þú vilt sem s fyrir öryggi. Svo nú er farið að www.paypal.com HTTPS, en ef þú hefur aldrei gert þetta áður, fæ í ​​vana að sveima yfir litlu tenglum hér. Og það er erfitt að sjá á skjánum, og það er ekki allt sem auðveldara hér. En leið niður hér í pínulítill lítill horn er að vafrinn hafi segja þér að við erum að fara að badplace.com stað paypal.com. Nú, þar sem við erum að fara með þetta? Öll dæmi sem við höfum gert í dag, við höfum harður dulmáli og slegið út höndunum. Vefurinn er ótrúlega uninteresting þegar þér erfitt kóða þinn vefur blaðsíða til að efnið er fast og aldrei breytast. Auðvitað, allt okkar uppáhalds vefsíður í dag, hvort sem það er Gmail eða Twitter eða Facebook eða allir tala af öðrum eru dynamic. Þeir eru að breyta í svar við notandi inntak rétt eins og Google leitarniðurstöðum. 

Og svo á miðvikudaginn, það sem við gerum er við leggjum HTML og CSS kynning á bak við okkur og við tökum sjálfsögðum hlut að við nú veit það og við kynna nýtt forritunarmál heitir PHP, sem eins C, er að fara að gefa okkur vald til raunverulega búa til forrit sem sér mynda framleiðsla. Í þessu tilfelli, munum við vera með PHP til að búa til virk vefnum síður sem nota þetta nýtt tungumál. Svo meira um það á miðvikudag. Sjáumst þá. 

[TÓNLIST spila]