[Zenelejátszási] 

DAVID J MALAN: Ez CS50 és ez az a hét elején 7. Szóval szívesen vissza. És bizonyára emlékeznek rá, hogy A probléma az alábbi négy, volt egy kicsit csillagvadászatban néhány mesés nyereményeket, amelyben Miután visszaszerezze a kép személyzet itt és New Haven, Ön támadták találni, mint sok azok a számítógépes szakemberek, amit lehetett. És mi van egy egész csomó beadványok. Gondoltam megosztani néhány A ma itt. 

És feltesszük az összes ilyen online. De különösen akartam felhívni a figyelmet az alábbiakra: jól egy, Sam volt jó néhány közülük általában pózol, mint ez. De úgy tűnik, hogy, mint a Ma reggel, a győztes volt egy bizonyos valakit, akit Ken együtt 24. a személyzet lencsevégre vagy még néhány ha figyelembe fiók több személyzet a képeket. A képen van Ken következő Mary New Havenben. 

Most, Ken, bár, fordul ki van kicsit a sarokban ügyben ami még nem történt meg. Kiderül, hogy nem fordulhat elő, nekem, hogy apró betűs részt probléma az alábbi négy, amely azt mondja, hogy a személyzet nem jogosult a mesés nyeremények mert Ken, persze, az egyik A fotósok a munkatársaink. Most, hogy azt mondta, ő Eredetileg írta, hogy azt mondjam Kérjük, ne írjon ezeket a képeket az interneten. Azt hiszem, nagy részben mert a legtöbb fénykép hogy ez a fotós vette nézd egy kicsit valami ilyesmi. És a hasonlók. 

De Ken szeretné, ha megnyugtatni, hogy ő egy nagyon jó fotós, ő egy profi, ő veszi fényképeket, amelyek nem homályos, amelyek jobban a középpontban, és ő vett jó néhány saját munkatársaink. De ahelyett, hogy csak elismerni Ken, mi azt hittük volna csinálni A végig a listát aktuális diákok, akik benyújtották. És kiderül, hogy Lance az 15 fotó a ma reggel volt a győztes. 

És a képen itt van Lance az Colton, A Skaz, önmagammal, és Sam. De aztán kiderül, hogy mivel a 11:46, így csak egy kicsit ezelőtt, Visszamentem az email, és megállapította, hogy mi volt számára egy újabb benyújtása egy diák nevezett Bonnie akinek az e-mail mondta, csak ezt. Nem fogok hazudni, én vagyok Ezzel az órákon. És ezután csatolni, csak 14 fotó, egy szégyenlős Lance 15. 

De Bonnie fotók, kiderül ki volt több tagból áll, Sam köztük, akkor mi azt hittük tenne az elismerik mindkét. Így amellett, hogy egyre a Dropbox helyet, hogy mindenki, aki részt vett kap, ezek a két szakasz is kap egy szép kiszolgálta ebéd számukra és a rész Mates a jövő héten. És így fog hallani tőlünk, Lance és Bonnie, erről. Szóval nagy gratula nekik. Most, azoknak, akik mint az ebéd általánosabban tudjuk, hogy CS50 ebéd Cambridge és New Haven van ezen a pénteken. Tovább a CS50 honlapján perjel RSVP. És most egy szót szemináriumok. Több curricularly. Szóval közeledik a pont a félév ahol meg kell kezdeni gondolkodni végleges projekteket. És valóban, csak egy kicsit, majd az úgynevezett pre javaslatokat az oka. Tehát előre javaslatok célja, hogy elég alacsony hatást, és tényleg Csak egy lehetőség írhat egy rövid üzenetet A tanítási fickó számára, hogy megismerje neki, mit gondolsz te érdemes csinálni a végleges projekt. 

Most, sok diák a végén Ennek webes végleges projekteket. És persze, mi csak Most a múlt héten ebben a és azon túl búvárkodás a webes programozás. Szóval nem kell aggódni, ha Fogalmam sincs, hogyan akkor építeni az ötleteket, hogy lehet, hogy a fejedben. Ez tényleg csak egy kényszerítve funkció hogy gondolsz, és beszél Ön TF róla. De, hogy segítsek, és A végleges projekt végső soron, tudjuk, hogy CS50 hagyománya A felajánlás szemináriumok. 

És ezek nem kötelező, kezét, vagy előadás alapján lehetőségek hogy többet tudjon témák, amelyeket Egy kis kiegészítő a tanfolyam tananyag, de mégis csodálatos anyag vezetni végleges projekteket. És így ez a lista, amelyet CS50 személyzet itt New Havenben jöttek fel a ebben az évben mintegy iOS programozás, Android programozás, játékfejlesztés, és csokor több eszközt és a nyelvek és technikák. 

Szóval szemmel tartani a CS50 honlapján. És addig, ha azt szeretné, hogy Kérjük, válasszon ezek közül bármelyik, menj CS50 a perjel nyilvántartásban. És akkor majd nyomon követni, hogy a nap és a repülési idők és helyszínek és everything-- legtöbb mindent fog közvetíteni és is rendelkezésre áll igény után, ha nem tudja valójában, hogy azt. Tehát minden további nélkül, akkor abbahagyta utoljára a GET. 

És ez olyan volt, mint az üzenet, hogy volt belsejében a virtuális borítékot, emlékszem, hogy telt a router a router router között egy webböngésző és a web szerver. És hogy nézett ki egy üzenetet kicsit valami ilyesmi. Ez azért is volt misztikus üzenet valójában belsejében egy borítékot írva egy darab papírra, amelynek első sorban azt mondja szó, hogy perjel. 

És ahogy a józan ész csekk, mit perjel jelöli? Mit jelent az, ha perjel kérve a honlap? Ön kérheti, hogy minden alkalommal. A legtöbb bármikor meglátogat egy honlapot, akkor Nem kell begépelnie a fájl nevét. Valószínűleg csak megy a Facebook.com, lép, gmail.com, vagy hasonlók. És mit jelent perjel képviselnek? Milyen fájl? Vagy mi az oldal, konkrétan? 

Az index, igen. Tehát az alapértelmezett oldalt. Tehát, ha nem adja meg a fájl Íme a kezdjük látni, te tényleg csak megkereső adj alapértelmezett oldala Facebook vagy adj a postaládájába, vagy adjon nekem alapértelmezett oldala hírek A CNN honlapján, vagy hasonlók. És a szerveren, majd válaszol a azt az üzenetet valami mint ez, azt mondja igen, én beszélnek HTTP 1.1-es verziója. 

200, amely egy állapot kód, amit az emberek ritkán valaha is látni, mert ez jó. Mert ez azt jelenti, OK, a kérelem érkezett, és megfelelően kezelik. És a tartalom típusa nyilván a választ elég gyakran, de nem mindig, a szöveget. És konkrétan, HTML. És ez valóban ahol megnézzük ma. 

Tehát valójában, én megyek előre, és nyissa meg a böngészőben. Megyek a Chrome, akkor a legtöbb olyan böngésző elkövetkező hetekben. Általában azt javasoljuk, Chrome mert ez különösen jó a szoftverfejlesztők számára. Van rajta egy csomó beépített eszközöket, amelyek megkönnyítik fejlesztése nem csak a HTML és CSS, dolgokat fogunk kezdeni beszélni ma, hanem más nyelveken is. 

És én megyek előre, és menjen az alábbiakra: Megyek ellenőrzése kattintson jobb vagy kattintson bárhol a weblapon. És fogok menni Elem vizsgálata. És fogok alakítom a képernyőn csak egy kicsit itt. Hadd mozgatni ezt az aljára. Szóval ez az, amit a neve Chrome felügyelő. Tehát ez olyan, mint egy hibakereső eszköz beépített Chrome. 

Minden már van ez a ha már a Chrome. És ez lehetővé teszi, hogy mi folyik A a motorháztető alatt néhány weboldalt. Úgyhogy valóban megteszi a nézd meg ezt a következőképpen. Ez így több jellemzői és mi érdekel ma. De van ezeket a lapokat ide. Elemek, hálózat, források, idővonal, és egyéb dolgok. Megyek kattintson Hálózat egy pillanatra. 

És ez egy kicsit nyomasztó első pillantásra itt. De mit fogok csinálni, hogy hagyjuk nekem egyszerűsíteni, hogy egy kicsit. Megyek, hogy bekapcsolja a felvétel világos, hogy ez a piros. És fogok mondani megőrzése napló. És ez csak egy kicsit dolog, amit kitaláltam idővel ez fog menteni minden, ami történik a böngészőben. És most megyek hogy http://facebook.com. 

Igazából, csináljuk www a jó intézkedés, perjel. Belép. Tehát egy URL, hogy sok lehet, hogy meglátogatott. És most a Facebook internetes oldal jön fel a tetején. És akkor egy csomó cucc repült alján. És valóban, kiderül, hogy amikor meglátogatja Facebook.com, akkor nem csak, hogy egy HTTP kérés, kiderül, hogy fog Facebook.com küld 41 ilyen boríték, mindegyik saját GET kérés, jelzett, bár a paraván mögött itt, a képernyő alján, ez azt jelzi, hogy valóban, az én böngésző készült 41 a kéréseket. 

És összesen, azt át 861 kilobájt, és vett valamilyen okból több mint nyolc másodperc Töltse le az egésznek. Szóval ez tényleg egy kicsit fura hogy a Facebook oldalára venné, hogy Hosszú, de ám legyen ebben az esetben. Most, mindez nem igazán érdekel mintegy kivéve a legfelső kérést. Szóval menjünk ez itt és hadd kicsinyítés csak egy pillanatra. 

És hadd ráközelít ezt. Tehát amit én kelt maradt annak ellenére, van egy csomó folyik ott A amit kiemelt Facebook.com majd észre, hogy én vagyok gördülnek le, gördülnek le, lefelé görgetve, kérni fejlécet. És látni fogod, hogy a Chrome mutat nekem alapvetően a belső tartalmát A kérelem tettem. Ez nem a formázás egy kicsit más módon, de észre ott említést kap, észre van említés a házigazda, Facebook.com, az út, vagy perjel, amely a fájl kértem. 

És akkor, ha görgetni másolatot készíteni, akkor a ténylegesen látjuk, hogy mit Facebook visszatért Nekem van az összes ilyen fejléceket. Így aztán az a virtuális borítékban Valóban sok a legfontosabb érték párokat. Egy szó, egy kettőspont, majd egy érték. Egy szó, egy kettőspont, és értéke. Ezek az úgynevezett fejlécek. És van módja részletesebben itt, mint mi tényleg érdekel most. 

De ez a második, hogy utolsó odalent, észre, hogy a Facebook.com szerverén, Valóban azt mondta itt jön néhány szöveget HTML. Szóval ez az egész, hogy azt mondják, hogy ha Ön olyan web oldalt egy böngésző egy szerver, hogy szerver válaszol egy borítékot saját belsejében, amely szöveget. Más szavakkal, a HTML. Hypertext Markup Language. Amely egy másik nyelvet hogy be ma hogy az ember vagy számítógép generál végrehajtása érdekében weboldalakat. 

Pontosabban, nézzük meg ezt. Megyek most menj vissza a Facebook honlapján. És fogok csak kontroll kattintással, vagy jobb klikk és kattintson Oldal forrásának megtekintése. És akkor is, ha nem használja Chrome, IE képes erre, a Firefox képes erre, Safari képes erre, bár a menü lehetőségek tűnhet egy kicsit más. És ez az a HTML, hogy Mark és cég Facebook írtak. 

És hogy közösen, ezen a nyelven itt végrehajtja a kék és a fehér oldal hogy láttunk egy perce. Nos, ez egy kicsit nyomasztó. De ha megnézzük akár a bal felső sarokban, mi vagyunk fog kezdeni, hogy néhány mintát. Úgy néz ki, van egy csomó Ezen nyitott hegyes zárójel és akkor ott van ez a kulcsszó HTML. Itt egy újabb nyílt hegyes zárójel és a fej. 

Itt van, ha lépjünk le és le-le, én vagyok fog menni előre, és próbálja keresni valamit. Ott úton át a jobb Itt tart nyitva tartó szervezet. És emlékszem a múlt Ideje tehát javasolt hogy a legegyszerűbb weboldal hogy az emberi írhatna Lehet nézni egy kicsit valami ilyesmi. Nyitott HTML tag, nyitott vezetője tag, nyitott címben tag, majd zárt címet, zárt fej, nyitott body tag, szöveget, zárt karosszéria, zárt HTML. 

De egy kis szünet van csak egy pillanatra. Ez a kód, akkor is, ha már soha nem írt előtt de még mindig nem egészen értem mi folyik itt, jól néz ki. Jobb, nagyon tiszta. Ez nagyon stilisztikailag szép. Sok behúzás és a fehér térben. Facebook nem. Akkor miért van olyan sok Facebook Rosszabb, mint a HTML-t? Úgy látszik. 

Jobb ez, mint egy Ötből stílusban. Van egy kényszerítő ok számukra, hogy csökkentsék ezeket a sarkokat. Rendben, így nem akar megkönnyíti az Ön számára, hogy elolvassa. Tehát bizonyos értelemben, ők obfuscating ez, valami kézzel-lábbal, hogy legalább esztétikailag így hogy nehezebb a Myspace hogy menjen, és letépik a honlapon és a HTML érte. Kiderül, hogy a programok bár, beleértve a Chrome, mi is tiszta ez akár szuper könnyen. Tehát nem elég, hogy lehet az oka. Mi más lehet az oka. Igen. Ja, fehér térben költségek adatokat. Mire gondolsz? Igen, pontosan. Ha bejön a Tab gombot sokat vagy a szóköz, fontolja meg a következményeit. Szóval minden gombot a billentyűzeten egy [Hallhatatlan] képviseletében a egy bájt. 

Tehát tegyük fel, hogy Mark vagy a fejlesztőknek Ezekben a napokban eléri a szóközt csak egyszer ebben a HTML oldalt képviseli Facebook honlapján. És a Facebook már sok A felhasználók manapság. Tehát tegyük fel, hogy a Facebook honlapján látogatja egymilliárd ember ma. És valaki a Facebook nyomja meg a szóköz csak egyszer. 

Tehát egy további byte, Egy milliárd kéri, mennyivel több adat áll Facebook átadó az interneten mert valaki megüt a szóközt az ő billentyűzet? Egy milliárd byte, vagy egy gigabájt adatokat küld a Facebook szerverek hogy az emberek szerte a világ minden ok nélkül. Most, hogy ez csak egy helyet. 

Képzeld el, ha valóban tiszta ez dolgot, és beljebb, és hozzátette sok fehér térben és A tab karaktereket és terek, akkor a végén kiadások gigabájt, ha nem terra karakter van még hely. És így szuper gyakori az tényleges világa webfejlesztés hogy minify a kódot. És akkor végül látni hogyan teheti ezt. 

De ma, elkezdünk írni kódot Ez tulajdonképpen által olvasható nálunk, embereknél. Kiderül azonban, ha megy vissza hogy ezt az eszközt a Chrome Elem vizsgálata, Korábban voltunk a Hálózat fülön. Kiderül, hogy ha megy a elemek lapon, amit valóban látni A Chrome elég nyomtatott változata, amely ugyanazt a HTML. Így már deobfuscated meg. Szóval ez nem illik a számítógéphez. És most már tényleg kattintson körül, és indítsa hogy a hierarchia, amely egy internetes oldalon. Szóval valójában ezt. Én megyek előre, és nyissa fel én Mac nevű program szöveget szerkeszteni. És emlékszem, hogy ez csak Egy szuper egyszerű szöveges programot. A Windows van notepad.exe. És fogok Verbatim írja be a következő. Doc típusú HTML, nyitó zárójel HTML, zárt konzol HTML, mi van a feje az oldal itt, a végén a feje az oldal itt, cím lesz, mint, hello world. 

És akkor itt lent van szükségünk A test a weboldalt. Furgon. És akkor itt, hello world. Minden rendben. Így már írt egy szuper gyors internetes oldalon. Megyek mentse el hello.html az asztalon. My Mac megy panaszkodni, arra gondoltam, hogy, várj egy percet, ez egy szöveges fájl, do szeretné nevezni .txt? De nem, szeretném használni dot HTML. 

És akkor mi van, ha én szép csak dupla kattintás ezt a fájlt, hello.html, itt az én weboldalt. Sajnos, én vagyok a egyetlen ember a világon aki erre az oldalra most. Mert hol ér élnek látszólag? Ez az én Mac, ugye? Ami haszontalan. Mint senki ebben a szobában nem beszélve az interneten ténylegesen látogasson oldalon. Tehát ma, meg kell be egy másik elem. 

És hogy ezt, megyek megy előre, és nyissa meg a Cloud 9. Tehát Cloud 9 természetesen egy felhő alapú service-- CS50 IDE--, amely az összes a munkaterületek futó valahol az interneten. És ez azt jelenti, hogy minden kedves fájlok a nyilvánosan hozzáférhető már. Szóval menjünk előre, és erre. Megyek megy előre, és hozzon létre egy új fájlt NCS50IDE. Megyek, hogy mentse meg, mint korábban mint hello.html és a Mentés gombra. És most csak időt takarít meg, megyek hogy menjen előre, és másolja be ezt a kódot ahelyett, írja be ismét. És mentsd el. És így most van egy nevű fájlt hello.html. De hogyan Igazából nyissa meg a weboldalt? Nos, kiderült, hogy a beépített hogy CS50 IDE nem csak egy fordítóprogram, mint csengés és egy hibakereső, mint a GDB és csokor más programok, van valójában egy teljes értékű webszerver fut belül CS50 IDE. 

Minden van, vagyis, Van saját webszerver. A webszerver és csak egy darab A szoftver, aminek a célja az életben az, hogy szolgálja a weboldalak. Ahhoz érkező kéréseket böngészők és válaszolnak kis virtuális borítékok amelynek belsejében van a tartalommal, hogy én írtam. Tehát ez a webszerver valóban szabad és nyílt forráskódú. Ahol a nyílt forráskódú csak azt jelenti, szoftverek hogy valaki másnak írva, hogy mindannyian valóban látni és letölteni, és még megváltoztatni a forráskódot. És ezt hívják az Apache. 

És tettük egy kicsit könnyebb Használja a CS50IDE hívja meg az Apache 50. Úgy, hogy a ténylegesen megérteni a következőket. Azt fogom mondani az Apache 50 kezd. És akkor én csak fog mondani dot. És látunk néhány valamelyest misztikus üzenetet, beállítás Apache dokumentum [? csoport?] hogy otthon, ubuntu, bármi is legyen az, perjel munkaterület. Kezdve webszerver Az Apache 2 sikeresen. 

Tehát hosszú történet rövid, én most megnyomott egy gombot, és be van kapcsolva a webszerver aki most hallgatta az interneten TCP porton 80, egy speciális címre. És itt azt mondja, és ez meg fog változni alapú a felhasználóneve és egyéb tényezők, de észre most, ha rákattint erre, IDE50 dot jharvard és így és igen, észre, hogy ennyi idő az elmúlt néhány hét, lehet, hogy Észrevettem, hogy a saját nevedre van ágyazva a jobb felső sarkában CS50IDE. 

És hogy valóban volt mindez időzíteni a címet, amelyen csak tudsz látogasson el az összes fájl az interneten keresztül. Eddig még nem számított, mert C-ben, általában szeretné a dolgokat futó terminál, nem az interneten. De ma, kezdjük írásban webes alapú kód hogy mi szeretnénk hozzáférhető nyilvános URL-eket. Szóval mit fogok tennie, hogy kattintson erre URL. 

És észre, hogy látok egy meglehetősen csúnya index, a könyvtár lista, de mi fájl ugrik ki, akkor valószínűleg? Hello.html. Ennek oka, hogy én mentettem A fájl az én munkaterületet. És amit eddig mondtam Apache web szerver van nézd Dávid munkaterület könyvtárba. És hagyd, hogy bárki a világot látni ezeket a fájlokat. 

És valóban, ha most kattintson hello.html, Látom belül ezen a lapon pontosan, hogy a fájl. Most észre, felhő 9 műve egy kicsit hasznos a számunkra. Belül CS50 IDE, észre van Hirtelen címsorába. Ennek oka, hogy bár mi vagyunk Chrome használatával, hogy látogassa CS50IDE, belsejében CS50IDE van saját változata a böngésző most. És így ahelyett, bonyolítaná a dolgokat, mint például, Megyek, hogy menjen előre és csak másolja ezt az URL. Megyek előre, és csak megy megnyitni a saját Chrome ablakot. Tehát nincs varázslat itt, nem CS50IDE. Csak megyek, hogy szó illessze én J Harvard URL-t és nyomja meg az Entert. És íme, most én, és elméletileg mindenkinek az interneten, ha már konfigurálva engedélyeket megfelelően, Látogasson el a fájlt. És így most, ha azt mondanám, hello.html, íme, ott az én hihetetlenül underwhelming weboldalt. Tehát lássuk gyors józanság csekket. Mivel minden, hogy fogalmi létre. És mi már nem igazán megtanította, hogyan kell írni HTML önmagában. Bármilyen kérdése eddig hogy mi is történt? Igen. Vajon CS50 saját ezeket a weboldalakat? Milyen értelemben? Jó kérdés. Tehát CS50 a tulajdonában CS50.io. Már valóban vásárolt, hogy a domain nevet. És a természet srácok belép CS50IDE, akkor az összes kap egy úgynevezett aldomain. 

Tehát IDE50-Malan, vagy IDE50-Rob.CS50.io, ez az egyedi címet belül a domain nevet. Így arra a célra a tanfolyam, van saját egyedi címet. De már egyszerűsített dolgokat vásárol a felső szintű domain, CS50 dot I / O és akkor mindenki mást is aztán az, hogy úgy mondjam. És akkor jöjjön vissza, hogy egy pár hétig valószínűleg, különösen a projekt végső alkalommal, amikor néhányan közületek Érdemes egy saját domain neveket. Ez valójában viszonylag egyszerű. Minden rendben. Úgyhogy most erre. Én megyek vissza CS50IDE, ahol a fájlt most, hello.html, egyáltalán nem olyan érdekes. Szeretnék tenni valamit egy kicsit szebb, mint ezt. Így fogok tenni valamit, mint ez. Hadd nyílt paragraphs.html. Tehát ez egy fájlt írtam korábban. A tetején úgy, mint Mindig, mi megjegyzéseket. De HTML, észrevételek Egy kicsit más. Hármason és 14. sor, akkor lásd a szintaxis megjegyzés kezdetét és a végén egy megjegyzést. 

De sem a cucc közötti ügyekben funkcionálisan. Ez csak egy megjegyzés, hogy a emberi, mi folyik itt. És ahogy egy gyors józanság ellenőrizze, ha lépjünk le, mi a kézenfekvő új tag, hogy már be? A címkék eddig láttunk nyitottak konzol HTML, head, title, és a test. De mi nyilvánvalóan új most? 

Igen, így p. A p tag vagy paragrafus. És akkor én csak kölcsön néhány alapértelmezett Latin szöveget képez én bekezdések. Mert amit akartam érzékeltetni, hogy hogyan lehet képviseli bekezdései szöveget HTML. És akkor mi kezd történni itt az, hogy van-e már a minta fejlődik. És hadd menjen előre, és nem ez. Hadd először kapcsolja ki az Apache. És azt fogom mondani, hogy elindítsa magát ismét benn a mai forrása hét m könyvtárban. Szóval, hogy van hozzáférése mindent. 

És most, ha megyek vissza ez a könyvtár lista, észre látom minden fájlt a mai. És látni fogod a következő probléma set, akkor útmutatást ad csinál pontosan ezt. Ha kinyitom paragraphs.html, ez lehet valamint néz ki, mint egy programozási nyelv Önnek, ha nem beszél, vagy latinul. De ez még csak három bekezdés A szövegeket jelölt HTML-ben. 

És észre a bekezdés szünetekkel egymás között. Mert kiderül, És bár talán hajlandó erre, mivel a való világban, Ha azt szeretnénk, hogy sorban szünetek között a dolgokat, lehet, hogy egészen egyszerűen Ehhez és a hit mentése. És most, ha én reload itt, értesítés hogy minden csak elmossa össze csak egy folt a szöveget. Mivel a HTML egyfajta néma nyelven. 

Ez azt jelentette, hogy kell használni, oly módon, hogy a böngésző csak nem kifejezetten amit mondani, hogy igen. Tehát, ha nem mondod meg adj egy új bekezdés, nem fogod látni egy új bekezdés. És valóban, amit a böngésző fogja csinálni Még ha bejön az Enter, mondjuk újra és újra és újra, mozgó ezt a szöveget módon lefelé a képernyőn, majd mentse majd töltse be újra a böngészőt megy széthullóban, hogy a fehér tér a csak egyetlen, jól látható szóköz. Minden rendben. Szóval ez a paragrafus. És akkor mi a minta ami a fejlődő itt? Nos, úgy tűnik, hogy a helyzet, hogy HTML szól kezdő tag és befejezve egy címke. És mi az a tag? Nos, ez csak egy darab szintaxis. Nyílt konzol, egy kulcsszó, Zárt konzol, egy tag. Vagy kezdeni tag. És akkor, ha éppen tette ki magad, mint végeztél a bekezdés, te úgy mondjam ellenkezője. De az ellenkezője nem egészen hátra. 

Egyszerűen előtag azonos címke Íme egy perjel, mint ez. Minden rendben. Szóval nem olyan izgalmas. És valóban, nem vagyunk téve a web minden sokkal érdekesebb. Mi van, ha azt akarom, hogy dolgokat nagyobb és merész? Így kiderül, hogy itt egy példa A headings.html, ahol a testem, Van egy H1 tag, H2, H3, négy, öt, vagy hat, amelyek mindegyike úgy tűnik, elég bonyolult. De ha elmegyek megnyitni ezt Például, vessünk egy pillantást. Headings.html. 

Tehát böngészők alapesetben adhat szöveges ez nagy és merész az eltérő méretű. H1 nagy. H6 kisebb, majd minden más között. Szóval ez érdekes, de még mindig Nem igazán a weben Tudom. Mi van, ha azt akarjuk, hogy van olyasmi, mint egy listája. . Tehát itt egy felsorolás a Három a Harvard házak. 

Hogyan megy körülbelül ezt? Nos, vessünk egy pillantást list.html. És itt látjuk a kis funkiness de nézzük meg, mi történik. Tehát az alapján, amit most láttam, UL áll a rendezetlen listát. Rendezetlen lista csak azt jelenti, pontokba szedett. Nincs számokat. Van még egy úgynevezett rendezett lista, amely OL a címkét. Aztán LI, lista elem mind az azt jelenti. 

És ez így automatikusan szám mindent neked. De ismétlem, minden az én behúzás fehér térben csak az én kedvemért. A böngésző nem ténylegesen fog érdekelni. Így, bár nem tudtad Ehhez, csak hogy tisztázzuk, ne annak ellenére, A böngésző még képes megérteni, hogy csak finom. Én üti reload én böngésző, én kattintva reload és nincs változás történik mert a böngésző még csinál pontosan azt, amit mondok, hogy igen. 

Minden rendben. Szóval ez az egész csak szöveget. Most nem valami érdekes. Megyek megy előre, és kölcsönkérni néhány ilyen HTML. Megyek megy előre, és hozzon létre egy új fájlt itt. És hívjuk ezt rick.html. Van aránytalanul Használt valami úgynevezett Rick Roll e osztály ebben az évben, nem tudom, ez csak úgy megtörtént szervesen. 

És most ez van az irányítást. Szóval én csak fog menni vele. És ha elmegyek Google Kép és Rick Astley. Ha nem tudod, hogy miért csináljuk ez, csak olvassa fel a Wikipedia. Minden alkalommal rákattintott a linkre, Valaki nevetett valahol. És hadd menjen ahead-- van megyünk, menjünk tekintse ezt. 

Tehát itt van egy A kép a Google Images. És tegyük fel, hogy ez ésszerűen mindenhol az interneten. Így fogok vállalni, hogy rendben velem hogy ténylegesen ez az én weboldalt. Megyek, hogy menjen előre és másolja a kép URL-jét. És most, ha megyek vissza a Cloud 9, lássuk, mit tehetek itt. Tehát itt csak egy weboldalt. Ez Rick Astley, haha, Megyek most menj vissza hogy a böngészőm, reload, és érdekes. 

Hol van Rick? Szóval hadd lássam, mi történt. Igazából fogok úgy tenni, mintha én nem tehetem. [Hallhatatlan] betette ide. Majd gyere vissza, hogy egy pillanat alatt. Tehát itt rick.html. Szóval ez nem Rick Astley. Így kiderül, mi is valóban hozzá, hogy itt legyen. Ez Rick Astley. Azt fogom mondani, hogy nekem egy képet, amelynek forrás URL Én csak másolt, amely látszólag boldog születésnapi vagy valami más. 

És most megyek csukja be a kulcsszó, mint ez. Szóval ez csomagolópapír nagyon hosszú. De észre, hogy minden, amit végzett nyitva tartó kép, forrás attribútumot e. És ez egy nagyon hosszú URL-t. És a legvégén, ezt észre. Miért tettem perjel szögletes zárójel ahelyett, mint minden más tag, amelynek nyitó zárójel, IMG, zárt konzol? Csak akkor gondolom akkor is, ha nincs ismerete egyáltalán HTML előtt. 

Tehát hogyan záródik A parancs, de miért nem is igazán intuitív értelme csinálni valamit, egy kicsit bőbeszédű mint a közeli kép? Igen. Igen. Csak szemantikailag, nincs értelme a kezdve egy képet, és szüntesse meg a kép, ez vagy van, vagy nem. Tehát nincs értelme, hogy hagyjon másra belsejében egy képet. Csak azt nem tudja, hogy. És így a szintaxis általában azt is csak hogy nem a perjel belül A nyílt tag vagy a kezdő tag majd nyomja meg a Mentés gombot. 

Tehát ha én most újratöltődik ezt a fájlt, most Van egy jó weblaphoz főzési itt. És akkor egyszerûen Tényleg bosszantani az embereket ágyazzák helyett mint egy YouTube linket. És valóban, bármikor amit valaha ment a YouTube-ra, és hadd valójában véletlenül Rick dobni magam itt. Tehát Rick roll. Szóval Rick roll-- fogok menni innen. 

[Zenelejátszási] 

OK, egy személy tetszett. Tehát észre ennyi idő, ha kattintson a Megosztás linkre, természetesen az URL, hogy ténylegesen beágyazni egy e-mailt, vagy egy törvényszéki kép vagy egy probléma beállítani, vagy egy dián. És most, ha én inkább kattints embed, észre, hogy ebben az időben, ez a cucc ott volt. Megyek megy előre, és másolja ezt. 

És csak így láthatjuk, hogy jobb vagyok fog illessze be az én szövegszerkesztő. Figyeljük meg, hogy ez az, amit A YouTube már mondom. Minden alkalommal, amikor meglátogat egy YouTube video, ha szeretné beágyazni a videót weboldalt, egyszerűen fogd ezt. Tehát ez egy újabb HTML tag úgynevezett iframe. Vagy egy sorban keretben. Szóval ez is úgy néz ki, egy kicsit összetettebb, mint az összes többi. Így kiderül, hogy a kép címkét, és úgy tűnik, az iframe címkét hogy az úgynevezett attribútumok. 

És ez a másik darab szintaxis HTML-ben. Amellett, hogy a címke nevet, nyitó zárójel tag nevét, akkor az ellenőrzés a viselkedését a kulcsszó azáltal, hogy egy csomó tulajdonság egyenlő értéket. Képesség egyenlő értéket. És így például YouTube mondja nekünk ha azt szeretnénk, a szélessége ezt a videót hogy 420 képpont, és a magasság hogy 315 pixel, ez hogyan kifejezni, hogy a HTML-ben. 

A forrás a videó megy hogy lehet, hogy a hosszú YouTube URL majd néhány más dolgot mint a kocka határától nulla, így valószínűleg azt jelenti, van Nincs határ körül a dolog. Hagyja teljes képernyős valószínűleg azt jelenti, hogy a felhasználó kattintson a gombra, és valóban teljes képernyős videó. Tehát, ha azt szeretné, hogy legyen lenyűgöző itt Rick dot HTML, helyett használja a kép címkét, hadd én törölni, hogy ahelyett, hogy be ezt. És most újratöltődik. És most megint itt vagyunk. Rendben, ennyi elég. Rendben így megpróbálom Nehéz nem ezt megismételni. Tehát melyek az elvitelre itt? Tehát HTML, olyan csúnya, mint Oldalainkon vannak, valójában nagyon egyszerű. Ez nem egy programozási nyelv. Nem kell funkciókat. Nem kell hurkok. Nem rendelkezik feltételeket. Minden azt is tucatnyi különböző címkék, amelyek mindegyike nulla vagy több attribútum. És valóban, mi a szórakoztató mintegy HTML elkezd merülni az, hogy ez nagyon egyéni tanítható. 

Minden úgy megértése Az általános keret HTML. Mi az a tag, mi az a tulajdonság, hogyan konfigurálni egy weboldal alábbiak szerint. És minden mást valóban az eredmény felnézni egy online referencia vagy googling hogyan kell csinálni néhány technika vagy mint láttuk, nézi Facebook forrás kódot, néztem a honlapon hogy tetszik a forráskódja és hogy miként az a fejlesztők ott ténylegesen megállapított dolgokat. 

Így nem tehetünk képeket is. És valóban, megcsináltuk egy perccel ezelőtt. Hadd menjen előre, és csak megmutatom. Íme néhány példa kódot. Ha valaha szeretné látni morcos macska. Szóval észre, hogy én is Van egy kép kulcsszó itt. És van egy megjegyzést fölötte. Van egy alternatív szöveget az akadálymentesítés. Szóval valaki, aki egy képernyő olvasó okokból látvány ténylegesen majd a képernyőolvasó mondani morcos macska. Mert ha nem tudnak lásd a képen, legalább van számítógépük mondd meg nekik szóban mi az. És a forrása, hogy a fájl cat.jpeg. Tehát valójában, ha igazán akartam hogy okos, mit tudtam volna done-- Megígérem, hogy nem megy a Rick Astley, így Megyek google egy macska helyett. És ha elmegyek Google Images itt, és azt feltételezzük, hogy ez egy kép a macska. 

Tegyük fel, hogy van-szabályozás kattintott vagy a jobb kattintás ezt, véletlenül hátborzongató. És cat.jpeg megyek menteni az asztalon. Hadd menjek vissza a Cloud 9. Figyeljük meg, hogy itt, tudom megy feltölteni a helyi fájlokat. És ha én fogd ezt fájlt, cat.jpeg, felmondási hogy tudok húzza, és vidd be Cloud 9 és ez meg fog kiabálni velem van. 

Hiszen már adott neked cat.jpeg fájlt, de ez szuper könnyű megragad egy fotót, hogy már kivett Facebook vagy a Flickr vagy hasonló és valóban fogd és vidd azt a felhő 9 majd tenni része a saját személyes honlap vagy probléma állítsa hét vagy nyolc ahogy hamarosan látni. És akkor, amikor Végül látogasson el a macskát, feltételezve Letöltöttem, hogy ugyanaz a macska, értesítést hogy-- hogy imádnivaló volt. 

Mit szeretnél látni az valami ilyesmi arca van. Tehát a fájlokat hivatkozás egy weboldalon lehet akár a helyi saját számlára vagy távoli, de más szerveren mint abban az esetben, a Rick Astley fotó egy kicsit ezelőtt. Szóval, ha else-- mi mást tehetnénk itt? Szóval vessünk egy pillantást a következő. Tudod, mi a fajta jó? 

Mi mindeddig így nagyon statikus weboldalakat. Azt akarom, hogy vértezze fel a dolgokat az alábbiak szerint. Azt akarom, hogy az én saját keresője. Tehát, hogy egy kereső, hadd megy előre, és kezdjük ezt el. Megyek előre, és hozzon létre menni egy új fájlt nevű search.html. És mi prefabed verzió online. Hoppá. Ne illessze be a terminál ablakot. Előregyártott verzió online. És fogok kezdeni az alábbiak szerint. Tehát itt az elején nevű fájlt search.html. Megyek mentse el mai forrás könyvtár. Én fogom hívni erre a keresésre. Tulajdonképpen mi legyen jobb. CS50 Keresés és ténylegesen márka is. És most, fogok mondani olyasmi, mint a H1 CS50 Keresés. És akkor itt lent, H2 hamarosan. És csak azért, hogy újra bedugni, H1 és H2 jelenti, amit rendre? 

Igen, nagy és merész, és nem olyan nagy, de még mindig merész. Tehát ha menteni ezt, és menj ide, lássuk a fájl search.html. Rendben, és ez az egyik az right-- [hallható]. Készenlét. David zavaros. Ó, ez ott. David egy idióta. OKÉ. Szóval ez van. Tehát CS50 keresési hamarosan. Tehát most, nézzük szintetizálni mit csináltunk a múlt héten. 

Hol beszélgettünk a alacsonyabb szintű mechanika HTTP. És ezek az új gondolatok HTML, ami csak ez a jelölőnyelv, ahol mondani egy böngésző pontosan mit kell csinálni és végre a saját keresőmotort. Tehát ahelyett, hogy csak mondván hamarosan, én vagyok fogja bemutatni egy úgynevezett form tag. És ebben a formában, megyek Van valami, mint egy beviteli mező. 

És a neve ennek a bemeneti mező, fogom nevezni Q. És milyen típusú ez a beviteli mező Azt fogom mondani csak "text". És a szövegmezőbe, mivel mi lásd, csak egy szövegmezőbe. És ez így nem érzékeli ide, hogy bármi belsejében is ezen a ponton. És így én egyszerűen megy hogy lezárja a címkét, hogy perjel közvetlenül a tag maga. És akkor fogok Van egy másik bemenet. Input type egyenlő benyújtania. És akkor fogok zárja ezt is. 

És most megyek vissza ide. És már látjuk, bár elég csúnya, én már Megvan a kezdetei saját kereső oldal itt. Sőt, hadd próbálja tiszta ez egy kicsit. Kiderül, hogy a Az itt felvitt, tudok Egy másik tulajdonsága az úgynevezett helyfoglaló. És talán valami ilyesmit kulcsszavak, vagy pontosabban, lekérdezni q. 

És észre, most, azt kell ez a fajta szürke szöveg hogy eltűnik, amint elkezdek gépelni, de ez talán valami láttad más weboldalak. Én nem nagyon szeretem a Küldés gombra. Úgyhogy tényleg fog adni a Küldés gombra a keresés értéke. És most, ha én újratölteni, észre, hogy én gombra válik elemzi keresést. Tudod, én nem igazán mint a logót. Tehát a Google betűtípus generátor. 

Azt akarom, hogy vértezze ezt fel tovább. Tehát CS50 keresést. Hadd létre a saját logóját. Hogy néz ki. Tehát most hadd menteni ezt as-- gyerünk. Hol fog ez? Van. OKÉ. Lemaradtam. Mentés másként. Hülye böngészők. Állj meg, megyünk erősít ez egyszer és mindenkorra. Ott vagyunk. Minden rendben. Bocsánat. Ki napon. Most ez a funky. Kilépés a teljes képernyős. Minden rendben. 

Most, mint egy normál személy, Kép mentése más néven. Logo.gif. Most fogok menni CS50IDE és Megyek egyszerűen megragad a logó, Megyek húzza be A forrásom hét könyvtár, fájl már létezik, jól vagyok ezzel. Így fogok, hogy felülírja azt mert már megvolt. És most hogyan megszabadulni ez? 

Menjünk előre és tedd kép forrása megegyezik logo.gif. Zárja be ezt. Mentés. És most, ha megyek vissza a keresési oldal, most már keres nagyon jó. Rendben, tehát nem ma elég történik semmi hasznosat. Sőt, hadd próbálja megkeresni egy macska, és meglátjuk, mi történik. Macskák. Basszus. Ez nem csak a munka, úgy tűnik. Szóval mi a legfontosabb darabja ami hiányzik itt? 

Jobb, ha nem tudod, HTML, Elkezdtem jelölés fel a telefont formában és én már mondtam, hogy hogyan juthatunk bemenet, adj egy szövegmezőbe, és egy küldés gombot, milyen darabot láthatóan hiányzik? Tegyük fel, hogy szeretnénk, hogy valóban kap ez a dolog működik. Mit kell tennünk? Szükségünk van arra, hogy hajtsák végre a háttérben adatbázis vagy a kereső magát, és hogy fog tartani egy csomó időt, őszintén szólva. 

Úgy emlékszem, mit csináltunk utoljára. Tehát, ha keres valamit a Google és már előre ki van kapcsolva, Emlékezzünk, azonnali keresés. Szóval hadd viszont, hogy ki így ez a ténylegesen úgy viselkedik, mint egy idősebb iskola böngésző, Ha most keresni valamit, mint a macskák, felidézni, amit az URL így néz ki. Ez elég rejtélyes. De ágyazva ott, Emlékezzünk, a perjel keresést. Kérdőjel q egyenlő macskák. 

És ez úgy tűnik, hogy adjon nekem egy csomó keresési eredményeket. Szóval tudja, mit fogok csinálni? Megyek kölcsön A Google csak egy percre. Én megyek át Itt és fogok mondani hogy ez képezi intézkedés vagy hely, hogy úgy mondjam, kell szó szerint a Google. És a módszer akartam használat után lesz kap. 

Tehát mi fellépés? Cselekvésre van furcsa nevű, de ez csak azt jelenti, ki fogja kezelni Az akció ebben a formában? Ha rákattintok Keresés, ahol Abban az esetben, menni? És ha most visszatérek a formában Itt és újratölti a weboldalamon és most keres valami mint a kutya, észre most Én újra végrehajtani a Google. Jobb? 

Ha azt szeretnénk, hogy keressen valamit mást, működik, mert nem csak a kutyák, ez is működik, a macskák. Úgy is működik a CS50. És OK, ez csak alatt whelming, nem? Rendben, de ez tényleg működik. Szóval mi ténylegesen folyik itt? Szóval már tanítottam a böngésző segítségével HTML, hogy felhasználói bevitelt és valóban elküldi a bemenet egy távoli szerverre HTTP-n. 

És mivel a böngészőm megérti HTTP, hogy valójában megépíteni a URL-t, hogy amit Én a végén több mint a böngészőm, észre, mi történik amikor kerestem kutya. Ha rákattintok Keresés észre, hogy Az URL változik akartam hogy google.com/search~~V lekérdezés megegyezik kutya. És ez azért van, mert a formája tudja, mert a módszer kap, egyszerűen hozzáfűzi, hogy az URL-ott. 

Nos, ezek a weboldalak még mindig csúnya. Úgyhogy bevezetni egy másik darab szintaxis ha tudjuk ma. És ez az, amit az ismert a Cascading Style Sheets. Szóval hadd vessen egy pillantást Ebben a példában itt megtekinthet ha meg tudjuk következtetni, hogy mi folyik. Ez CSS0.html. És ez az, ahol a dolgok egy kicsit csúnya. Mert sajnos, A világ a web, HTML önmagában nem képes mindent megtenni. És ezért ha azt szeretnénk, hogy stilizálhatja a weboldal, ha valóban szükség van, hogy összpontosítson a esztétika másképp. Tehát itt, van a test az én web oldal, amelynek belsejében egy nagy div. És egy div csak azt jelenti részlege. Tehát ez olyan, mint egy bekezdés, de nem rendelkezik az azonos szemantikája A szövegbekezdést. 

Ez csak azt jelenti, hogy a böngésző, itt jön egy nagy téglalap alakú területet az én web oldal, szeretnék kezelni speciálisan. Most, 21-es vonal van, ahol ez div kezdődik. És csak akkor gondolom. Milyen hatással van a 21-es vonal a többi a tartalmát az oldal? Középre. Ez minden. Tehát nem láttunk egy módja valójában központosító a szöveget. 

Sőt, az én kereső, ellentétben a tényleges Google, volt minden indokolt a bal oldalra. És így most a 21. sort, azt mondom, hé böngésző, hozzon létre egy részlege az oldalon. Csak adj egy nagy, láthatatlan téglalap. Így szeretnék gondoljon a weboldalt. És akkor stilizálhatja az alábbiak szerint. Belül e idézetek, Most, a második nyelv hogy mi vezetett a mai nevű Cascading Style Sheets. Szerencsére, ez is nem egy programozási nyelv, így nagyon korlátozott a szintaxist, de is nagyon korlátozott funkcionalitás mivel HTML szól jelölést, hogy az adatokat egy weboldal és a szerkezet egy internetes oldalon. CSS általában a utolsó mérföld, az esztétika, szerzés a méret és a szín és a elhelyezését pontosan így van egy internetes oldalon. És valóban, ez képződik a legfontosabb érték párokat. 

Egy tulajdonság, mint ez, szöveges összehangolása, kettőspont követi, majd az értéke, hogy a tulajdonság, amely ebben az esetben az, központ. És most észrevenni, ágyazhatók ezeket a dolgokat. Ha akartam mindent, hogy Amit kiemelt, hogy középre, ezért is van vonal 21 és A megfelelő sor 31. De tegyük fel, most azt akarom mondani, John Harvard, üdvözlöm a saját honlapomat. 

Copyright jelet John Harvard. És tegyük fel akarok az első Ezen a vonalon, hogy elég nagy. 36 pixel. Szóval ez egy tisztességes méretű. És szerettem volna a súlya, hogy merész. De aztán alatta, Azt akarom, kisebb szöveget. És alatta, azt akarom, még kisebb szöveget. Bocsánat. Ma úgy érzi, mintha az egész nap szabad. 

Tehát most, mit csinálok, hogy ezt? Itt a 22. sorban egy beágyazott div vagy egymásba ágyazott div, ha úgy tetszik. Ez is megvan a saját stílusa tag. Azt adja betűmérettel 36. Én meg egy font súlyú merész. Itt lent, én csak adja meg 24 pixel. És végül, a 28. sor, általam megadott 12. Ahogyan tehát egy gyors józanság ellenőrzés és mint ember ezt olvasod, amely szó a képernyőn valóban lesz merész? Mely vonalak valóban merész? 

Csak John Harvard. Jobb? Mert ahogy a 22. sorban mondja hé böngésző, itt egy részlege az oldalon. Legyen ez a betűméret 36 pont. Hogy a font súlyú merész. Amint eléred a megfelelő zárócímkét vagy zárt címke 24. sor, Ez azt jelenti, hé böngésző, abbahagyni bármit is csinálsz. És észre, hogy világos legyen, annak ellenére, 22. sor mindezekkel a tulajdonságokkal mint a stílus, ha lezárja a címkét a 24. sor, csak megemlíteni a tag nevét. 

Nem ismétlem a szót stílus vagy minden, ami van benne ilyen idézetek. És így ha nézem ezt most a böngészőm, vessünk Egy pillantás a végeredmény. Engedj el előre, hogy ez a fájl, ami CSS 0. És ez még mindig elég sima, de kezd nagyon érdekes. De kiderül, van Más dolog, amit tehetünk itt, és azzal a veszéllyel jár, hogy ez teljesen undorító, megemlítem, hogy az én testülete a weboldalamon, Meg tudom csinálni valami vicceset mint bg vagy háttér színe. 

És gyorsan, mi a kedvenc színe? Zöld hallottam. Minden rendben. Tehát most, ha elütöttem reload most, van egy zöld weboldal. Rendben, ez nem is rossz. És most, ha azt akarom, hogy ez valóban Hűvös, tudom, hogy milyen színű legyen a szöveg akár piros. Szóval lássuk, mi ez úgy néz ki, mint. Most már keres nagyon jó. És itt lent, ha igazán akar bajlódni valaki vagy ha azt szeretné, hogy Egyike azoknak az embereknek, akik megpróbálja trükk, amit a látogató egy web Oldal mert már becsapott Google a gondolkodás van egy csomó kulcsszavak általam elvártnál lássuk, reload. Hol ment? És ott minket. Minden rendben. Tehát azt mondom, hogy ez egy félre, akkor beszélni ezt a dolgot néhány hét alatt amikor arról beszélünk, biztonság, ha valóban beágyazni egész csokor kulcsszavak weblapon még ha ők nem látható a emberi, valaki, mint a Google, persze, még valóban megtalálja ezt. Rendben, szóval ez elég förtelmes elég gyorsan. 

És valóban, ez még nem minden hogy sokkal ellentétben a saját web oldal, mint az alapképzésben, amely Elkezdtem googling körül, hogy megtalálják korábbi változatait régi honlapok. Ez elég rossz volt. Ami azt illeti, úgy találta, Egy mindössze osztály előtt. De van rosszabb odakint. Ez nyilván az én nyitólap vissza 1996-ban. Úgy látszik, azt hittem, megfelelő kérni az embereket a nevüket mielőtt tudtak valóban látom a weboldalon. 

Aztán megmutattam nekik valami hülyeséget, valószínűleg. Én ásni többet legközelebb. De most nézzük fontolja meg egy kicsit a design. Beszéltünk stílusban. És ezt az oldalt eddig és a legtöbb mindent írtam elég tiszta stilisztikailag. De mi a helyzet a design? Nos, van egy csomó redundancia amit én csináltam itt. 

Már említettem a szót szín egy-két helyen. Már említettem betűméret pár helyek és merész, egy-két helyen. És alapvetően, én vagyok együttműködés keveredés a két nyelvet. Megvan HTML én címkék és én tulajdonítja, majd hirtelen, idézőjelek között, azt kell A második nyelv ma nevű CSS, amely megint csak ezek a kulcs érték párok vagy ezeket a tulajdonságokat választja el. 

Kiderül, hogy mennyi mint C-ben, ahol lehet kezdeni faktort ki Néhány kódot header fájlok, így tehetünk ugyanazt a HTML-ben. És egy lépés, hogy a következő. Figyeljük meg, hogy ez a verzió, CSS1.html van Szerkezetileg pontosan ugyanazt a weboldalt. Így kaptam egy csomó A divs, de ez alkalommal, én már megszabadult a borítás div mint látni fogod. 

És adtam a három divs felső, középső és alsó, egyedi azonosítók. Ez szép és jó, mert a hogy az olyan részlegek Az oldal egyedi azonosítók, Azt lehet hivatkozni rájuk máshol. Ahol? Nos, hadd lépjünk fel. És eddig bármikor átnéztük élén egy weboldalt, mi az egyetlen tag is megvolt a a feje egy weboldal? Egy kicsit hangosabban. Csak a címet eddig. De kiderül, van néhány más dolog akkor tedd oda, egyik amely úgy hívják stílusban tag. Tehát egy perce néztünk A stílus attribútum. Kiderült, hogy van egy stílusa tag. Tartozik belsejét a feje egy internetes oldalon. És most észre, hogy mit csinálok. Van benne e stílust tag a következő. Én szó szerint idéző ​​on line 20 A Nevét egy címkét, hogy szeretnék stilizálhatja. 

Aztán van nyitva kapcsos zárójel és zárt kapcsos zárójel. Tehát hasonló szellemiségben C, de ismét, ez nem egy függvény, ez csak egy szintaktikai részletek itt. És akkor persze, én mondom A böngésző, hé böngésző, hogy az egész test az oldal Van egy szöveg igazítását a központtól. És akkor ez azt mondja, a következő. Hé böngésző, ha megjelenik egy HTML eleme vagy tag az oldalon, amely van egy egyedi azonosítója top, így a hash szimbólum itt csak azt jelenti, egyedi ötlet kiváló, megy előre, és hogy a betűméret 36 és font súlyú merész. 

Hé böngésző, egy elem, amelynek Azonosító közepén, hogy 24 pixel. És hé böngésző, ha megjelenik egy ötlete alján, hogy 12 pixel. A hatás a végén pontosan sam. Ha bemegyek a CSS 1, a oldal ugyanúgy néz ki. De mi egy lépéssel közelebb Egy kicsit jobb design. Hadd menjek vissza ide CSS2 és mi mást csináltam. 

Most a lap nagyon, nagyon tiszta. Sőt, azt is illik az összes tartalmát egy oldalon van. De milyen új tag tettem bevezetett, nyilván? Link. És ez nem a legjobb név egy tag, mert ez nem egy link abban az értelemben, hogy tudjuk, de ez azt jelenti, egy link egy másik fájl. Ez olyan, mint az éles tartalmazza a C. 

Ez az út a HTML mondani hé böngésző, menj a tartalmát a fájl neve css2.css. A kapcsolat, nekem, az, hogy ez egy stíluslapot. És valóban, ez az, amit az egyik S a Cascading Style Sheets segítségével. Ez egy stíluslapot. Ez csak a szöveget tartalmazó fájl egy csomó ingatlan. Ez egy csomó stílusok hogy az alkalmazni kívánt az oldalra. 

És így ez látszólag hivatkozva egy második fájlban. És ha kinyitom, hogy CSS2.css, észre, hogy amit tettem van másolja a E át ezt a fájlt. És most, akkor is, ha soha nem kódolt ezt a dolgot, mielőtt, csak úgy a közmondásos mérnöki kalap A, miért van ez a jobb tervezés Valószínűleg? Faktoring ki azokat a CSS tulajdonságokat, helyezzük el őket a saját fájl. Annak ellenére, hogy megoldotta ezt probléma, mint öt perccel ezelőtt a legelső verzió. 

Már nem javult a Oldal stilisztikailag, ez csak jobb tervezés bizonyos értelemben. Miért gondolod? Igen. Rugalmasabb, hogyan? Igen. Tehát ha azt szeretnénk, hogy menjen vissza, és változtatni a dolgokat, Most, hogy van egy helyen ahol módosíthatja a dolgokat. És valóban, valami mint a probléma állítva hét, ahol mi végre egy kereskedelmi készletek honlapján, hogy megy, hogy egy csomó oldalt. És akkor lenne igazán bosszantó, ha úgy dönt, hm, Én nem nagyon szeretem 24 pixel, azt akarom, hogy legyen 28 pixel vagy kicsit nagyobb. És akkor meg kell csinálni egy a globális keresés és csere vagy nyissa ki az összes webhelye fájlok egyszerűen, hogy valóban változtatni egy értéket. Faktoringcégek ki ezeket a stílusokat egy központi helyen, akkor most nyit egy szöveges fájlt A CS50IDE bármelyik programba, megváltoztatni, mentse el, és kész. Már szaporított azoknak változásokat mindenütt. És, hogy ugyanez lenne Egy pont h fájl is. Tehát bármilyen kérdése így amennyiben ezen szintaxis? Rendben, így már megtettem mindent úgy tűnik, kivéve ténylegesen végrehajtja hivatkozásokat. És akkor menjünk előre, és erre. Hadd menjen előre, és hozzon létre egy új fájlt itt. Megyek hívom link.html, tedd a mai kódot. 

És fogok csinálni nyitott konzol doc típusú html. Mellesleg, ez a dolog a top, ez a doki típusú nyilatkozatot, ez az egyetlen, ami fura A felkiáltójel. Csak meg kell csinálni ott, és ez azt jelenti, hogy a használt HTML 5-ös verzióját. Régebbi verziói nyelven kellett sokáig húrok, hogy szükség helyezték. Tehát itt van egy példa az úgynevezett link. 

Szükségem van egy test látok a weboldal itt. És itt, a href egyenlők mondjuk HTTP://www.disney.com és a kedvenc honlapján, azt fogjuk mondani. Rendben, tehát egy nagyon ártalmatlan, felhasználóbarát oldal. Ha én most menj be az én könyvtár felsorolja itt, és megnyitja link.html, van hiper szöveget. 

És valóban, ez az, ahol A H HTTP származik. Hypertext Transfer Protocol körülbelül át a szöveget amely hivatkozásokat az egyéb források. És valóban, itt van az ismerős, ha retro, linket, hogy ha rákattint, valóban elvezet Disney.com. Most, Ó, ez csak később várható. Rendben, így most, mik Az mit jelent ez a? 

És őszintén szólva, a világ kezd hogy egy kicsit jobban ismeri és még egy kicsit rémisztőbb hanem egy kicsit több, önálló védhető, ha elkezdi megérteni ezeket a dolgokat. Mivel esély, néhányan közületek, ha megy révén a Gmail spam mappába vagy akár Ön postaládájába, akkor már valószínűleg ütött valamilyen e-mail hogy kérdezi, hogy változtassa meg jelszó talán, vagy talán ellenőrzik a PayPal hitelesítő vagy miegymás. 

És valóban, kaphatta valamit, hogy azt mondja, mint kattintson ide visszaállítani a PayPal jelszavát. És most, észre, ha ez nem Disney.com de mint badplace.com és reload, vegye figyelembe, hogy a szöveg itt Mondhatnánk semmit egyáltalán. És valóban, ez csak szavak. Miért nem én tényleg szuper rosszindulatú és azt mondják http://www.paypal.com. 

Kattintson ide vissza a PayPal jelszót és most újratöltődik. Ez úgy néz ki elég legitim, nem igaz? Úgy értem, én nem kattint egy e-mail, hogy csak azt mondja, ez az. De észre a kettősséget itt. Azt mondja www.paypal.com, és valóban, várj egy percet, tudjuk, hogy azt szeretné, Az ok a biztonság. Szóval, menjen a www.paypal.com HTTPS, de ha még soha nem csináltam ilyet, ne kerüljön a szokása, lebeg kis hivatkozik erre. És nehéz látni a képernyőn ott, és ez még nem minden, hogy könnyebb itt. De ahogy itt le Az apró kis sarok nem a böngésző ténylegesen mondani, hogy megyünk hogy badplace.com helyett Paypal.com. Most, hová megyünk ezzel? A példák mindegyike tettünk ma, amit nehéz kódolni, és gépelt kézzel. A web hihetetlenül érdektelen, ha kemény kódot a weboldalakat úgy, hogy tartalmat statikus, és soha nem változnak. Természetesen, minden kedves kedvenc weboldalak ma, függetlenül attól, hogy a Gmail vagy a Twitter, vagy Facebook vagy tetszőleges számú mások dinamikusak. Ők változik válaszul felhasználói beviteli csakúgy, mint a Google keresési eredményei között. 

És így szerdán, amit csinálunk, az hagyjuk HTML és CSS bevezetése mögöttünk és mi értetődőnek, hogy most tudod, és bemutatjuk egy új programozási nyelv nevű PHP, ami tetszik C, fog adni nekünk a hatalom, hogy valóban olyan programokat, hogy maguk a kimenetet. Ebben az esetben fogjuk használni PHP-vel dinamikusan web oldalak ezzel az új nyelvet. Így még az, hogy szerdán. Majd találkozunk. 

[Zenelejátszási]