[MUZIKO Ludante] 

DAVID J Malan: Jen CS50 kaj tiu estas la komenco de semajno 7. Do bonvenon reen. Kaj vi eble memoras ke en problemo starigis kvar, estis iom de postpredanto ĉaso por iuj fabelaj premioj whereby post vi rekuperi la fotojn de kunlaborantaro ambaŭ tie kaj en New Haven, vi estis defiita por trovi kiel multaj el tiuj komputilaj sciencistoj kiel vi povus. Kaj ni hvas tutaj faskon de proponoj. Pensis mi dividos kelkaj kun vi tie hodiaŭ. 

Kaj ni vidos sendi ĉiuj tiuj linio. Sed precipe, mi volis atentigi vin to-- bone unu, Sam estis en tre kelkaj el ili ĝenerale pozante kiel tiu. Sed ĝi aperas ke de ĉi matene, la gajninto estis certa iun nomitan Ken kun 24 de la personaro kaptita sur fotilo aŭ malmultaj pli kiam vi prenas en konto multoblaj bastonon en la pentraĵoj. Pictured ĉi tie estas Ken apud Mary en New Haven. 

Nun, Ken, kvankam, turnas ekstere estas iom de angulo kazo ke tio ankoraŭ ne okazis antaŭe. Ĝi rezultas ke ĝi ne okazis al Mi, por meti fajnan print en problemo starigis kvar kiu diras ke personaro estas protektebla la fabelaj premioj ĉar Ken estas, kompreneble, unu el la fotistoj sur nia stabo. Nun, kun kiu diris, li origine skribis min diri Bonvolu ne sendi tiujn fotojn rete. Mi pensas grandparte ĉar plejparto de la fotoj ke tiu fotisto prenis rigardu iom io tiamaniere. Kaj similaj. 

Sed Ken ŝatus min trankviligi vin ke li estas tre bona fotisto, Li estas profesia, li prenas fotoj kiuj ne neklara, ke estas pli bone en fokuso, kaj li prenis tre kelkajn el nia propra stabo. Sed anstataŭ nur agnoskas Ken, kion ni pensis ke ni faru estas iri tra la listo de faktaj studentoj kiuj sendis. Kaj ĝi rezultas ke Lance kun 15 fotoj de ĉimatene Estis nia gajninto. 

Kaj bildigis ĉi tie estas Lance kun Colton, kun Skaz, kun mi mem, kaj kun Sam. Sed tiam rezultas ke de 11:46 AM, do nur iomete antaŭ, Mi reiris al mia retpoŝto kaj trovis ke ni havis ankoraux unu pli submetiĝo de studento nomita Bonnie kies retpoŝto nur diris tion. Ne tuj mensogos, mi estas farante tiun dum klaso. Kaj tiam daŭrigis per alfiksi nur 14 fotoj, unu timema de Ĵetu 15. 

Sed en Bonnie fotoj, rezultas eksteren estis multnombraj stabanojn, Sam inter ili, do kio ni pensis ke ni farus estas agnoski ambaŭ de tiuj. Do krom akiranta la Dropbox spaco kiu ĉiuj kiu partoprenis ricevas, tiuj du sekcioj volo ankaŭ ricevi belan Utilis lunĉon por ili kaj ilia sekcio Mates tiu venonta semajno. Kaj tial vi aŭdos de ni, Okazaĵo kaj Bonnie, pri tio. Tiel granda feliĉoj ilin. Nun, tiuj el vi kiuj volus kiel tagmanĝo pli ĝenerale scias ke CS50 tagmanĝo en Kembriĝo kaj New Haven estas ĉi vendredo. Iru al CS50 la retejo oblikvo RSVP. Kaj nun unu vorton sur seminarioj. Pli curricularly. Do ni proksimiĝas la punkto de la semestro kie vi devus komenci pensante pri fina projektoj. Kaj fakte, en nur iom, volo tn pre proponoj ŝuldiĝi. Do pre proponoj estas intencitaj esti bela malalta trafo kaj vere nur ŝanco por vi kunmeti mallongan noton via instruado ulo por sciigi li aŭ ŝi, kion vi pensas vin volus fari por via fina projekto. 

Nun, multaj studentoj finas fari ttt bazita fina projektoj. Kaj kompreneble, ni estas nur nun pasintsemajne en ĉi kaj preter plonĝado en retejo programado. Do ne maltrankviliĝu se vi havas absolute nenian ideon kiel Vi konstruus la ideoj ke vi havu en via menso. Tiu estas vere nur devigante funkcio akiri vin pensanta kaj parolanta kun via TF pri ĝi. Sed helpi vin kun tio, kaj kun finaj projektoj finfine, scias ke CS50 havas tradicion proponi seminariojn. 

Kaj tiuj estas laŭvolaj, manoj sur, aŭ prelegi surbaze ŝancojn lerni pli pri temoj, kiuj estas iom helpaj al la kurso Syllabus, sed tamen mirindan materialo veturi fina projektoj. Kaj jen la listo jen CS50 bastonon tie en New Haven elvenas kun por tiu jaro pri iOS programado, Android programado, ludo disvolviĝon, kaj kukojn pli iloj kaj lingvoj kaj teknikoj. 

Do prigardi la CS50 la retejo. Kaj dume, se vi ŝatus enskribi vian intereson en iu ajn de ĉi tiuj, iri al CS50 la oblikvo registro. Kaj ni tiam sekvas supren kiel al la tagoj kaj flugo tempoj kaj lokoj kaj everything-- plej Ĉio esti eksudita kaj ankaŭ havebla sur peto post se vi ne povas vere fari ĝin. Do sen pli enkonduko, ni cxesis lasta fojo kun GET. 

Kaj tio estis kiel la mesaĝo kiu estis interne de la virtuala koverton, memoras, ke ni pasis de router al enkursigilo al enkursigilo inter foliumilo kaj reta servilo. Kaj tiu mesaĝo aspektis iom io tiamaniere. Tiu estis la pli arkanaj mesaĝon ke estis fakte ene de koverto skribita sur peco de papero kies unua linio diras laŭvorte, Akiri oblikvo. 

Kaj same prudento ĉeko, kion oblikvo signifi? Kion oblikvo signifas kiam petante retejon? Vi peti ŝin la tutan tempon. Plej ajna tempo vi vizitas retejon, vi ne vere entajpi dosiernomon. Vi verŝajne nur iri al Facebook.com, eniri, gmail.com, aŭ simile. Kaj kion signifas oblikvo reprezentas? Kio dosieron? Aŭ kion paĝon, specife? 

La indekso, yeah. Do la defaŭlta paĝo. Do se vi ne specifas dosieron citi kiel ni komencos vidi, vi fakte simple petante donu al mi la defaŭltan paĝon de Facebook aŭ donu al mi mian leterkeston aŭ donu mi la defaŭltan paĝon de novaĵoj sur CNN retejo aŭ similaj. Kaj servilo tiam respondas ke mesaĝo kun io kiel tiun, dirante jes, mi parolas HTTP versio 1.1. 

200, kiu estas statuso kodo kiun ni homoj malofte iam vidi ĉar ĝi estas bona. Ĉar ĝi signifas OK, peto estis ricevita kaj pritraktita konvene. Kaj la enhavon tipo ŝajne en respondo Estas tre ofte, sed ne ĉiam, teksto. Kaj specife, HTML. Kaj tio estas vere kie ni rigardu hodiaŭ. 

Do fakte, mi tuj iros antaŭen kaj malfermu retumilo. Mi tuj uzas Chrome, vi povas uzi plej ajna retumilo en la semajnoj veni. Ni ĝenerale rekomendas Chrome ĉar ĝi estas aparte bona por programistoj. Oni alvenis multajn enkonstruita iloj kiuj faciligos al disvolvi ne nur HTML kaj CSS, aferojn ni komencos parolante pri hodiaŭ, sed ankaŭ aliaj lingvoj ankaŭ. 

Kaj mi tuj iros antaŭen kaj iru to-- Mi tuj Kontrolo klako aŭ maldekstra Klaku ie ajn en retpaĝo. Kaj mi tuj iros inspekti Elemento. Kaj mi tuj tweak mia ekrano nur iomete tie. Lasu min movi tiun al la fundo. Do tiu estas kio nomiĝas Chrome la Inspektisto. Do tio estas kiel elpuriganta ilo konstruita en Chrome. 

Vi cxiuj jam havas tiun Se vi estis uzante Chrome. Kaj ĝi permesas vidi kio okazas sur sub la kapuĉo de iu retpaĝo. Do ni vere prenas rigardi tion kiel sekvas. Ĝi havas vojon pli karakterizaĵoj kaj ni zorgas pri hodiaŭ. Sed estas tiuj klapetoj super tie. Elementoj, reto, fontoj, templinio, kaj kelkaj aliaj aĵoj. Mi tuj alklaki Reto por momento. 

Kaj estas iom blindiga unuavide tie. Sed kion mi tuj faros lasas min simpligi ĝin iomete. Mi tuj ŝalti la registrado lumo tiel ke ĝi estas ruĝa. Kaj mi tuj diru konservi ŝtipo. Kaj tiu estas nur iom afero mi eltrovis super tempo kiu tuj savos ĉio okazanta en la retumilo. Kaj nun mi tuj iros al http://facebook.com. 

Fakte, ni faru www por bonan mezuron, oblikvo. Enter. Do URL kiu multaj de vi eble vizitis. Nun Facebook retejo paĝo venas supren ĉe la pinto. Kaj tiam tuta amaso de havajxoj preterflugis funde. Kaj fakte, ĝi rezultas ke kiam vi vizitas Facebook.com, vi ne nur farante unu HTTP peto, ĝi rezultas ke tuj Facebook.com Sendas 41 de tiuj kovertoj, ĉiu kun lia propra get peto, kiel indikita, kvankam malantaŭ la ekrano tie, ĉe la malsupro de la ekrano, ĝi indikas ke ja mia retumilo faris 41 petoj. 

Kaj entute, ĝi trapasis 861 kilobajtoj kaj ĝi prenis ial nekredeblaj ok sekundoj elŝuti ĉiujn ke. Do jen vere iom stranga ke Facebook paĝaro prenus ke longa, sed gxi ecx en tiu kazo. Nun, ĉiuj ĉi ne vere gravas pri krom la plejsupra peto. Do ni iru al ĉi tiu ĝuste ĉi tie kaj lasu min malzomi dum nur momento. 

Kaj lasu min zomi en ĉi tio. Do kion mi faris ĉe lasis kvankam ekzistas multe daŭriganta ĉi tien estas mi reliefigis Facebook.com kaj tiam rimarkos ke mi scrolling malsupren, scrolling malsupren scrolling malsupren, peti titolaj. Kaj vi vidos ke Chrome montrante mi esence la interna enhavo de la peto mi faris. Ĝi ne estas formatado en tute la sama vojon, sed rimarkas ke estas mencio de akiri, rimarki ekzistas mencio de la gastiganto, Facebook.com, la pado, aŭ oblikvo, kio estas la dosiero mi petis. 

Kaj tiam se mi rulumu asist, Ni efektive vidi ke kio Facebook revenis al mi estas ĉiuj tiuj titolaj. Do ene de tiu virtuala koverton ja estas multaj ŝlosilaj valoro paroj. Vorto, dupunkto, kaj tiam valoro. Vorto, dupunkto, kaj valoro. Tiuj estas nomitaj titolaj. Kaj estas vojo pli detale tie ol ni fakte zorgas pri nun. 

Sed tiu estas dua al lasta tien, rimarki, ke Facebook.com La servilo, ja diris tie venas iu HTML tekston. Do ĉio ĉi estas ke kiam vi peti retejo paĝo de retumilo al servilo, ke servilo respondas kun koverton de lia propra interne de kiu estas teksto. Alivorte, HTML. Hipertextual Markup Language. Kiu estas alia lingvo ke ni enkondukas hodiaŭ ke homoj aŭ komputiloj generi por apliki retpaĝoj. 

Specife, ni rigardu tion. Mi tuj iros reen Facebook de afiŝinto. Kaj mi tuj simple kontrolo klako aŭ maldekstra klako kaj klaku sur View Paĝo Fonto. Kaj eĉ se vi ne uzas Chrome, IE povas fari tion, Firefox povas fari tion, Safaro povas fari tion, kvankam la menuo ebloj povus aspekti iom malsamaj. Kaj jen estas la HTML kiu Mark kaj Kompanio ĉe Facebook skribis. 

Kaj kolektive, tiu lingvo tie implementa la blua kaj la blanka paĝo ke ni vidis antaŭ momento. Nun, tiu estas iom blindiga. Sed se ni rigardas supren ĉe supre maldekstre, ni estas tuj komencos al vidi iuj ŝablonoj. Ĝi aspektas kiel ekzistas multe de tiuj angulo malfermita krampo kaj tiam tie estas tio ŝlosilvorto HTML. Jen alia malferma angulo krampo kaj kapo. 

Jen, se ni rulumu malsupren kaj malsupren kaj malsupren, mi estas tuj iru antaŭen kaj provu serĉi ion. Ekzistas vojo super dekstre tie estas malferma krampo korpo. Kaj memoras de lasta tempo kiun ni proponis ke la plej simpla retpaĝo ke homa skribi povus aspekti iom io tiamaniere. Malferma HTML tag, malferma kapo etikedo, malfermita titolo etikedo, tiam fermita titolo, fermita kapo, malferma korpo etikedo, tekston, fermita korpo, fermita HTML. 

Sed paŭzo tie por nur momento. Tiu kodo, eĉ se vi havas neniam skribis ĝin antaŭ sed ankoraŭ ne tute komprenas kio okazas, aspektas sufiĉe bona. Bone, ĝi estas tre pura. Ĝi estas tre stile agrable. Multa deŝovon kaj blanka spaco. Facebook ne. Do kial estas tiel Facebook malbona ol mi je skribado HTML? Ŝajne. 

Bone, tiu estas kiel unu el kvin por stilo. Tie estas konvinka kialo por ili tranĉi tiuj anguloj. Bone, do ili ne volas plifaciligi por vi por legi ĝin. Do iusence, ili estas obfuscating ĝi, ia grimpadi ĝi almenaŭ estetike tiel ke ĝi estas pli malfacila por Myspace iri kaj ŝiri siajn hejmpaĝo kaj la HTML por ĝi. Rezultas ke kun programoj kvankam, inkluzive Chrome, ni povas purigi ĉi supren super facile. Do ĝi ne estas sufiĉe ke kiel la kialo. Kio alia povus esti la kaŭzo. Yeah. Jes, blanka spaco kostoj datumoj. Kion vi celas? Jes, ĝuste. Se vi batis la Tab ŝlosilo multe aŭ la spaco trinkejo, konsideri la implikaĵoj. Do ĉiu klavo en via klavaro estas [Inaudible] reprezentita kiel unu bitoko. 

Do supozu ke Mark aŭ iu el la devs tiujn tagojn trafas la spacebar nur unufoje en tiu HTML-paĝo ke reprezentas Facebook hejmpaĝo. Kaj Facebook havas multon de uzantoj ĉi tiuj tagoj. Do supozu ke Facebook hejmpaĝo estas vizitita de miliardoj da homoj hodiaŭ. Kaj iu ĉe Facebook havas batis la spaco trinkejo ĝuste unufoje. 

Do unu plian bajto, miliardo petoj, kiom pli datumoj estas Facebook transfiriendo super la interreto ĉar iu batis la spacebar sur lia aŭ ŝia klavaro? Al miliardoj bajtoj, aŭ unu gigabajto de datumoj estas senditaj de Facebook serviloj al homoj ĉirkaŭ la mondo sen bona kialo. Nun, tio estas precize unu spaco. 

Imagu se ni efektive purigi ĉi afero kaj dentado ĝin kaj aldonis multan blankan spacon kaj langeto karakteroj kaj spacoj, vi finas supre elspezanta gigabajtoj, se ne terra bajtoj pli da spaco. Kaj tiel súper komuna en la fakta mondo de ttt disvolviĝo estas minify via kodo. Kaj ni eventuale vidi kiel vi povus fari tion. 

Sed hodiaŭ, ni komencos skribi kodon tio estas vere legebla de ni homoj. Rezultas, kvankam, se vi revenos al tiu ilo en Chrome Inspect Elemento, antaŭe, ni estis sur la Reto langeto. Ĝi rezultas ke se vi iras al la elementoj langeto, kion vi reale vidi estas Chrome la belaj presita versio de tiu sama HTML. Do ni deobfuscated ĝin. Do estas neniu matĉo por komputilo. Kaj nun vi povas reale klaki ĉirkaŭe kaj komenci vidi la hierarkio kiu estas retpaĝo. Do ni vere faru tion. Mi tuj iros antaŭen kaj malfermi supre sur mia Mac programo nomita teksto redaktu. Kaj memoru ke tiu estas ĝuste super simpla teksto programo. Vindozo havas notepad.exe. Kaj mi tuj Verbatim tajpu la sekvan. Doc tipo HTML, malferma krampo HTML, fermita krampo HTML, ni havas la kapon de la paĝo ĉi tie, la fino de la kapo de la paĝo ĉi tie, titolo estos kiel, saluton mondo. 

Kaj poste malsupren tie, ni bezonas la korpo de la retpaĝo. Fermita korpo. Kaj tiam en ĉi tie, saluton mondo. Bone. Do ni skribis super rapida retpaĝo. Mi tuj savi ĝin kiel hello.html sur mia labortablo. Mia Mac tuj plendi, pensante ke, atendu minuton, tiu estas teksta dosiero, do vi volas nomi ĝin .txt? Sed ne, mi volas uzi skalara HTML. 

Kaj tiam kio estas agrabla se mi nur duobligi klaki ĉi dosiero, hello.html, jen mia retpaĝo. Bedaŭrinde, mi estas la nur persono en la mondo kiuj povas viziti tiun paĝon nun. Ĉar kie ĝi loĝas ŝajne? Ĝi estas sur mia Mac, dekstra? Kiu estas senutila. Kiel neniu en tiu ĉambro Lasita sole en la interreto povas fakte vizitas tiun paĝon. Do hodiaŭ, ni devas enkonduki alian elementon. 

Kaj fari tion, mi tuj antaŭeniri kaj malfermu nubo 9. Do nubo 9 estas kompreneble nubo bazita service-- CS50 IDE-- Tio devas ĉiuj niaj workspaces kurante ie sur la interreto. Kaj tio signifas ke ĉiuj el niaj dosieroj estas publike alirebla jam. Do ni iru antaŭen kaj fari tion. Mi tuj iros antaŭen kaj krei novan dosieron NCS50IDE. Mi tuj savi ĝin kiel antaŭe kiel hello.html kaj alklaku savi. Kaj nun simple por ŝpari tempon, mi tuj antaŭeniri kaj kopio almeti ĉi kodo anstataŭ retajpi ĝin. Kaj savos. Kaj do nun mi havas dosiero nomata hello.html. Sed kiel mi reale malfermi ĝin kiel retpaĝo? Nu, tio rezultas la enkonstruita al CS50 Ide estas ne nur tradukilo kiel tin kaj erarserĉilo kiel GDB kaj gxibo de aliaj programoj, ekzistas reale plena disvolviĝinta retservilo kurante ene CS50 IDE. 

Ĉiuj el vi, kiuj estas, havas vian propran ttt-servilo. Kaj servanto retejo estas nur peco de programaro kies celo en la vivo estas servi supren retpaĝoj. Aŭskulti por petoj de retumiloj kaj respondi kun malmulta virtuala kovertoj ene de kiu estas la enhavo kiu mi skribis. Do tiu retservilo estas vere libera kaj malferma fonto. Kie malfermita nur signifas programaro kiu oni intertempe skribita ke ĉiuj el ni povas reale vidi kaj elŝuti kaj eĉ ŝanĝi la fontkodon. Kaj ĝi nomiĝas Apache. 

Kaj ni faris ĝin iom pli facile uzi en CS50IDE nomante ŝin Apache 50. Tiel ke ĝi povas fakte kompreni jeno. Mi tuj diru Apache 50 komencon. Kaj poste mi demandas? Dot. Kaj ni vidos iun iom arcano mesaĝon dirante fiksanta Apache la dokumenton [? grupo?] al hejmo, ubuntu, kion ajn tio estas, oblikvo laborspaca. Komencante retservilo Apache 2 sukcese. 

Do longan rakonton, mi ĵus puŝis butonon kaj ŝaltis retservilo kiu estas nun aŭskultado en la interreto sur TCP haveno 80 je specifa adreso. Kaj ĝi diras ĉi tie, kaj tio ŝanĝiĝos Based sur via uzantnomo kaj aliaj faktoroj, sed rimarkas nun se mi klakas ĉi, IDE50 skalara jharvard kaj tiel kaj tiel, rimarki ke ĉiuj ĉi tempo por la pasinteco plurajn semajnoj, vi havu rimarkis ke via propra salutnomo estas enigita en la supra dekstra mano angulo de CS50IDE. 

Kaj tio fakte estis ĉiuj ĉi Tempo la adreson ĉe kiu vi povas viziti ĉiujn viajn dosierojn rete. Ĝis nun, ĝi ne importis, ĉar en C, oni ĝenerale volas aferoj kurante en terminalo, ne en la reto. Sed hodiaŭ, ni komencas skribi ttt bazita kodo ke ni volas alirebla ĉe publika URLoj. Do kio mi tuj fari estas klaki ĉi URL. 

Kaj rimarki ke mi vidas sufiĉe malbela indekso, dosierujo printita, sed kio dosiero elsaltas ĉe vi probable? Hello.html. Tio estas ĉar mi savis la dosiero en mia laborspaco. Kaj kion mi rakontis Apache la retservilo estas rigardi en David laborspaca dosierujo. Kaj ke neniu en la mondo vidos tiujn dosierojn. 

Kaj efektive, se mi nun alklaku hello.html, Mi vidas ene ĉi langeto precize tiu dosiero. Nun rimarkas, nubo 9 tio farigxis iu iom helpema por ni. Ene CS50 IDE, rimarki ekzistas subite stango. Tio estas ĉar kvankam ni estas uzante Chrome viziti CS50IDE, ene de CS50IDE estas ĝia propra versio de foliumilo nun. Kaj tiel anstataŭ kompliki aferojn kiel tia, Mi tuj iros antaŭen kaj simple kopii ĉi URL. Mi tuj iros antaŭen kaj nur malfermi miajn proprajn Chrome fenestro. Do ne estas magio tie, neniu CS50IDE. Mi simple tuj laŭvorte alglui miaj J Harvard URL kaj batis Enter. Kaj voila, mi nun, kaj en teorio, ĉiuj sur la interreto, se mi agordis permesojn taŭge, povas viziti tiun dosieron. Kaj tial nun, se mi diris hello.html, voila, tie Estas mia nekredeble underwhelming retpaĝo. Do ni faru rapidan prudento ĉeko. Pro ĉiuj de tiu estas koncepta aro supren. Kaj ni reale ne vere instruis vin kiel skribi HTML por se. Demandojn ĝis nun sur kio ĵus okazis? Jes. Ĉu CS50 posedi tiujn retpaĝojn? En kiu senco? Bona demando. Do CS50 posedas CS50.io. Ni ja aĉetis tiu domajna nomo. Kaj nature vi infanoj arbohakanta en CS50IDE, vi ĉiuj akiri kio nomiĝas subdominio. 

Do IDE50-Malan, aŭ IDE50-Rob.CS50.io, jen via unika adreson ene nia domajna nomo. Do por la celoj de la kurso, Vi havas vian propran unikan adreson. Sed ni simpligita aĵojn aĉetante la pinta nivelo domajno, CS50 skalara I / O kaj tiam ĉiuj aliaj estas ene de kiuj, por tiel diri. Kaj ni revenos al tiu en paro de semajnoj probable, speciale je fina projekto tempo, kiam iuj de vi eble volos akiri vian propran domajnon nomojn. Ĝi estas fakte relative simpla. Bone. Do ni nun faras tion. Mi tuj iros reen en CS50IDE, kie mia dosiero nun, hello.html, finfine ne interesa. Mi ŝatus fari ion iom pli agrabla ol tio. Do mi tuj faru ion kiel tiu. Lasu min malfermi paragraphs.html. Do tiu dosiero mi skribis anticipe. Ĉe la supro, kiel ĉiam, ni havas komentojn. Sed en HTML, komentoj aspektas iom malsama. On line tri kaj linio 14, vi vidi la sintakson por komenci komenton kaj fini komenton. 

Sed neniu el la aĵoj en inter aferoj funkcie. Estas nur noto al homaj kio okazas tie. Kaj ĝuste kiel rapida prudento kontroli, se mi rulumu malsupren, kio estas la evidenta nova etikedo kiun ni enkondukis? La etikedoj ĝis nun ni vidis estas malfermitaj krampo HTML, kapo, titolo, kaj korpo. Sed kio estas evidente nova nun? 

Jes, do p. La p etikedo aŭ paragrafo etikedo. Kaj tiam mi nur prunteprenis defaŭlta Latina teksto konsistigi miaj alineoj. Ĉar kion mi volis pruvi estas kiel vi povus reprezenti alineoj de teksto en HTML. Do kio komencantaj okazi tie estas ke ekzistas jam mastro evoluantaj. Kaj lasu min antaŭeniri kaj fari tion. Lasu min unue malŝalti Apache. Kaj mi tuj diros ĝin komenci mem denove ene de hodiaŭa fonto sep m dosierujo. Por ke mi havas aliron al ĉio. 

Kaj nun, se mi iros al ĉi dosierujo printita, Rimarku ke mi vidos ĉiun dosiero de hodiaŭ. Kaj vi vidos en la sekva problemo aro, ni donu vin instrukcioj cxar farante ĝuste tiun. Se mi malfermas paragraphs.html, tio eble tiel aspekti programlingvo al vi se vi ne parolas aŭ legi latinon. Sed tio estas nur tri paragrafoj de teksto kiuj estas markitaj en HTML. 

Kaj rimarki la alineon paŭzoj inter ili. Ĉar ĝi rezultas, kaj eĉ se vi povus esti inklina al fari tion, dum kiu en la reala mondo, se vi volas meti linion paŭzoj inter aĵoj, vi eble tute simple fari tion kaj batis Konservi. Kaj nun, se mi povos reŝargi tie, rimarki ke io simple nebuligas kune en nur unu blob de teksto. Ĉar HTML estas speco de mutaj lingvo. 

Ĝi estas intencita esti uzita en tia tiel ke la navegador nur do eksplicite kion vi diros ĝin fari. Do se vi ne diros ĝin donu al mi novan alineon, vi ne tuj vidas novan alineon. Kaj fakte, kion la retumilo tuj faros eĉ se vi batis Enter, diru multfoje kaj denove, movanta tiu teksto maniero malsupren sur la ekrano kaj konservi kaj tiam reŝarĝi, la retumilo tuj kolapsi ĉiuj de tiu blanka spaco en nur unu, videbla spaceto. Bone. Do jen la alineo etikedo. Do kio estas la mastro kiu estas evoluiganta tie? Nu, ĝi ŝajnas esti la kazo ke HTML estas ĉiuj proksimume komenci etikedo kaj finante etikedo. Kaj kio estas etikedon? Nu, estas nur eron de sintakso. Malferma krampo, ŝlosilvorto, fermita krampo, estas etikedon. Aŭ komenci etikedo. Kaj tiam kiam vi estas faris esprimanta vin mem, kiel en vi faris kun la alineo, vi faru tiel diri malon. Sed la malo estas ne tute malantaŭen. 

Vi simple prefikson la sama etikedo la nomon kun antaŭen oblikvo ŝatas tion. Bone. Do ne ĉiuj kiuj ekscita. Kaj fakte, ni ne farante la ttt ĉiuj kiuj pli interesaj. Kio se mi volas fari aferoj pli granda kaj aŭdaca? Do rezultas ke tie estas ekzemplo en headings.html, kie en mia korpo, Mi havas h1 etikedo, H2, H3, kvar, kvin, aŭ ses, ĉiuj kiuj ŝajnas bela arcano. Sed se mi iras malfermi tiun Ekzemple, ni rigardu. Headings.html. 

Do foliumiloj defaŭlte povas doni al vi tekston jen grandaj kaj aŭdacaj de malsimilajn grandecojn. H1 estas granda. H6 estas pli malgranda kaj tiam ĉio en inter. Do jen interesa sed ankoraŭ ne vere la TTT mi scias. Kio se ni volas mi iu kiel lerta. . Do jen bula listo de tri de Harvard domoj. 

Kiel vi iras pri faranta tion ĉi? Nu, rigardu list.html. Kaj tie, ni vidas Iomete de funkiness sed ni konsideru kio okazas. Do surbaze kion vi ĵus vidis, UL staras por neordigitan liston. Ordigita listo nur signifas bula. Mankas nombroj. Ekzistas ankaŭ iu nomata ordigita listo, kiu estas OL ĉe etikedon. Tiam LI, listeron estas ĉiuj ĝi signifas. 

Kaj tiel aŭtomate nombroj ĉion por vi. Sed denove, ĉiuj miaj deŝovon kaj blanka spaco estas nur pro mi. La retumilo ne efektive tuj zorgas. Do kvankam vi povis fari tion, nur por esti klara, vi devus eĉ kvankam la navegador ankoraŭ povi kompreni ĝin ĝuste fajna. Mi batas Reŝarĝi en mia retumilo, mi klakante Reŝarĝi kaj neniu ŝanĝo okazas ĉar la retumilo ankoraŭ fari precize kion mi diras ĝin fari. 

Bone. Do tio estas ĉiuj nur tekston. Nun ni faru ion pli interesa. Mi tuj iros antaŭen kaj prunti kelkajn el ĉi HTML. Mi tuj iros antaŭen kaj krei novan dosieron ĉi tie. Kaj ni nomas tiun rick.html. Ni havas misproporcie uzita ion nomiĝas rick roll en ĉi klaso tiu jaro, mi ne scias, hazarde okazis organike. 

Kaj nun ĝi estas alvenis pro kontrolo. Do mi simple tuj iri kun ĝi. Kaj se mi iros al Google Bildoj kaj Rick Astley. Se vi ne scias kial ni fari tiu, ĵus legis sur Vikipedio. Ĉiufoje vi alklakis la ligilon, iu estas estis ridanta ie. Kaj lasu min iri ahead-- tie Ni iru, ni vidi ĉi tiu bildo. 

Do jen ni havas bildo en Google Images. Kaj ni supozu, ke tiu estas prudente ĉie sur la interreto. Do mi tuj supozi ke estas OK por mi por fakte metis tiun en mian retpaĝo. Mi tuj iros antaŭen kaj kopii bildo URL. Kaj nun se mi venos al Nubo 9, ni vidu kion mi povas fari tie. Do jen estas nur retpaĝo. Jen Rick Astley, haha, Mi tuj iros reen al mia retumilo, reŝarĝi, kaj interesa. 

Kie estas Rick? Do lasu min vidi kio okazis. Reale, mi tuj ŝajnigi kiel mi ne faras tion. [Inaudible] metis lin tien. Ni revenos al tiu en momento. Do jen rick.html. Do tio ne Rick Astley. Do rezultas ni povas fakte adicii lin tien. Jen Rick Astley. Mi tuj diros al mi bildon kies fonto estas la URL Mi nur kopiis, kiu ŝajne estas feliĉa naskiĝtago io aŭ alia. 

Kaj nun mi tuj fermi la etikedo tiel. Do tiu estas volvanta súper longa. Sed rimarki ke ĉiuj mi havas farita estas malferma krampo bildo, fonto kun atributo de tiu. Kaj estas vere longa URL. Kaj ĉe la fino, rimarkos tion. Kial mi faris oblikvo angled krampo anstataŭ, kiel ĉiu alia etikedo, havanta malferman krampon, IMG, fermita krampo? Nur preni diveni eĉ se vi ne havas familiarecon ajn kun HTML antaŭe. 

Tiel estas kiel ĝi fermas la komando, sed kial ĝi ne vere fari intuicia sencon fari ion iom pli parolema kiel proksiman bildon? Yeah. Yeah. Nur semantike, ne estas senco de startanta bildon kaj finante bildon, ĝi estas ĉu ekzistas aŭ ĝi ne estas. Do ĝi ne havas sencon forlasi interspacon por io alia ene de bildo. Vi simple ne povas fari tion. Kaj tial la sintakso ĝenerale estus nur fari la antaŭen oblikvo ene de la malferma etikedo aŭ la komenco etikedo kaj tiam batis Konservi. 

Do se mi nun reŝarĝi ĉi dosiero, nun Mi havas bonan retpaĝon kuirado tie. Kaj ni certe povus vere agacas personoj per enigo anstataŭ kiel YouTube ligilon. Kaj fakte, ajna tempo vi iam iris al YouTube, kaj mi fakte hazarde rick roll min tie. Do Rick Roll. Do rick roll-- Mi tuj iros tien. 

[MUZIKO Ludante] 

OK, unu persono ŝatis tion. Do rimarki ĉiu ĉi tiu tempo, se vi klaki la Konigi ligilon, vi kompreneble akiri la URL kiun vi povas reale enkorpigi en retpoŝto aŭ jura bildo aŭ en problemo aro aŭ en glito. Kaj nun se mi anstataŭe alklaku embed, rimarki ke ĉiuj ĉi tempo, ĉi stuff estis tie. Mi tuj iros antaŭen kaj kopii ĉi. 

Kaj nur tiel ni povas vidi ĝin pli bone, mi estas tuj gluu ĝin en mia tekstoredaktilo. Rimarku ke ĉi kio YouTube estis diranta vin. Ĉiufoje vi vizitas YouTube video, se vi volas enkorpigi la video sur via retpaĝo, simple ekpreni ĉi. Do tiu estas ankoraŭ alia HTML etikedo nomita iframe. Aux en linio kadro. Do ĝi tro aspektas iom pli kompleksa ol ĉiuj aliaj. Do rezultas ke la bildo etikedo kaj ŝajne la iframe etikedo preni kio estas nomitaj atributoj. 

Kaj ĉi tio estas alia peco de sintakso en HTML. Krom la etikedo la nomo, malferma krampo etikedo nomon vi povas kontroli la konduton de la etikedo por havi tutan aron de atributo egaluloj valoro. Atributo valoro egalas. Do ekzemple, YouTube estas diranta nin se vi volas ke la larĝeco de tiu video esti 420 pixeles kaj la alto esti 315 rastrumeroj, jen kiel vi esprimas ĝin en HTML. 

La fonto de la video tuj esti tiu longa YouTube URL kaj tiam iu alia materialo kiel kadro limo estas nul, tiel ke probable signifas ke estas neniu limo ĉirkaŭ la afero. Permesu tutekrana probable signifas ke la uzanto klaku butonon kaj fakte tutekrana la video. Do, se mi vere volas esti impresa tie en Rick skalara HTML, prefere ol uzi la bildon etikedo, lasu min forviŝi ke, anstataŭ almeti ĉi. Kaj nun reŝarĝi. Kaj nun tie ni iras denove. Bone, tio sufiĉas. Bone do mi provos malfacile ne fari tion denove. Do kio estas kelkaj el la takeaways tie? Do HTML, tiel malbela kiel tiuj retpaĝoj estas, fakte sufiĉe simpla. Ĝi ne estas programlingvo. Ĝi ne havas funkciojn. Ĝi ne havas cikloj. Ĝi ne havas kondiĉojn. Ĉiuj havas estas dekduoj da malsamaj etikedoj, ĉiu el kiuj havas nul aŭ pli atributojn. Kaj fakte, kio estas amuza pri HTML kiel vi komencas plonĝi en estas ke ĝi estas tre memo teachable. 

Ĉiuj ĝi prenas estas kompreno de la ĝenerala kadro de HTML. Kio estas etikedo, kio estas atributo, kiel vi vere agordi retpaĝo jene. Kaj ĉio alia estas vere la rezulto de suprenrigardinte en reta referenco aŭ googling kiel fari iuj teknikon aŭ kiel ni vidis, rigardante Facebook fonto kodo, rigardante retejo ke vi ŝatas ĉe ĝi estas fontkodo kaj kompreni kiel la ellaborantoj tie fakte metis aferojn. 

Do ni povas fari bildojn tiel. Kaj fakte, ni faris tion antaŭ momento. Lasu min kaj simple montras vin. Jen kelkaj specimenaj kodo. Se vi iam volas vidi grumblema kato. Do rimarki ke mi povas havas dosieron etikedo tie. Kaj mi havas komenton supre. Mi havas alternativan teksto por alirebleco. Do iu kiu estas uzanta ekrano leganto por kialoj de vido povas fakte tiam havas siajn ekrano leganto diri grumblema kato. Ĉar se ili ne povas vidi la bildon, ili povas almenaŭ havi ilian komputilon informi ilin parole, kio estas. Kaj la fonto de tiu dosiero cat.jpeg. Do fakte, se mi vere volis akiri lerta, kion mi povis havi done-- Mi promesas ne iri al Rick Astley, do Mi tuj google por kato anstataŭe. Kaj se mi iros al Google Images tie, kaj ni supozas ke tiu estas bildo de mia kato. 

Supozi ke mi havas kontrolon klakis aŭ dekstra alklakis tiu, hazarde creepy. Kaj cat.jpeg Mi tuj savi sur mia labortablo. Lasu min for al nubo 9. Rimarku, ke ĉi tie, mi povas iri alŝuti lokajn dosierojn. Kaj se mi ekpreni ĉi dosiero, cat.jpeg, avizo ke mi povas treni ĝin kaj faligi ĝin en nubo 9 kaj ĝin tuj krias al mi cxi tie. 

Ĉar ni jam donis al vi cat.jpeg dosiero, sed ĝi estas super facile Ekpreni foto kiun vi havas prenita de Facebook aŭ Flickr aŭ similaj kaj fakte treni kaj faligi ĝin en nubo 9 kaj tiam fari ĝin parto de via propra persona retejo aŭ problemo starigis sep aŭ ok kiel ni baldaŭ vidos. Kaj tiam kiam vi fine viziti tiu kato, supozante mi elŝutis tiun saman kato, avizo that-- ke estis adorable. 

Kion vi vidas estas io tiamaniere vizaĝo tie. Do la dosieroj kiujn vi referenco ene retpaĝo povas ĉu esti lokaj en via propra konto aŭ malproksimigita de iu alia servilo kiel en la kazo de la Stako Astley foto iomete antaŭe. Do kie else-- kio alie ni faru tie? Do ni rigardu la sekvan. Vi scias kio speco de malvarmigi? 

Ni ĝis nun estis farante tre statika retpaĝoj. Mi volas spico aĵojn jene. Mi volas fari miajn proprajn serĉilo. Do fari serĉilon, ni antaŭeniri kaj komenci fari tion. Mi tuj iros antaŭen kaj krei nova dosiero nomata search.html. Kaj ni prefabed versiojn rete. Whoops. Ne almeti en via fina fenestro. Prefab versiojn rete. Kaj mi tuj komencos kiel sekvas. Do jen la komenco de dosiero nomata search.html. Mi tuj savos ĝin en hodiaŭa fonto dosierujo. Mi tuj nomas tiun Serĉo. Fakte, ni faros pli bone. CS50 Serĉu kaj reale marko ĝin. Kaj nun, mi tuj diros io kiel H1 CS50 Serĉu. Kaj poste malsupren tie, H2 baldaŭ. Kaj nur por recap, H1 kaj H2 signifi kion respektive? 

Jes, tiel granda kaj aŭdaca, kaj ne tiel granda, sed ankoraŭ grasaj. Do se mi savos tion kaj iru tien, ni vidu la dosieron search.html. Bone, kaj ĉi tiu estas right-- [inaudible]. Stand by. Davido estas konfuzita. Ho, estas prava. Davido estas idioto. BONE. Do jen ĝi estas. Do CS50 serĉo baldaŭ. Do nun, ni sintezi kion ni faris pasintsemajne. 

Kie ni parolis pri la malsupra nivelo mekaniko de HTTP. Kaj tiuj novaj ideoj de HTML, kiu estas nur tiu markado lingvo, kie vi rakonti retumilo precize kion fari kaj efektivigi niajn proprajn serĉilo. Do anstataŭ simple dirante baldaŭ, mi certas tuj enkonduki iu nomita formo etikedo. Kaj en ĉi tiu formo, mi tuj havi ion kiel enigaĵoj kampo. 

Kaj la nomo de tiu enigo kampo, mi tuj nomas ĝin Q. Kaj la tipo de ĉi enigo kampo Mi tuj diros estas simple "teksto". Kaj teksta kampo, kiel ni vidu, estas nur teksta skatolo. Kaj do ĝi ne sentas tie havi io ene de ĝi ĉe tiu punkto. Kaj tial mi simple iranta fermi la etikedo kun tiu antaŭen oblikvo bone etikedo mem. Kaj tiam mi tuj havas unu alia enigaĵo. Input type egalas submeti. Kaj tiam mi tuj fermu unu tro. 

Kaj nun mi tuj iros tien. Kaj jam oni vidas, kvankam bela malbela, mi havas ekhavis la komencoj de mia propra serĉpaĝo tie. Fakte, mi provos purigi ĉi supren iomete. Ĝi rezultas ke en la enigo tie, mi povas havi alia atributo nomata lokokupilo. Kaj mi ekvidos ion kiel kapvortojn, aŭ pli specife, konsulti por q. 

Kaj rimarku, mi havas tiu speco de griza teksto kiu malaperas kiel Kiam mi ektajpu, sed ĝi estas probable iu vi vidis en aliaj retpaĝoj. Mi ne vere ŝatas la Submetu butonon. Do mi fakte tuj doni la Proponu butono valoro de serĉo. Kaj nun, se mi povos reŝargi, rimarki ke miaj butono iĝas nomita serĉo. Vi scias, mi ne vere kiel la logoo tie. Do Google Font generatoro. 

Mi volas spico tiun daŭrigon. Do CS50 serĉo. Lasu min krei mian propran logo. Tio aspektas bela. Do nun mi savos tiun as-- venu. Kie ĝi iras? Tie. BONE. Maltrafis ĝin. Konservu kiel. Stultaj legiloj. Stand by, ni tuj ripari ĉi fojo por ĉiuj. Tie ni marŝos. Bone. Pardonon. Off tago. Nun tiu estas funky. Eliro plena ekrano. Bone. 

Nun, kiel normala persono, savu bildon kiel. Logo.gif. Nun mi tuj iros en CS50IDE kaj Mi tuj simple ekpreni la logo, Mi tuj treni ĝin mia fonto sep dosierujon, dosiero jam ekzistas, mi estas OK kun tio. Do mi tuj nuligi ĝin ĉar mi jam havis ĝin. Kaj nun kiel mi forigi tiun? 

Ni iru antaŭen tie kaj fari bildo fonto egalas logo.gif. Fermu. Konservu. Kaj nun se mi venos al mia serĉo paĝo, nun ĝi rigardas sufiĉe bone. Bone, do ĝi havas ne tute faris ion utilan. Fakte, mi provu serĉi por kato kaj vidu kio okazas. Katoj. Damnu ĝin. Ĝi ne ĝuste funkcias, ŝajne. Do kio estas la ŝlosila peco ke mankas ĉi tie? 

Bone, eĉ se vi ne scias ajnan HTML, Mi komencis marki la telefonon formo kaj mi diris al ĝi kiel akiri enigoj, Lasu min tekstokampo kaj submeto-butonon, kion peco estas ŝajne mankas? Supozi ni volas reale preni tion laboranta ĝuste. Kion ni devas fari? Ni havas bezonon por efektivigi la malantauxo datumbazo aŭ la serĉilo mem, kaj ke tuj prenos tuta multan tempon, sincere. 

Do memoru kion ni faris lastan fojon. Do se vi serĉas ion sur Google kaj vi anticipe malŝaltita, revokon, momenteto serĉo. Do lasu min igi tiun for tiel ke tiu praktiko kondutas kiel pli malnova lernejo retumilo, se mi nun serĉas ion kiel katoj, memori kio la URL aspektas. Estas bela kamufla. Sed enigita en tie, revokon, estas oblikvo serĉo. Demandosigno q egalas katoj. 

Kaj tio ŝajnas al mi tuta amaso de serĉrezultoj. Do vi scias pri kio mi tuj faros? Mi tuj petu Google por nur minuto. Mi tuj iros super tie kaj mi tuj diros ke tio formas ago aŭ cellokon, tiel diri, devus esti laŭvorte Google. Kaj la metodo mi volis por uzo tuj estos akiri. 

Do kio estas ago? Ago estas strange nomata, sed tio nur signifas kiu tuj manipuli la agado de tiu formo? Kiam mi klakas Serĉu, kie devus la rezulto iras? Kaj se mi nun reiru al mia formo tie kaj reŝarĝi mia retpaĝo kaj nun serĉi ion kiel hundo, rimarki nun Mi re implementado de Google. Dekstra? 

Se mi volas serĉi ion alie, ĝi laboras por ne nur hundoj, ĝi ankaŭ funkcias por katoj. Ĝi ankaŭ funkcias por CS50. Kaj okej, tio estas nur sub whelming, ĉu ne? Bone, sed vere funkcias. Do kio efektive estas okazanta? Do mi instruis mia retumilo, uzante HTML, preni enigaĵon de la uzanto kaj fakte sendu ke enigo al fora servilo uzante HTTP. 

Kaj ĉar mia retumilo komprenas HTTP, ĝi reale konstrui la URL por ke kion Mi finos super en mia retumilo, rimarki kio okazas kiam mi serĉis hundo. Se mi klakas Serĉu, rimarki ke la URL ŝanĝas kiel mi intencis al google.com/search~~V query egalas hundo. Kaj tio estas ĉar la formo scias, ĉar la metodo estas atingi, simple append ĝi por ke URL tie. 

Nun, ĉi tiuj retpaĝoj estas ankoraŭ malbela. Do ni enkonduki unu alia peco de sintakso se ni povas hodiaŭ. Kaj tiu estas iu sciataj kiel kaskadan stilo littukojn. Do mi rigardu tiu ekzemplo tie kaj vidi se ni povas konkludi kio okazas. Jen CSS0.html. Kaj tiu estas kie aferoj ricevas iom malbela. Ĉar bedaŭrinde, en la mondo de la retejo, HTML sole ne povas fari ĉion. Kaj do se vi volas stylize vian retpaĝon, vi fakte bezonas por fokusigi la estetiko en malsama maniero. Do jen, mi havas la korpon de mia retejo paĝo ene de kiu estas granda div. Kaj div nur signifas dividon. Do estas kvazaŭ alineon sed ne havas la saman semantiko de alineo de teksto. 

Tiu nur signifas al la retumilo, tie venas granda rektangula regiono de mia retejo paĝo, mi volas pritrakti ĝin speciale. Nun, linio 21 estas kie tiu div startas. Kaj nur preni diveni. Kio estas la efekto de linio 21 en la resto de la enhavo de la paĝo? Centrante ĝin. Tio estas ĉio. Do ni ne vidis manieron fakte centrante la tekston. 

Fakte, mia serĉilon, kontraste la fakta Google, estis plu pravigita super maldekstren. Kaj tiel nun en linio 21, mi diras, hej retumilo, krei divido de la paĝo. Nur donu al mi grandan, nevidebla rektangulo. Tiel estas kiel mi volas pensas pri la retpaĝo. Kaj tiam stylize ĝin jene. Ene de tiuj citaĵoj, Nun estas dua lingvo ke ni enkondukis hodiaŭ nomata akvofalo stilo littukoj. Feliĉe, ĝi ne estas tro programlingvo, do ĝi estas tre limigita en ĝia sintakso sed ankaŭ tre limigitaj en lia funcionalidad dum HTML estas ĉiuj proksimume markante la datumoj de retpaĝo kaj la strukturo de retpaĝo. CSS estas ĝenerale pri la lasta mejlo, la estetiko, atingi la grandecon kaj la koloron kaj la lokigo ĝuste dekstre en retpaĝo. Kaj ja, ĝi estas formita kun ŝlosilo valoro paroj. 

Propraĵo kiel tiu, teksto vicigi, sekvita de dupunkto, sekvata de la valoro de tiu proprieto, kiu en ĉi tiu kazo estas centro. Kaj nun rimarkas vin povas nesto tion. Se mi volus io en tiu Mi reliefigis al esti centrita, jen kial mi havas linion 21 kaj la responda linio 31. Sed supozu nun volas diri Johano Harvard, bonvenigas al mia hejmpaĝo. 

Kopirajto simbolo John Harvard. Kaj supozu Mi volas la unuan de tiuj linioj esti sufiĉe granda. 36 rastrumeroj. Do tio estas deca grandeco. Kaj mi volis lian pezon kuragxi. Sed tiam sub tiu, Mi volas pli malgranda teksto. Kaj sub tiu, mi volas eĉ malgrandan tekston. Pardonon. Hodiaŭ sentas kiel ekstere tago. 

Do nun, kion mi faras por esprimi tion? Tie sur linio 22 estas enigita div aŭ nestitaj div, se vi volas. Ĝi ankaŭ havas lian propran stilon etikedo. Mi specifi tiparon grandeco de 36. Mi specifi tiparo pezo de grasaj. Cxi tie, mi nur specifi 24 rastrumeroj. Kaj fine, en linio 28, mi specifi 12. Do ĝuste kiel rapida prudento ĉeko kaj kiel homa legado tiu, kiujn vortojn sur la ekrano estas efektive tuj kuragxi? Kiu linioj estas fakte aŭdaca? 

Nur John Harvard. Dekstra? Ĉar ĝuste kiel linio 22 diras hey retumilo, jen divido de la paĝo. Make it tiparo 36 punkto. Faru la tiparo pezo kuraĝa. Tuj kiam vi atingos la responda fino etikedo aŭ fermita etikedo por linio 24, ke rimedoj, hej retumilo, ĉesi fari kion ajn ĝi estas vi faras. Kaj rimarki esti klara, kvankam linio 22 havas ĉiujn tiujn atributojn kiel stilon, kiam vi fermi la etikedo en linio 24, vi nur mencias la nomon de etikedo. 

Vi ne ripetu la vorton aŭ stilo io, kio estas ene de tiuj citaĵoj. Do se mi rigardas tiun nun en mia retumilo, ni prenu Rigardu la fina rezulto. Permesu al mi iri antaŭen al la dosiero, kiu estas CSS 0. Kaj ĝi estas ankoraŭ bela ebenaĵo, sed ricevas sufiĉe interesa. Sed rezultu ke estas aliajn aferojn mi povas fari ĉi tie, kaj riske fari ĉi tute abomena, rimarki ĉi tie ke en mia korpo de mia retpaĝo, Mi povas fari ion amuzan kiel bg aŭ fonkoloro. 

Kaj rapide, kio estas via plej ŝatata koloro? Verda mi aŭdis. Bone. Do nun, se mi batis Reŝarĝi nun, ni havas verdan retpaĝo. Bone, do tio ne estas malbona. Kaj nun, se mi volas fari tiu vere malvarmeta, mi povas fari la koloro de mia teksto eĉ ruĝa. Do ni vidu kion ĉi aspektas. Nun ĝi estas rigardanta sufiĉe bona. Kaj ĉi tie malsupre, se vi vere volas salaton kun ulu aŭ se vi volas esti unu el tiuj personoj kiuj provas trompi vin en vizitante ttt paĝo ĉar ili jam trompis Google en pensadon ekzistas tuta aro de ŝlosilaj vortoj like-- ni vidu, reŝarĝi. Kien ĝi iras? Kaj tie ni. Bone. Do mi diras kiel flanken, ni paroli pri ĉi tiujn aferojn en kelkaj semajnoj kiam ni parolas pri sekurecon, se vi reale enkorpigi tutaj aroj da ŝlosilvortoj en retpaĝo, eĉ se ili ne estas videblaj al homa, iu kiel Google, kompreneble, daŭre povas reale trovi ĉi. Bone, do jen vere malbelega bela rapide. 

Kaj fakte, ĝi ne estas ĉiu ke multe malkiel mia propra retejo paĝo de studento, kiu Mi komencis googling ĉirkaŭ trovi pasintaj versioj de miaj malnovaj retejoj. Ĝi estis sufiĉe malbona. Fakte, mi trovas unu ĝuste antaŭ klaso. Sed estas malbone tie. Tiu ŝajne estis mia Hejmpaĝo reen en 1996. Ŝajne mi pensis ke estis taŭga demandi popolo gxian nomon Antaŭ ol ili povis reale vidi mian retpaĝon. 

Kaj tiam mi montris ilin io stulta, verŝajne. Mi elfosi pli por la proksima tempo. Sed nuntempe, ni konsideri iom de dezajno. Ni parolis pri stilo. Kaj tiun paĝon tiel longe kaj plej ĉio mi skribis estas sufiĉe pura stile. Sed kio pri dezajno? Nu, ekzistas multe de redundo en kion mi faras tie ĉi. 

Mi jam menciis la vorton koloro en kelkaj lokoj. Mi jam menciis tiparo en kelkaj lokoj kaj aŭdaca en kelkaj lokoj. Kaj principe, mi ko miksante du lingvoj. Mi havas HTML kun mia etikedoj kaj mia atributoj kaj tiam subite, inter citiloj, mi havas la dua lingvo hodiaŭ nomita CSS, kiu denove, estas nur tiuj ŝlosilo valoro paroj aŭ tiuj propraĵoj disigitaj per dupunktoj. 

Ĝi rezultas ke multa kiel en C kie ni povas komenci al faktoro ekster iuj kodon en header files, do ni povas fari same en HTML. Kaj pasxo al kiu estas kiel sekvas. Rimarku ke ĉi tiu versio, CSS1.html estas Strukture la ĝusta sama retpaĝo. Do mi havas tutan faskon de divs, sed ĉifoje, mi havas liveris de la envoltorio div kiel vi vidos. 

Kaj mi donis tiujn tri divs supro, mezo, kaj fundo, sola IDs. Tio belas, ĉar per donante tiuj dividoj de la paĝo unika ensalutiloj, Mi povas referenci ilin aliloke. Kie? Nu, lasu min rulumi supren. Kaj tiel ege, anytime ni rigardis ĉe la kapo de retpaĝo, kio estas la nura etikedo ni havis en la kapo de retpaĝo? Iom pli laŭte. Nur la titolo ĝis nun. Sed rezultu ke estas kelkaj aliaj aĵoj vi povas meti en tie, unu el kiu nomiĝas stilon etikedo. Do antaŭ momento, ni rigardis ĉe stilon atributo. Rezultas ekzistas stilo etikedo. Ĝi apartenas ene de la kapo de retpaĝo. Kaj nun rimarki kion mi faras. Mi havas ene de tiu stilo etikedo la sekvan. Mi laŭvorte mencii sur linio 20 la nomo de etikedo kiu mi volas stylize. 

Tiam mi havas malferma frizita krampoj kaj fermitaj buklaj krampoj. Do simila en spirito al C, sed denove, tio estas ne funkcio, tiu estas nur sintaksa detalon tie. Kaj tiam kompreneble, mi diras la retumilo, hej retumilo, igi la tutan korpon de la paĝo havi teksto alineamiento de centro. Kaj poste tio diras la sekvan. Hej retumilo, se vi vidas HTMLa elemento aŭ etikedon en la paĝo kiu havas unikan ensalutilo de supro, tiel la hash simbolo tie nur signifas unika ideo de supro, antaŭeniri kaj fari liajn tiparo grandeco 36 kaj lia tiparo pezo kuraĝa. 

Hej retumilo, ero kies ID estas mezo, fari ĝin 24 rastrumeroj. Kaj hey retumilo, se vi vidas ideo de fundo, fari ĝin 12 rastrumeroj. La efekto en la fino Estas ekzakte la sam. Se mi iras en CSS 1, la paĝo aspektas la sama. Sed ni estas pasxo al iomete pli bonan dezajnon. Mi iros hejmen por CSS2 kaj vidi kion alian mi faris. 

Nun la paĝo estas vere, vere pura. Fakte, mi povas persvadi ĉiujn la enhavo en paĝo tie. Sed kion novan etikedon mi enkondukita, evidente? Link. Kaj ĝi ne estas la plej bona nomo por etikedo, ĉar ĝi ne estas ligilo en la senco ke ni konas ĝin, sed tio signifas ligilon en iun alian dosieron. Tiu estas speco de kiel akra inkludi en C. 

Tiu estas la maniero en HTML diri hej retumilo, iri preni la enhavon de la dosiero nomata css2.css. La rilato, al mi, estas ke ĝi estas stilo folio. Kaj efektive, jen kio la de la S-a en kaskada stilo littukojn rimedoj. Jen stilo folio. Estas nur la teksta dosiero enhavanta tuta aro da proprieto. Ĝi estas tuta amaso de stiloj ke vi volas apliki al paĝo. 

Kaj tiel tio ŝajne estas raportante al dua dosiero. Kaj se mi malfermas tion, CSS2.css, rimarki ke ĉiuj mi faris estas kopii kaj almeti ĉiuj de tiu en tiu dosiero. Kaj nun, eĉ se vi neniam coded ĉi stuff antaŭ, nur konsideru kun la proverba inĝenierio ĉapelo sur, kial estas tio ĉi bona dezajno probable? Faktoranta tiujn CSS propraĵoj, metante ilin en ilian bildon. Eĉ kvankam ni solvis tiun problemo kiel antaŭ kvin minutoj en la tre unua versio. 

Ni ne plibonigis la paĝo stile, tiu estas nur bona dezajno iusence. Kial vi pensas? Yeah. Pli fleksebla kiel? Yeah. Do se vi volas iri reen kaj ŝanĝi tion, nun, vi havas unu loko kie vi povas ŝanĝi tion. Kaj fakte, por io kiel problemo starigis sep, kie ni efektivigu provizo komercanta retejon, ke tuj havos tuta aro da paĝoj. Kaj estus vere ĝena se vi decidas, hm, Mi ne vere ŝatas 24 rastrumeroj, mi volas ĝin esti 28 rastrumeroj aŭ iomete pli granda. Kaj tiam devas fari tutmonda trovi kaj anstataŭigi aŭ malfermi ĉiujn retpagxon dosierojn simple por fakte ŝanĝi unu valoro. Per faktoranta ekster tiuj stiloj en unu centra loko, Vi nun povas malfermi unu tekstdosiero en CS50IDE en ajna programo, ŝanĝi ĝin, savi gxin kaj farita. Vi propagita tiuj ŝanĝojn ĉie. Kaj kiu estus la sama en skalara h dosiero ankaŭ. Do demandojn tiel malproksime sur tiu sintakso? Bone, do ni faris ĉion similas krom la praktiko apliki hiperligiloj. Do ni iru antaŭen kaj fari tion. Lasu min kaj krei novan dosieron ĉi tie. Mi tuj vokos ŝin link.html, metu en hodiaŭa kodon. 

Kaj mi tuj faros malfermita krampo doc tipo html. Kiel flanken, tion ĉe la supro, ĉi doc tipo deklaro, ĝi estas la sola kiu estas stranga kun la ekkrio punkto. Vi nur devas fari ĝin tie kaj ĝi signifas ni uzas HTML- versio 5. Pli malnovaj versioj de lingvo havis multe pli longe ŝnurojn kiujn vi bezonas por meti tie. Do jen ekzemplo nomita ligilon. 

Mi bezonas korpo de mia retpaĝo tie. Kaj en tie, href egaluloj diru HTTP://www.disney.com kaj mia ŝatata retejo, ni diru. Bone, do tre nenoca, uzanto amika paĝon. Se mi nun irus en mian dosierujo listigante ĉi tie kaj malfermu link.html, ni havas hiper teksto. 

Kaj efektive, ĉi tiu estas kie la H en HTTP devenas. Hipertextual Transfer Protocol estas pri transdonado teksto kiu havas hiperligiloj al aliaj rimedoj. Kaj efektive, jen la familiara, se retro, blua ligilo ke se klakis, efektive konduki min al Disney.com. Nun, ho, ke venas frue. Ĉiuj Bone, do nun, kio estas iuj de la implicoj de tio? 

Kaj sincere, la mondo komenciĝas preni iom pli familiara kaj ankaŭ iom pli timinda sed ankaŭ iom pli memo defensible iam vi komencos kompreni tion. Ĉar probablecoj estas, iuj el vi, se vi iros tra via Gmail spamado dosierujo aŭ eĉ via enirkesto, vi probable akiris ian retpoŝto kiu estas demandanta vin ŝanĝi vian Pasvorto eble aŭ eble kontroli via PayPal credenciales aŭ whatnot. 

Kaj fakte, vi eble ricevis iu kiu diras kiel klako ĉi tie rekomencigi vian pasvorton PayPal. Kaj nun, rimarki, se tio ne Disney.com sed kiel badplace.com kaj reŝarĝi, rimarku ke la teksto tie povis diri ion ajn. Kaj fakte, tio estas nur vortoj. Kial mi ne vere esti super malican kaj diri http://www.paypal.com. 

Klaku ĉi tie rekomencigi vian PayPal pasvorto kaj nun reŝarĝi. Ĉi aspektas bela legitima, dekstra? Mi volas diri, mi ne alklaku retmesaĝon ke ĵus diras tion. Sed rimarki la dicotomía tie. Ĝi diras www.paypal.com, kaj fakte, atendu minuton, ni scias, ke vi volas la s por sekureco. Do nun, iru www.paypal.com HTTPS, sed se vi neniam faris tion antaŭe, ĉu enir la kutimon de sxvebis super iom ligoj tie. Kaj estas malfacile vidi sur la ekrano tie, kaj tio ne estas ĉiu, kiu pli facile ĉi tie. Sed vojon malsupren tie en la eta angulo faras la retumilo reale diras al vi ke ni tuj al badplace.com anstataŭ Paypal.com. Nun, kie ni iras kun tio? Ĉiuj ekzemploj ni faris hodiaŭ, ni malfacile kodita kaj tajpis permane. La retejo estas nekredeble seninteresa kiam vi malfacile kodigi viajn retpaĝojn por ke enhavo estas statika kaj neniam ŝanĝiĝas. Kompreneble, ĉiuj niaj preferataj retejoj hodiaŭ, ĉu ĝi estas Gmail aŭ Twitter aŭ Facebook aŭ ajna nombro da aliaj estas dinamika. Ili ŝanĝiĝas en respondo al uzanto enigo ĝuste kiel la Google serĉrezultoj. 

Kaj tial merkrede, kion ni faras estas ni lasos HTML kaj CSS enkonduko malantaŭ ni kaj ni preni por donita ke ni nun konas ĝin kaj ni enkondukas nova programlingvo nomata PHP, kiu ŝatas C, tuj donos nin la potenco por fakte krei programojn ke mem generi eligo. En tiu kazo, ni uzos PHP generi dinamike retejo paĝoj uzante tiun novan lingvon. Do pli en tiu merkrede. Vidu vin tiam. 

[MUZIKO Ludante]