[Musika jotzen] 

DAVID MALAN J: Hau CS50 da, eta hau aste 7 hasiera da. Beraz, ongi etorria itzuli. Eta hori gogoratzen dezakezu Arazoa lauretan ezarri, Han izan scavenger ehiza bat pixka bat Primerako sari batzuk zeinaren for argazki berreskuratu ondoren langileak, bai hemen eta New Haven, Zalantzan jarri ziren bezala askok aurkitu informatikariak dutenek duzun bezala. Eta lortu dugu, oro har, bidalketak sorta. Pentsatu batzuk partekatzeko nuke gaur hemen zuekin. 

Eta horien guztien bidal dugu online. Baina batez ere, nahi nuelako Zure atentzioa ondo inork zaie, Sam horietako batzuk nahiko izan zen Oro har, hau bezalako posatzen. Baina, jakina, hori agertzen da Gaur goizean, irabazlea zen norbaitek jakin bat izendatzen Ken batera Langileek 24 kamera harrapatu edo batzuk igaro denean hartu sartu duzu gehiago kontua Irudietan langile bat baino gehiago. Irudian hemen Ken da hurrengo Mary New Haven izateko. 

Orain, Ken, nahiz eta, txandaka out izkinan kasu bat pixka bat da Hori ez da oraindik gertatu aurretik. Zera gertatzen da, ez dela ez gertatzeko niretzat arazo inprimatu fina jarri ezarri lau direla dio langileen direla Primerako sariak desegokiak Ken, jakina, bat delako Gure langileek argazkilariek. Orain, esan zuen, berak jatorriz idatzi me esan mesedez ez ezazu bidali argazki horiek online. Nik uste dut neurri handi batean argazki gehienak delako Argazkilari hau hartu begiratu honen antzeko zerbait apur bat. Eta antzekoak. 

Baina Ken duzu lasaitzea me nahi Argazkilari bat oso ona da hori zuen, Zuen profesionala, berak hartzen du ez diren argazki lausoak, gertutik hobeak dira, eta he hartu zuten gure langile propio gutxi batzuk. Baina, baizik eta bakarrik baino aitortzea Ken, zer egiten dugu pentsatu dugu dago zerrendan zehar joan Benetako ikasle batek aurkeztu. Eta bihurtzen da Lance duten 15 argazki goizean bezala gure irabazlea izan zen. 

Eta irudian hemen Lance da Colton batera, Skaz, neure buruarekin, eta Sam-ekin batera. Baina orduan bihurtzen da gisa 11:46, duela pixka bat besterik ez, beraz, Itzuli nintzen nire posta eta aurkitutako oraindik aurkezteko beste bat gehiago izan dugun Bonnie izeneko ikasle batek zeinen email esan hau bakarrik. Ez gezurrik esan, ez naiz Hau egiten klasean zehar. Eta ondoren, aurretik besterik eransteko 14 argazki, inork Lance 15 lotsati. 

Baina Bonnie en argazkiak ere, hura bihurtzen out ziren anitz taldekideak, Sam haien artean, beraz, zer pentsatu dugu egingo lukeen lana aitortu horietako bi. Beraz Dropbox eskuratzerakoan gain Espazio horretan parte hartu duten pertsona guztiek jasotzen, bi atal hauek ere izango polita hartu lunch bat jasoko beraientzat eta beraien atala lagunak datozen aste honetan. Eta horrela egingo digu entzuten duzu, Lance eta Bonnie, horri buruz. Horietako Zorionak hain handia. Orain, duzuenontzat litzateke lunch bezalako orokorrago Badakizu CS50 Cambridge lunch dagoela eta New Haven ostiral honetan da. CS50 webgunean slash RSVP Joan. Eta orain mintegi batean hitz bat. Gehiago curricularly. Beraz ari eska dugu seihilekoan puntua non hasi behar duzu azken proiektu pentsatzen. Eta hain zuzen ere, apur bat besterik ez da, borondate deiturikoak proposamenak pre izan direlako. Proposamen beraz pre dira ekarri inpaktu nahiko txikia izan da eta benetan besterik aukera bat Ohar labur bat konposizioan zure irakaskuntza fellow baduela berari zer pentsatzen ari zaren zure azken proiektua egin nahi izatea. 

Orain, ikasle askok, azkenean, Web egiten oinarritutako azken proiektuak. Eta, jakina, besterik ez gara hau ere, orain, azken astean eta web programazioa murgiltzen haratago. Beraz, ez baduzu kezkatu erabat ez daki nola izan ideiak eraiki nahi duzun hori zure kontuan agian duzu. Hau da, benetan behartuz funtzio bat emateko pentsatzen duzu eta hizketan zure TF horri buruz dituzten. Baina lagundu nahi duten, eta azken proiektu, azken finean, batera, Badakizu CS50 tradizioa dauka mintegi eskainiz. 

Eta horiek aukerakoak dira, eskuak, edo hitzaldia oinarritutako aukerak diren gaiei buruz gehiago ikasteko Jakina hamarkadako osagarri apur bat curriculumaren, baina, hala ere, zoragarria material amaierako proiektuak gidatzeko. Eta, beraz, hau zerrendan hori da CS50 langileek hemen New Haven etorri nahi? iOS buruz aurten programazioa, Android programazioa, joko garapena, eta tresna gehiago sortak eta hizkuntzak eta teknikak. 

Beraz, begi bat mantentzeko CS50 en web orrian. Eta, bien bitartean, nahi duzu bada litzaidake izena eman zure interes horietako batean, CS50 slash erregistro joan. Eta guk, ondoren jarraipena egingo den bezala egun eta hegaldi-orduak eta kokapenak eta dena gehienetan everything-- will streaming bidez eta, era berean, eskari buruzko informaziorik Ezin duzu benetan egin badu ondoren. Beraz, besterik esan gabe, ez dugu utzi GET denbora azken. 

Eta honek mezuaren zela bezalakoa zen Gutun-azal birtual barruan, gogoratzen, router router pasatako garela web nabigatzailea eta web artean router zerbitzari. Eta mezu hori begiratu batean txiki honen antzeko zerbait. Hau gehiago urrutira mezuaren zela izan zen benetan gutunazal baten barruan paper zati bat eta haren gainean idatzitako lehen lerroan dio hitzez hitz, lortu slash. 

Eta besterik behatu kontrol gisa, zer adierazteko zuen slash? Zer esan nahi du slash denean Webgune eskatzeko? Zuk eskatu denbora guztian. Webgune batean sartzen gehien edonoiz, zuk Egia esan, ez idatzi fitxategi izen bat. Ziurrenik dezakezu besterik Facebook.com joan, sartu, gmail.com edo antzekoak. Eta zer adierazten barraz? Zer fitxategia? Edo zer orria, zehazki? 

Indizea du, bai. Beraz orri lehenetsia. Beraz, ez baduzu fitxategi bat zehaztu izendatu dugu ikusten hasiko bezala, Benetan ari besterik eskatzeko duzu Facebook orrialde lehenetsia eman me edo eman zidan nire postontzian edo eman me albiste orrialde lehenetsi erabiliko CNN en webgunean edo antzeko. Eta zerbitzari bat gero erantzuten zerbait mezu hori Hau atsegin, bai esaten, I mintzatuko 1.1 HTTP bertsioa. 

200, eta horrek egoera bat da gutxitan dugu gizakiak kodea inoiz ikusi ona delako. Ados, eskaera esan nahi duelako jaso eta kudeatu behar bezala. Eta eduki motaren itxuraz erantzuna da sarritan, baina ez beti, testua. Eta, zehazki, HTML. Eta hori da benetan non begiratu, gaur egun ditugu. 

Beraz, hain zuzen ere, naiz joan nintzen aurrera eta ireki nabigatzailean. Chrome erabili noa, erabili ahal izango dituzu Edozein nabigatzailean gehien asteetan etorri. Oro har, gomendatzen dugu Chrome bereziki delako software garatzaileentzat ona. Honez asko lortu eraiki osatzen duten errazago tresnak ez bakarrik HTML eta CSS garatzeko, Gauzak gaur buruz hitz egiten hasi beharko dugu, baina beste hizkuntza batzuk ere bai. 

Eta aurrera noa, eta joan da joan Click edo eskuineko Kontrolatzeko noa klik edonon web orri batean. Eta naiz elementu Inspect joan behar. Eta ez dut pentsatzen nire pantaila pixka bat besterik ez hemen. Demagun hau mugitu azpikaldean begiratu zidan. Beraz, hau da, zer deitzen Chrome Inspector. Beraz, hau arazketa bat bezalakoa da tresna Chrome barneratzen. 

Duzun guztia dagoeneko dute hau you Chrome erabiltzen ari bazara. Eta zer ari den gertatzen ahalbidetzen ditu Web orri batzuk kanpaia azpian gunean. Hargatik benetan hartu bat hau begiratzen honela. Ezaugarri modu gehiago ditu eta, gaur egun, kezkatzen gaitu. Baina badira fitxa horiek, hemen baino. Elementuak, sare, iturriak, timeline, eta beste gauza batzuk. Gainean klik noa Une batez sarea. 

Eta pixka bat jasanezinak da Lehenengo hemen begiratuan. Baina zer egin behar dut da utzi Pixka bat errazteko me. To piztu noa argia grabatzen da, beraz, gorria da. Eta ez dut log zaintzeko esateko. Eta hori besterik ez da apur bat Gauza hurrena I denborak aurrera egin ahala, gorde egingo da nabigatzailea gertatzen den guztia. Eta orain ez dut joango http://facebook.com izateko. 

Egia esan, ez www utzi neurri ona, barra. Sartu. Beraz URL bat duten askok bisitatu dute agian. Eta orain Facebook-en web Orri ateratzen goialdean. Eta gero, sorta oso bat gauzak hegan behealdean. Eta hain zuzen ere, bihurtzen da denean Facebook.com bisitatzen duzunean, ez besterik HTTP eskaera bat egiten ari zarela, bihurtzen da Facebook.com joan dela bidaltzen kartazalak horietako 41, bakoitzak bere get eskaera propioa, adierazi bezala, pantailaren atzean izan arren Hemen, pantailaren behealdean, adierazten du, hain zuzen ere, nire nabigatzailea egin 41-eskaerak. 

Eta, guztira, 861 transferitu kilobyteko da eta arrazoi batzuk hartu zuen askotan zortzi segundo Hori guztia deskargatzeko. Beraz, hori da benetan pixka bat arraroa Facebook-en gune hori hartuko luke luzea, baina hala izan da, kasu honetan. Orain, hori guztia ez dut benetan axola eskaera lehenengoa izan ezik buruz. Beraz, goazen Honen en hementxe eta utzi zooma une bat besterik ez zidan. 

Eta utzi gerturatzeko me honetan. Beraz, zer geratzen nahiz egin dut Han asko gertatzen da hemen baino gehiago da da nabarmendu dut Facebook.com eta gero nabarituko behera korritu naiz, behera gora, behera korritu, goiburuak eskatzeko. Eta ikusiko duzu Chrome hori erakusten da me funtsean, barruko edukiak eskaera egin nuen. Ez da gauza bera nahiko formatuaren horrela, baina konturatu Ez zaitez aipamen, konturatu ez dago ostalari aipamena, Facebook.com, bidea, edo barra, bertan fitxategia eskatu dut. 

Eta gero joan I bada berriro, benetan dugu ikusi zer Facebook itzuli me to goiburuak hauek guztiak da. Beraz, gutun-azal birtual horren barruan Hain zuzen ere, gako bikote asko daude. Hitz bat, bi puntu, eta, ondoren, balio bat. Hitz bat, bi puntu, eta balio bat. Hauek goiburuak deitzen dira. Eta xehetasun askoz gehiago da hemen baino Egia esan, oraintxe arduratzen gara. 

Baina hau bigarrena da azkena behera dago, nabarituko, Facebook.com en zerbitzari hori, hain zuzen ere, hemen esan testua HTML batzuk dator. Beraz, hori guztia esan nahi baita duzunean web bat eskatzen duten a den nabigatzaile batetik orria zerbitzari, zerbitzaria dela erantzuten berezko gutunazal batekin horietatik barruan testua da. Beste era batera esanda, HTML. Hipertestua Markatzeko Lengoaia. Zein beste hizkuntza bat da gaur aurkeztu dugun gizakiak edo ordenagailuak sortzen dituzten ordena web orrietan ezartzeko. 

Hain zuzen ere, dezagun honetan. Orain atzera jo noa Facebook-en webgunera. Eta noa besterik kontrol click edo eskuin-klikatu eta egin klik View Page Source. Eta nahiz eta ez duzun Chrome erabili, IE egin dezakezu, Firefox hau egin dezakete, Safari hau egin ahal izango da, nahiz eta menuan nahiz Aukera pixka bat ezberdinak izan daitezke. Eta honek HTML dela Mark eta Facebook enpresa idatzi dute. 

Eta kolektiboa, hizkuntza honetan hemen inplementatzen urdin eta orri zuriak duela une bat ikusi genuen. Orain, hau da, pixka bat jasanezinak. Baina bilatuko dugu goiko ezkerreko bada, ez gara eredu batzuk ikusten hasten da. Badirudi ez, asko da xebroi open horien eta gero ez dago HTML hitz hori da. Hemen da irekita bestera sagarrondo eta burua. 

Hemen da, behera joan gara eta behera eta behera, naiz Aurrera joan eta saiatu joan bilatu zerbait da. Badira modu gehiagoko eskuin hegaletik Hemen parentesi body open da. Eta azken gogoratzen Garai hartan proposatu dugu web orrialdeko errazena pertsona batek idatzi dezake honen antzeko zerbait apur bat begiratu dezake. Open HTML etiketa, buru irekia Etiketa, open izenburu etiketa, izenburua itxia gero, buru itxia, irekia gorputzaren etiketa, testu batzuk, gorputz itxia, HTML itxia. 

Baina tarte bat hemen une bat besterik ez da. Kode hori, dut, nahiz eta zuk inoiz idatzi du aurretik baina oraindik ez dute ondo ulertzen zer gertatzen den, itxura nahiko ona. Eskuin, oso garbia da. Oso estilo polita da. Koska eta espazio zuri asko. Facebook-en ez da. Beraz, zergatik da Facebook hainbeste I baino okerrago HTML idazten? Antza denez. 

Eskuin, hau bat bezalakoa da bost izarrekin estiloa da. Ez dago sinesgarria arrazoi bat beraientzat txoko horiek moztu. Ondo da, beraz, ez dute nahi horregatik da irakurtzeko aukera errazagoa da. Beraz, nolabait, ari dira egiten obfuscating, ordenatu egiten scrambling gutxienez estetikoki hain Myspace latzagoa dela joan eta erauzi off beren Hasierako orri eta horretarako HTML. Bihurtzen da programak dituzten nahiz eta, Chrome barne, hau garbitu ahal izango dugu super erraz. Beraz, ez da nahiko hori da arrazoia adierazteko. Zer gehiago arrazoia izan liteke. Bai. Bai, zuri espazio kostuak datuak. Zer esan nahi duzu? Bai, hain zuzen. Tab tekla sakatzen duzun asko edo bada espazio-barra, kontuan hartu inplikazioak. Beraz, zure teklatua gakoa guztietan da [INAUDIBLE] byte bat bezala irudikatzen. 

Beraz, suposatzen duten Mark edo frogak huts egin du edozein egun hauetan zuriune hits behin bakarrik HTML orri honetan Facebook-ren webgunea adierazten du. Eta Facebook asko ditu erabiltzaileen egun hauetan. Beraz, suposatzen duten Facebook-ren webgunea hau da, mila milioi pertsonek bisitatu du gaur. Eta Facebook norbait ditu sakatu zuriune-barra, behin bakarrik. 

Beraz byte gehigarri bat, Mila milioi eskaerak, datuak nola askoz gehiago Facebook da Internet bidez, transferitu norbait hit delako zuriunea bere teklatuan? A milioi byte, edo gigako bat Datu da Facebook zerbitzarietatik bidaltzen ari osoko inolako arrazoirik gabe munduan. Orain, berriz, eremu bat besterik ez da. 

Imajinatu benetan garbitu dugu hau bada eman eta gauza koskatuak da eta erantsi espazio zuri asko eta fitxan pertsonaiak eta espazioak, azkenean gastua gigabyte, Ez terra byte bada espazioaren gehiago. Eta beraz, super ohikoa web garapenerako mundu erreal da zure kodea minify da. Eta, azkenean, ikusiko dugu Hau nola egin dezakezu. 

Baina gaur, idazten kodea hasiko dugu hori benetan digu gizakiok irakurtzeko modukoa da. Zera gertatzen da, ordea, atzera egin baduzu Chrome tresna hau Inspect Element, Aurretik, Network fitxan ginen. Bihurtzen da bazoaz den elementu fitxan, zer duzu benetan ikusi da Chrome nahiko inprimatutako HTML bereko bertsioa. Beraz, deobfuscated dugu. Beraz, ez da ordenagailu bat partida da. Eta orain benetan dezakezu klik inguruan eta hasten duen web orri bat da hierarkia ikusteko. Beraz, egin dezagun benetan dezagun. Aurrera joan eta ireki noa Nire Mac testu edizio izeneko programa bat. Eta gogoratzen besterik ez da hori Testu super simple programa bat. Windows notepad.exe ditu. Eta ez dut nahi Verbatim joan idatzi, honako hauek. Doc HTML mota, tarte irekia HTML, itxita parentesi HTML, Orri-burua izan dugu hemen, Orri-burua hemen amaieran, Izenburu bat egingo du, kaixo mundua bezalakoa izan. 

Eta gero, hara behera, behar dugu web orriaren gorputzean. Closed gorputza. Eta gero, hemen, kaixo mundua. Ados. Beraz, web orri super azkar bat prestatu dugu. Bezala gorde noa hello.html nire mahaigainean. Nire Mac kexatzeko joan, pentsatzen, itxaron minutu bat, hau fitxategi bat da, ez deitu .txt nahi duzu? Baina ez, dot HTML erabili nahi dut. 

Eta gero, zer polita badut besterik bikoiztu egin klik fitxategi hau, hello.html, hemen nire web orria. Zoritxarrez, Ni naiz munduko pertsona bakarra nor hau bisitatu dezakezu oraintxe. Nondik itxuraz bizitzeko delako? Nire Mac on da, ezta? Zein da alferrikakoa. Gela honetan inork ez Like utzi bakarrik Interneten benetan bisitatu ahal orri hori. Hala, gaur egun behar dugu beste elementu bat aurkeztu. 

Eta hori egin ahal izateko, ez dut joan Aurretik joan eta ireki hodei 9. Beraz, hodei 9 ikastaro bat da hodei oinarritutako service-- CS50 IDE-- dela gure laneko guztiak nonbait Interneten martxan. Eta horrek esan nahi du gure fitxategi guztiak dagoela daude ikusgai geldituko dagoeneko. Beraz, goazen aurrera, eta hori. Aurrera joan noa eta fitxategi berri bat NCS50IDE sortu. Orain arte bezala gorde noa Ezkutatu hello.html bezala, eta gorde. Eta orain, besterik gabe, denbora aurrezteko, noa Aurrera joan eta kopiatu kode hau itsatsi baizik eta idatzi berriro baino. Eta gorde. Eta, beraz, gaur egun bat dut hello.html izeneko fitxategia. Baina nola benetan egiten dut zabalduko da web orri bat bezala? Beno, bihurtzen da eraiki ere CS50 IDE ez da Clang bezalako konpilatzailea bakarrik eta GDB bezala araztaileak eta beste programa sortak, ez da benetan fledged osoa Web zerbitzari CS50 IDE barruan martxan. 

Duzun guztia, esan nahi baita, Zeure web zerbitzaria dute. Eta web-zerbitzari baten zatitxo bat besterik ez da horren helburua bizitzan software da sortu zerbitzatzeko web orrietan. Nabigatzaile eskaerak entzuteko eta Gutun-azal birtual gutxirekin erantzuten horien barruan dago, etorri hori idatzi dut eduki. Beraz, web zerbitzaria hau da source benetan libre eta irekia. Non kode irekiko besterik esan nahi du Beste norbaitek duela software idatzizko guztiok, ahal dela Egia esan, ikusi eta deskargatu eta are iturburu-kodea aldatu. Eta nik Apache deitu zion. 

Eta egin behar da apur bat errazagoa egin dugu CS50IDE erabili deituz Apache 50ean. Beraz, benetan ahal izango da Honako ulertzeko. Apache 50 esan noa. Eta gero, besterik ez dut dot esan nahi dut. Eta ikusi dugu batzuk zertxobait Urrutira mezuaren esanez ezartzeko Apache-ren dokumentuan [? grupo?] etxera, ubuntu, edozein dela ere, hau da, barra: lanerako. Web zerbitzari aurrera Apache 2 arrakastaz. 

Beraz, istorio laburrak, I Oraintxe bultzatu botoi bat eta web zerbitzari bat nor da orain piztuta TCP ataka Interneten entzuten 80 helbide jakin batean. Eta hemen dio, eta Hori dela-eta, aldatu egingo da Zure erabiltzaile-izena eta beste hainbat faktore, Baina orain konturatzen hau sakatu badut, IDE50 dot jharvard eta beraz, eta beraz, konturatu denbora hori guztia, Hainbat du asteetan, izan ditzakezu Zure erabiltzaile-izena propioak igarriko hau da, goiko eskuineko eskua murgildurik CS50IDE txoko. 

Eta egia esan izan da hori guztia helbidea denborarekin bat egin ahal izango dituzu bisitatu zure fitxategi guztiak web bidez. Orain arte, ez du inporta, C delako, oro har, Gauza bat exekutatzen ari terminal, ez da web orrian. Baina gaur egun, hasten gara Web oinarritutako kodea idaztea hori nahi ez dugu URLak publiko eskuragarri. Beraz, zer noa Egin klik URL hau. 

Eta konturatu nahiko bat ikusten dut Indize itsusiak, zerbitzuaren arabera, baina zer fitxategia joango duzu seguraski? Hello.html. Hori gorde dut delako Nire laneko area fitxategia. Eta zer esan dut, Apache web zerbitzaria David laneko area direktorioa begiratu. Eta edonork utzi Mundu fitxategi horiek ikusteko. 

Eta hain zuzen ere, badut orain Ezkutatu hello.html on, Fitxa hau zehazki fitxategia barruan ikusten dut. Orain konturatu, hodei 9 kulpa Zerbait guretzat lagungarria da apur bat. CS50 IDE barruan, konturatu ez dago Bat-batean, helbide-barran bat. Hori da, ez delako ari gara, nahiz eta Chrome erabiliz CS50IDE bisitatzeko, CS50IDE da barruan bere kabuz Web nabigatzaile baten bertsio oraintxe. Eta beraz, baino gauzak zaildu esate baterako, Aurrera joan noa eta besterik URL hau kopiatu. Animatu eta joan besterik ez noa ireki nire Chrome leiho propioa. Beraz, ez da magia ez hemen, CS50IDE ez da. Besterik ez naiz literalki itsatsi joan Nire J Harvard URL eta sakatu Sartu. Eta voila, orain dut, eta teorian, denek Interneten, I konfiguratuta bada baimenak behar bezala, Fitxategi hau bisitatu dezakezu. Eta, beraz, gaur egun, esan badut hello.html, voila, han Nire izugarri underwhelming web orrialdea da. Beraz, egin behatu check azkar bat utzi. Hori guztia delako kontzeptuala set up da. Eta egia esan, ez dut benetan dugu irakatsi nola idazten HTML per se. Edozein zalantza orain arte zer da besterik gertatu zen? Bai. CS50 duela jabea web orri hauetan? Zein zentzutan? Ona galdera. Beraz CS50 jabea CS50.io. Nik, egia esan erosi dugu domeinu izen hori. Eta zuk mutil izaeraren arabera CS50IDE saioa hastean, zer ari domeinu izeneko lortu duzun guztia. 

Beraz IDE50-MALAN, edo IDE50-Rob.CS50.io, hori zure baitan helbidea berezia da Gure domeinuaren izena. Beraz, ikastaroaren ondorioetarako, Zure helbidera paregabea duzu. Baina gauzak sinplifikatu dugu arabera Goiko mailako domeinua erosteko, CS50 dot I / O eta gero, gainontzeko guztiak horren barruan, nolabait esateko. Eta itzuli dugu hori nahi Aste pare bat, seguruenik ere, batez ere azken proiektua at denbora, noiz izango dituzu batzuk Zeure domeinu izenik lortu nahi izatea. Egia esan, nahiko zuzenean. Ados. Beraz, gaur egun ez da hau guztia utzi. Atzera joan noa CS50IDE, non nire fitxategia oraintxe, hello.html, ez da hori guztia interesgarria. Zerbait egin nahi nuke Hori baino apur bat nicer. Beraz, ez dut honen antzeko zerbait egin behar. Let me paragraphs.html irekita. Beraz, hau fitxategi bat idatzi nuen, aldez aurretik da. Da goialdean, atsegin Beti, iruzkinak egin behar dugu. Baina HTML, iruzkinak apur bat ezberdinak. Hiru lerro eta lerro 14an, zuk ikusi sintaxia iruzkin bat hasteko eta, azkenean, iruzkin bat. 

Baina gauza bat ere gaietan funtzionalki artean. Besterik ez da bat izateko Ohar bat Giza zer gertatzen da hemen. Eta besterik azkar behatu gisa egiaztatu, behera joan badut, Zer da bistako berria Hori dugu sartu etiketa? Beraz, orain arte ikusi dugu etiketa irekiak dira parentesi HTML, burua, izenburua, eta gorputza. Baina zer da, jakina, berria orain? 

Bai, beraz, p. The p tag edo etiketak. Eta gero mailegatu besterik ez dut lehenetsi batzuk Latin testu nire paragrafoak eratzeko. Zer nahi dudalako frogatu da nola dituzun Testua paragrafoetan adierazten HTML. Eta orain zer gertatuko hasten Hemen dago, hori da dagoeneko eredu bat garatzeko. Eta utzi aurrera eta hau egin. Dezagun lehen txanda me off Apache. Eta ez dut esango berez hasteko joan berriro, gaur egungo iturri zazpi barrutik m direktorioa. Beraz, hori guztia eskuratzeko aukera izan dut. 

Eta orain, atzera egin dut, nahi izanez gero zerbitzuaren zerrenda honetan, nabarituko gaur fitxategi guztietan ikusten dut. Eta ikusiko dituzu Hurrengo arazoa multzoa, dizkizugu argibideak ematen duzu zehazki, lan hau egiteko. Paragraphs.html irekitzen badut, hori baita itxura programazio hizkuntza bat bezala zuk nahi duzun ez dute hitz edo irakurri Latin ez bada. Baina hau paragrafoak besterik hiru dago testuaren diren markatu eman HTML. 

Eta paragrafo nabarituko haien arteko jauziak. Bihurtzen da delako, eta are you arren makur daitezke hori egin ahal izateko, Mundu errealean, berriz, linea jarri nahi baduzu Gauzak arteko jauziak, baliteke nahiko besterik Horretarako eta sakatu Gorde. Eta orain, hemen freskatuz badut, aldez aurretik abisatu Dena dela, besterik lausotzen elkarrekin Testu blob bakar batean. HTML delako muda hizkuntza baten antzeko zerbait da. 

Da, hala nola erabili beharreko ekarri modu bat nabigatzailea eskuratu den ez esplizituki zer esan nahi duzun egin. Beraz, ez baduzu esaiozu paragrafo berri bat eman zidan, Oraindik ez duzu paragrafo berri bat ikusteko joan. Eta hain zuzen ere, zer egin nabigatzailea egin egingo Sartu da asmatuz gero, are gehiago, demagun, behin eta berriro eta berriro, testua modu honetan mugitzen pantailan, eta gero behera gorde eta, ondoren, berriro kargatzeko, nabigatzailea joan zuri espazio hori guztia ezkutatzeko , zuriunez bakar bat ikusgai sartu. Ados. Beraz, hori paragrafoan etiketa da. Eta beraz, zer da patroia Hori da hemen garatzeko? Beno, kasu izan badirudi hori HTML etiketa guztiak bat hasten da eta etiketa bat bukatzen. Eta zer etiketa bat da? Tira, sintaxia zatia da. Open parentesi, gakoa, parentesi itxia, etiketa bat da. Edo hasi etiketa. Eta gero zaudenean Egin zeure burua adierazteko, paragrafo batera zu bezala, Hori eginez kontrako hitz egiteko. Baina kontrakoa ez da nahiko atzeraka. 

Zeinua besterik ez duzu egin etiketa bera Hau atsegin barra batez izendatzeko. Ados. Beraz, ez dela zirraragarria. Eta hain zuzen ere, ez gara egiten web hori guztia interesgarria. Zer egin nahi badut gauza handiagoak eta lodia? Beraz, izarrekin bihurtzen da hemen adibide bat headings.html ere, non nire gorputza, Dut H1 etiketa bat, H2, H3, lau, bost edo sei, denak ere Badirudi nahiko urrutira. Baina joan nintzen zabalduko hau bada Adibidez, dezagun begirada bat. Headings.html. 

Beraz lehenetsita nabigatzaile emateko moduko testu duzu horren handiak eta tamaina desberdinak lodia da. H1 handia da. H6 txikiagoak eta orduan da dena arteko beste. Beraz, hori da interesgarria, baina oraindik Ez benetan webean dakit. Zer nahi badugu tengo Zerrenda baten antzeko zerbait. . Hortaz, hona hemen buletdun zerrenda bat da Harvard-etxeetako hiru. 

Nola hau egiten al zenuen? Beno, hartu list.html begirada bat. Eta hemen, ikusten dugu funkiness pixka baina kontuan hartu dezagun zer gertatzen. Beraz oinarritutako zer besterik ikusi duzun on, UL gabeko zerrenda dago. Orden gabeko zerrenda besterik esan nahi Buletdun. Ez da, zenbakiak ez. Ez da, gainera, zerbait izeneko bat agindu zerrendan, beste etiketa at OL da. Ondoren LI, zerrendako elementu guztiak esan nahi da. 

Eta automatikoki beraz, zenbakiak zuretzat dena. Baina, berriro ere, nire koska guztiak eta espazio zuria besterik niregatik da. Nabigatzaileak ez benetan zaintzeko. Ezin duzu Beraz, nahiz eta Horretarako, argi izaten, ez, nahiz eta behar duzun arren nabigatzaileak jotzen jarraituko du izan dela ulertzen ze ondo gai. Berritze kolpatzeko naiz nire nabigatzailea, birkargatzeko momentuan naiz eta ez da aldaketarik gertatzen ari da nabigatzailea oraindik delako egiten zehazki zer esan nuen egin. 

Ados. Beraz, hau da, besterik gabe, testu osoa da. Orain egin dezagun zerbait interesgarria utzi. Aurrera joan noa eta maileguan hartu HTML honen batzuk. Aurrera joan noa eta fitxategi berri bat sortu hemen. Eta rick.html hau deitu dugu. Neurrigabe daukagu Erabilitako zerbait rick honetan roll bat izeneko aurten klasean, ez dakit, gertatu da ekologikoan. 

Eta orain kontroletik kanpo lortu. Beraz, besterik ez dut berarekin joan. Joan Google behar bada Irudiak eta Rick Astley. Ez dakizu zergatik egiten dugu hau, besterik gabe, irakurtzeko ireki Wikipedian. Nik link gainean klik egin du denbora guztietan, Norbait nonbait barrez dira. Eta utzi ahead-- hara joaten me , joan gara dezagun ikusteko irudi hau. 

Beraz, hemen daukagu Google Irudiak-en irudia. Eta Demagun hau dela arrazoiz nonahi Interneten. Beraz, ez dut ondo dago niretzat bere gain hartzen joan benetan jarri hau nire web orrian sartu. Aurrera joan noa eta kopiatu irudiaren URL. Eta orain atzera egin dut Cloud nahi izanez gero 9, ikus dezagun zer egin dezaket hemen. Beraz, hemen da, besterik gabe, web orri bat. Hau da, Rick Astley, haha, Orain atzera jo noa nire nabigatzailea, freskatuz eta interesgarria. 

Non dago Rick? Hargatik zer gertatu den ikusten naute. Egia esan, noa itxurak bezala ez dut egin. [INAUDIBLE] jarri zion hemen. Etortzen diren atzera egingo dugu, une batean. Hortaz, hona hemen rick.html. Beraz, hori ez da Rick Astley. Eta gertatu da ahal dugun benetan gehitu zion hemen. Hau Rick Astley da. Eman dit irudi bat zeinen esan noa source kopiatu besterik ez dut da, eta horrek itxuraz zoriontsu bat urtebetetzea zerbaiterako. 

Eta orain ez dut joan Hau bezalako etiketa itxi. Beraz, hau da super luzea biltzeko. Baina konturatu nintzen guztiak ikusi egin da tarte irekia irudia, hau atributua iturri. Eta URL benetan luze bat da. Eta, amaieran, ohar hau. Zergatik egin dut slash angeluarekin parentesi ordez, beste etiketa guztietan bezala, parentesi irekia izanik, IMG, parentesi itxita? Besterik ez duzu, nahiz eta etxebizitza bat hartu dute inolako ez etxekotasuna ez HTML ekin aurretik. 

Beraz, ez da nola ixten komandoa, baina zergatik Ez du benetan egin intuitiboa Zentzu zerbait apur bat gehiago egin itxi irudi bezala edukitzen duenez? Bai. Bai. Just semantikoki, ez dago zentzu Irudi bat hasita eta irudi bat bukatzen, bai hor da edo ez da. Beraz, ez du zentzurik hutsune bat utzi ezer irudi baten barruan dagoen beste. Besterik ez. Eta beraz, sintaxia litzateke oro har nahikoa izan barrutik barra egin Etiketa irekita edo hasiera-etiketa du eta, ondoren, sakatu Ados. 

Beraz, bada, orain, berriz kargatzea dut fitxategi hau, orain Dut web orria sukaldaritza ona hemen. Eta, zalantzarik gabe, ezin izan dugu benetan annoy jende ordez txertatzea YouTube lotura bat bezala. Eta hain zuzen ere, une oro inoiz duzun YouTube joan da, eta utzi niri benetan ustekabean rick jaurti neure burua hemen. Beraz, Rick roll. Beraz, Rick roll-- ez naiz hemen joan behar. 

[Musika jotzen] 

Ados, pertsona batek gustuko. Beraz, konturatu denbora honetan guztian, baduzu Ezkutatu Share link, zuk noski URL lortu duten benetan dezakezu mezu elektroniko bat edo auzitegiko irudi bat txertatzeko edo arazoren bat ezarri edo diapositiba batean. Eta orain, I ordez egin klik bada embed on, ohartuko denbora honetan guztian, stuff honetan han izan da. Aurrera joan eta kopiatu honetan noa. 

Eta besterik ez, beraz, ez dugu hura hobeto ikusiko, naiz itsatsi nire testu-editore sartu. Iragarki hori zer YouTube izan diozu. A sartzen zaren bakoitzean YouTube video, baduzu bideoa txertatzeko nahi zure Web orri, besterik gabe, hartu hau. Beraz, hau da, oraindik beste HTML etiketa iframe izenekoa. Edo lerro fotograma bat. Beraz, gehiegi ikusten da pixka bat gehiago beste guztiak baino konplexua. Eta gertatu da irudia Etiketa eta itxuraz iframe etiketarekin zer dira atributu izeneko hartu. 

Eta hau da, beste sintaxia zati HTML. Etiketa hamarkadako gain izena, irekita tarte marka, Etiketa portaera kontrola dezakezu attribute-sorta oso bat edukitzea balio berdin. Atributua berdin balio. Eta beraz, esate baterako, YouTube da gurekin kontatzea Bideo honetan zabalera nahi baduzu 420 pixel eta altuera izango da 315 pixel izango da, hori da nola adierazi duzun HTML. 

Bideoaren iturburu va YouTube duten URL luze izango da eta, ondoren, beste gauza batzuk bezalako markoa mugan zero da, beraz, horrek esan nahi du, ziurrenik ez da Gauza ertz ez. Onartu pantaila osoan seguraski erabiltzaileari horrek esan nahi du botoi bat sakatu ahal izango da eta Egia esan, pantaila osoan bideoa. Beraz nuen benetan izan nahi ikusgarria hemen Rick dot HTML ere, irudia etiketa erabiltzeko beharrean, utzi hori ezabatu me, ordez itsatsi honetan. Eta orain freskatuz. Eta orain, hemen ere joaten gara. Ondo da, hori nahikoa da. Ondo da, beraz, saiatu egingo dut gogorra ez dela berriro egin. Beraz, zer dira takeaways batzuk hemen? Beraz, HTML, jo web orri hauetan bezala itsusiak dira, ez da benetan nahiko erraza. Ez da programazio hizkuntza bat. Ez du zertan funtzioak. Ez du zertan begiztak. Ez du zertan baldintza. Guztiak egiten ditu dozenaka dago etiketa desberdinak, eta horietako bakoitzak zero edo gehiago atributu ditu. Eta hain zuzen ere, zer da buruz fun HTML murgiltzea hasten zara oso auto aldia dela. 

Guztiak hartzen ulertzea da HTML Marko orokor horren. Zer da etiketa bat, zer atributua da, nola egin benetan web orri bat konfiguratzeko aukera horrela. Eta beste guztia benetan emaitza osatzen ari online erreferentziazko batean edo batzuk nola egin googling teknika edo ikusi dugun bezala, Facebook-en iturria ikusi begira kodea, webgune bat begira Gustukoa izatea, hori iturburu-kodea eta ulertzeko garatzaileei han nola benetan ezarritako gauzak daude. 

Beraz irudiak ondo egin ahal izango dugu. Eta hain zuzen ere, egin genuen duela une bat. Dezagun aurrera me eta erakutsiko dizu. Hemen lagin kodea batzuk. Inoiz Grumpy Cat ikustea nahi baduzu. Beraz, konturatu nintzen, ahal dela irudia etiketa bat izatea hemen. Eta bururatu zait gainean iruzkin bat. Dut alternatibo bat irisgarritasun-testua. Beraz, norbait da pantaila bat erabiliz ikusmena arrazoiengatik reader Egia esan, ezin gero izan beren pantaila irakurlea Grumpy Cat esateko. Ezin badute irudian ikusten dute, daiteke, gutxienez, beren ordenagailuak kontatu hitzez zer den. Eta fitxategi horren iturburu cat.jpeg da. Beraz, hain zuzen ere, badut benetan nahi izan lortu azkarra, zer izan dut done-- Ez agintzen dut Rick Astley joan, beraz, Ordez katu bat Google noa. Joan Google Images bada hemen, eta ikusiko du bere gain hartzen dugu hori nire cat argazki bat da. 

Demagun kontrol klik egiten dudala edo eskubide hau sakatu, ustekabean creepy. Eta cat.jpeg noa nire mahaigainean gorde. Demagun orain joan me back hodei 9ra. Ohartu, hemen, ezin dut go fitxategi lokal kargatzeko. Eta hartu dut hau bada fitxategia, cat.jpeg, oharra dela arrastatu ahal izango dut eta askatu ezazu hodei 9 sartu eta nik me at Yell hemen. 

Jadanik dugulako Emandako duzu cat.jpeg fitxategi batean, baina super erraza da har duzu, amesten argazki bat Facebook hartutako edo Flickr edo antzekoak eta, egia esan, arrastatu eta askatu ezazu hodei 9 sartu eta gero egin da Zeure pertsonala zati Webgune edo arazo zazpi edo zortzi izango dugu laster ikusiko. Eta orduan, zuk azkenik bisitatu katu hori, katu hori bera deskargatu dut suposatuz, ohar horretan -bere adorable zen. 

Zer ikusi nahi duzu da Aurpegia hau hemen antzeko zerbait. Beraz, fitxategi duzula Web orri baten barruan erreferentziazko bai izan daiteke zeure tokiko beste zerbitzari batzuk kontu edo urruneko Rick-en kasuan bezala Astley argazki duela pixka bat. Beraz, non Bestela zer gehiago egin nahi dugu? Beraz, dezagun Honako begirada bat. Zer ari cool mota ezagutzen duzu? 

Beraz, orain arte izan gara egiten web orrietan oso estatikoan. Espezie gauzak honela eman nahi dut. Nire bilatzailea egin nahi dut. Beraz, bilatzaile bat egin, dezagun joan aurretik eta hasteko lan hau egiteko. Aurrera joan eta sortu noa fitxategi berri bat search.html deitzen. Eta bertsioak prefabed online dugu. Whoops. Ez zure terminal leihoa itsatsi. Prefab bertsioak online. Eta ez dut honela hasiko da. Beraz, hemen hasieran fitxategi batean search.html deitzen. Hura salbatzeko noa Gaur egungo iturburu direktorioa. Bilaketa honek deitu noa. Egia esan, hobe egin beharko dugu. CS50 bilaketa eta benetan marka da. Eta orain, ez dut esango H1 CS50 Search antzeko zerbait. Eta gero, hara behera, H2 arida. Eta besterik ez, laburpena H1 eta H2 esan zer hurrenez? 

Bai, beraz, handia eta lodia, eta Ez bezain handia, baina oraindik lodia. Beraz, gorde dut hau bada joan eta hemen, ikus dezagun fitxategia search.html du. Ondo da, eta hau Arrazoi [INAUDIBLE] da. Stand by. David nahastu da. Oh, bertan da. David lelo bat da. ONDO DA. Beraz, ez da. Beraz CS50 bilaketa arida. Beraz, gaur egun, dezagun sintetizatu azken astean, zer egin dugu. 

Non hitz egin dugu buruzko maila txikiagoa HTTP mekanika. Eta ideia berri horiek HTMLa, hau da, besterik gabe, markaketa hizkuntza honetan bertan duzu nabigatzaile baten esango zehazki zer egin eta ezartzeko gure bilatzailea. Beraz, besterik ordez arida esanez, naiz aurkeztuko joan Zerbait forma etiketa bat deitzen. Eta formulario honetan, ez dut joan Sarrera-eremu baten antzeko zerbait. 

Eta sarrerako honen izena eremu, deitu dut joan Q. Eta sarrera-eremu hau mota Esatera noa, besterik ez "testua" da. Eta testu-eremu bat, gisa zaitugu ikusi, besterik testu kutxa bat da. Eta beraz, ez du hemen senti dute ezer horren barruan, puntu honetan. Eta, beraz, ez dut besterik gabe joan horrekin Etiketa ixteko Aurrera barra Etiketa berez eskubidea. Eta gero noa joan beste sarrera bat dute. Sarrera mota berdinen aurkeztu. Eta gero noa joan Honen itxi too. 

Eta orain ez dut hemen itzuli egingo da. Eta dagoeneko, ikusiko dugu nahiko itsusia bada ere, ez dut hasierak berak lortu nire kabuz bilatu orria hemen. Izan ere, utzi saiatu me hau garbitzeko pixka bat. Bihurtzen da gaineko sarrerako hemen, ahal izan nuen placeholder izeneko atributu beste. Eta agian keywords antzeko zerbait ikusi nuen, edo zehatzago esanda, q eskatuko. 

Eta nabarituko, orain, daukat testu gris mota honetako duten bezala desagertzen laster hasi idazten dudan bezala, baina seguruenik zerbait Nik beste web orrietan aurki daitezkeenak. Ez dut gustuko Bidali botoia. Beraz, ez dut benetan ematen joan Bidali bilaketa balioa izan botoia. Eta orain, I freskatuz bada, nabarituko Nire botoia bilaketa izeneko bihurtzen. Badakizu, ez dut benetan logo hemen bezala. Beraz, Google Font sorgailua. 

Hau aurrerago espezie nahi dut. Bilaketa Beraz CS50. Demagun nire logo propioa sortu zidan. Itxura polita. Beraz, gaur egun utzi gorde me hau as-- zatoz. Nora doa? Ez dago. ONDO DA. Galdu egiten du. Gorde. Stupid nabigatzaile. Stand by, goaz konpondu behin eta guztientzat. Hor dugu. Ados. Sentitzen dut. Off egun. Azken hau, funky da. Irten pantaila osoan. Ados. 

Orain, normal bat bezala Pertsona, gorde irudi gisa. Logo.gif. Orain ez dut nahi CS50IDE eta sartzen joan Logo besterik gabe hartu noa, Arrastatu noa Nire iturburu zazpi direktorioa, fitxategia badago lehendik ere, horrekin Ados nago. Beraz, ez dut horri jaramonik ez egiteko joan Dagoeneko izan dut delako. Eta orain, nola ez hau kendu dut? 

Dezagun aurrera eta egin Irudiaren iturburua berdinen logo.gif. Itxi honetan. Gorde. Eta orain, atzera nire bilaketa nahi izanez gero orrialdea, orain nahiko ona bilatzen da. Ondo da, ez du, beraz, nahiko ezer erabilgarria egin. Izan ere, utzi bilatzen saiatu me katu bat eta ikusi zer gertatzen den. Cats. Malditos da. Ez du funtzionatu, itxuraz. Beraz, zer funtsezko pieza Hori Hemen falta? 

Eskuin, ez duzu inolako HTML ezagutzen ez bada ere, Hasi dut telefono formularioa markatzea eta nik esan nuen Sarrerek nola lortu, testu kutxa bat eman zidan eta bat aurkeztu botoia, zer pieza itxuraz falta da? Demagun benetan lortu nahi dugun Gauza horrek ez funtzionatzea. Zer egin behar dugu? Atzera amaieran garatu beharra daukagu datu-basea edo bilatzaile berez, eta hori bat hartzeko joan denbora asko, egia esan. 

Beraz, gogoratu da azken aldian egin dugu. Beraz baduzu bilaketa Google zerbait eta aldez aurretik aktibatuta duzu off, oroitzapen, berehalako bilaketa. Hargatik hori itzaltzeko me beraz, hau benetan zaharragoak eskola nabigatzailean bat bezala jokatzen du, I bilatu bada orain katuak antzeko zerbait, Gogoratzen zer URL itxura. Nahiko críptica. Baina ez dago murgildurik, oroitzapen, slash bilaketa da. Galdera-ikur q berdinen katuak. 

Eta hori niri eman omen ziren bilaketa-emaitza sorta oso bat. Beraz, zer egin dut ezagutzen duzu? Maileguan noa Google minutu bat besterik ez da. Baino gehiago joan noa hemen eta ez dut esango hau da, ekintzak eratzen edo helmuga, nolabait esateko, literalki Google izan behar du. Eta metodoaren nahi nuen erabilera iristeko izango da. 

Beraz, zer da ekintza? Ekintza weirdly izendatu da, baina hori besterik esan nor da kudeatzeko joan Formulario honen ekintza? When I Search, non sakatu emaitza joan behar? Eta badut orain atzera nire formaren Hemen eta berritu nire web orria eta orain bilatu zerbait egiteko txakurra bezala, nabarituko orain Re dudan ezarri da Google. Eskuin? 

Zerbait bilatu nahi badut bestela, lan egiten du, ez besterik txakurrak da, katuak ere lan egiten du. CS50 ere funtzionatzen. Eta OK, hau da, besterik gabe, whelming azpian, ez da? Ondo da, baina benetan funtzionatzen du. Beraz, zer da benetan liteke, gero! Beraz, nire nabigatzailea irakatsi dut, erabiliz HTML, sarrerako hartzeko erabiltzaileak eta, egia esan, sarrera hori bidali Urruneko zerbitzari batera HTTP erabiliz. 

Eta nire nabigatzailea delako ulertzen HTTP, egia esan, zer da, beraz, URL eraikitzeko Amaituko dut nire nabigatzailean, nabarituko zer gertatzen denean, txakurra dut. Bilaketa klik egiten baduzu, ohartuko URL aldatzen asmoa nuen bezala kontsultaren berdinen txakur google.com/search izateko. Eta hori da inprimakia delako daki, metodoa da lortu delako, Besterik gabe erantsi du ez dagoela URL. 

Orain, web orri hauetan oraindik itsusiak dira. Hargatik aurkezten bat beste sintaxia pieza gaur, ahal bada. Eta hau zerbait ezagutzen dutena Kaskadako estilo-orriak bezala. Hargatik begirada bat hartu me Adibide honetan hemen ikusi dugu infer bada zer gertatzen den. Hau CSS0.html da. Eta hau da, non gauzak pixka bat itsusi. Zoritxarrez delako, Web-munduan, HTML bakarrik ezin dena egin. Eta hala bada nahi duzun estilizatzeko zure web orrian, benetan nahi du arreta jarri behar duzu beste modu batean estetika. Beraz, hemen, nire web gorputzean daukat horietatik orri div handi bat da. Eta div bat besterik zatiketa esan nahi du. Beraz, paragrafo bat baizik bezala ez du semantika bera dute testuaren paragrafo bat. 

Hau besterik ez du esan nahi nabigatzailea, hemen dator Nire web eskualdean angeluzuzen handi bat orrialdea, ezen bereziki kudeatzeko nahi dut. Orain, lerro 21 da, non div hasten. Eta besterik ez, etxebizitza bat. Zer line 21 eragina on orriaren gainerako edukiak? Egiten zentrotzat. Hori da dena. Beraz, ez dute modu bat ikusi dugu benetan testua zentrotzat. 

Izan ere, nire bilatzailea, Benetako Google bezala, zen guztia justifikatu baino ezkerrera. Eta, beraz, gaur egun, linea 21, nik diodana, beno nabigatzailea, orriaren banaketa bat sortzeko. Just eman dit, laukizuzen ikusezina handi bat. Hori nola egin nahi dut Web orrialde pentsatzen. Eta gero estilizatzeko honela. Komatxorik horien barruan, orain, bigarren hizkuntza bat da gaur aurkeztu dugun Kaskadako estilo-orriak deitzen. Zorionez, gehiegi ez da programazio hizkuntza bat, beraz, oso bere sintaxia mugatua baina Bere funtzionalitate ere oso mugatua HTML berriz guztiei buruz Web orri baten datuen markatzea eta web orri baten egitura. CSS, oro har buruz azken milia, estetika, tamaina eta kolorea eta lortzen laneratze zehazki web orri batean eskuinera. Eta, hain zuzen, sortzen da? gako bikote batekin. 

Honetan, testu bezala jabetza A lerrokatu, ondoren bi puntu, duten balioa jarraian Jabetza, eta kasu honetan zentro bat da. Eta orain konturatzen duzu habia gauza horiek. Dena nahi nuen horretan bada Nabarmendu dut zentratua izango da, horregatik line 21 izan dut eta dagozkion lineak 31. Baina demagun orain John esan nahi Harvard, nire etxeko orria ongi etorria. 

John Harvard Copyright sinboloa. Eta demagun lehen nahi dut Lerro horiek nahiko handia izango da. 36 pixel. Beraz, hori tamaina duin bat da. Eta bere pisua lodia izan nahi nuen. Baina, ondoren, behean, Testua txikitu nahi dut. Eta hori azpian, nahi dut are txikiagoa testua. Sentitzen dut. Gaur off egun bat bezala sentitzen. 

Beraz, gaur egun, zer ari naiz hau adierazteko egiten? Hemen on line 22 da enkapsulatean div edo nested div, izango bada. Too bere estilo etiketa propioa dauka. Letra-36 tamaina bat zehaztu dut. Letra lodiz pisu bat zehaztu dut. Hemen Down, 24 pixel bakarra zehaztu dut. Eta, azkenik, linea 28, zehaztu I 12. Beraz, besterik gabe, azkar behatu check gisa eta giza irakurraldian honetan bezala, bertan hitz pantailan dira benetan lodia izango da? Zein lerro dira benetan lodia? 

Just John Harvard. Eskuin? Line 22 dioen bezala beno delako nabigatzailea, hemen orriaren banaketa bat da. Egin letra-tamaina 36 puntu. Egin letraren lodia. Iristeko bezain laster dagokion end etiketa edo etiketa itxia on line 24, horrek esan nahi du, beno nabigatzailea, gelditzeko edozein izanda ere egiten ari da egiten. Eta, adi, argi izan, nahiz eta line 22 atributu horiek guztiak ditu style bezala, duzunean Etiketa itxi line 24, Etiketa izena aipatu duzu. 

Zuk ez duzu errepikatu hitza estiloa edo ezer komatxorik horien barruan. Eta begiratu nuen hartan, hala bada orain Nire nabigatzailean dezagun, a end emaitza begiratu. Let me joan aurretik fitxategi hau, eta bertan CSS 0 da. Eta oraindik nahiko arrunta, baina lortzean nahiko interesgarria. Baina bihurtzen da ez en Beste gauza batzuen dut hemen egin dezakezu, eta egiteko arriskua at hau erabat izugarri, Iragarki hemen nire Nire web orriaren gorputzean, Nuen zerbait dibertigarria egin dezake bg edo atzeko kolorea bezala. 

Eta azkar, zer da zure kolore gogokoena? Green entzun nuen. Ados. Beraz, gaur egun, reload hit badut orain, Web orri berde bat dugu. Ondo da, beraz, ez da txarra. Eta orain, hau egin nahi badut benetan cool, nire testu kolorea egin ahal dut nahiz eta gorria. Beraz, ikus dezagun zer itxura. Orain nahiko ona ari da. Eta behera, baduzu benetan Norbaitek nahastea nahi edo izan nahi baduzu Pertsona horietako bat nor engainatu web bisitatzen saiatzen Orri engainatu dut dute Google delako pentsatzen ez osoa sorta giltza hitzak antzekoak ikus dezagun, freskatuz. Nora joan ote da? Eta hor egon digu. Ados. Beraz, hau esan nuen bezala, alde batera, dugu stuff honi buruz hitz egiteko, aste gutxi barru denean buruz hitz egiten dugu segurtasun, baduzu benetan txertatzeko sortak osoak Web orri baten keywords, Oraindik ez dute bat ere ikusgai egon arren Google bezalako giza, norbaitek, noski, oraindik ere benetan honetan aurki daitezke. Ondo da, beraz, nahiko era nardagarriagorik nahiko azkar. 

Eta hain zuzen ere, ez da guztiak Hori askoz nire web propioa ez bezala Orri graduak bat, zein Inguruan googling aurkitzeko hasi nintzen Iraganeko nire webgune zaharra bertsioak. Nahiko txarra izan zen. Izan ere, aurkitu nuen Bat klase gutxi batzuk lehenago. Baina ez da hor kanpoan okerrago. Hau izan zen, itxuraz, nire Hasiera orrira 1996an itzuli. Antza denez, pentsatu nuen egokia jendeak galdetu beren izen zalantzarik gabe aurretik Egia esan, ikus nire web orria. 

Eta, ondoren, horiek erakutsi dut zerbait ergelak, seguruenik. Hurrengorako gehiago dig dut. Baina, oraingoz, dezagun Kontuan hartu diseinua apur bat. Style buruz hitz egin dugu. Eta orri honetan, orain arte, eta gehien guztia idatzi dut hau da, nahiko garbi estilistikoki. Baina diseinua buruz zer? Beno, han erredundantzia asko da zer dut hemen egiten Nik ere. 

Hitza aipatu dut leku pare batean kolore. Aipatu dut letra-tamaina pare batean lekuak eta lodia leku pare batean. Eta, batez ere, co naiz Bi hizkuntza nahasturik. Lortu dut nire HTML tags eta nire egozten, eta gero bat-batean, komatxo artean, daukat Bigarren hizkuntzaren gaur CSS izenekoa, berriro ere, horiek besterik ez da gako bikote edo propietate horiek puntuz berezirik. 

Zera gertatzen da, askoz ere C bezala non gauden faktore has daiteke Kodea batzuk goiburu fitxategiak, beraz, ezin gauza bera egin dugu HTML. Eta hori norabidean urrats bat da honako hau. Iragarki bertsio hori, CSS1.html da zehatza berean web orri egituraz. Beraz Dut sorta oso bat DIV, baina oraingo honetan, Dut Ahaztuak Wrapper kentzeko div ikusiko duzun bezala. 

Eta nik hiru DIV horiek ematen dut goian, erdian, eta behean, identifikazioak berezia. Hau da, polita, zeren divisions horiek emanez orrialdearen identifikadore berezia, Horiek beste nonbait erreferentzia izango dut. Non? Beno, let me joan gora. Eta beraz, orain arte, edonoiz begiratu dugu Web orri baten buruan, zer da etorri izan ditudan etiketa bakarrik Web orri baten burua? Apur bat altuagoa. Just izenburua orain arte. Baina bihurtzen da ez en beste gauza batzuk jarri ahal izango duzu ere ez, bat bertan estiloa etiketa bat deitzen. Beraz, une bat lehenago, begiratu dugu estilo batean. Turns han estilo Etiketa bat. Dagokio barruan of Web orri baten buru. Eta orain konturatzen zer egiten ari naiz. Hau behar dut barruan style etiketa jarraian. I literalki on line 20 aipatzea nabil Etiketa hori estilizatzeko nahi dut izena. 

Ondoren kizkur irekia daukat eta kizkur giltza itxita. Beraz, C antzeko espirituz, baina berriro ere, hau ez da funtzio bat, hau zehatz-sintaktiko bat besterik ez da hemen. Eta gero, jakina, kontatzen dut nabigatzailea, beno nabigatzailea, orriaren gorputz osoa egiteko Testu zentro lerrokatzea dute. Eta gero, hau da, honako hauek esanez. Hey nabigatzailea, HTML bat ikusten baduzu, elementu edo etiketa orrialde hori goi identifikatzaile bakar bat du, beraz, hash sinbolo hemen besterik esan nahi du Ataria ideia bakarra, aurrera eta bere letra-tamaina egiteko 36 eta bere letraren lodia. 

Hey nabigatzailea, elementu bat zeinen ID erdialdera da, beraz, eta 24 pixel. Eta beno nabigatzailea, ikusten baduzu, antolaketa beheko ideia, egin da 12 pixel. Azkenean eragina alde zehazki sam da. Joan nintzen CSS 1 izanda, itxura bera. Baina norabidean urrats bat garela diseinua apur bat hobea. Demagun, orain, atzera jo me hemen CSS2 den eta ikusi zer gehiago egin dut. 

Orain orriaren benetan, oso garbia da. Izan ere, guztiok sartzen ahal dut orri batean edukiak hemen. Baina zer etiketa berri daukat sartu, argi dago? Link. Eta ez da izen onena etiketa bat, Ez da zentzu batean lotura bat delako ezagutzen dugun hori, baina horrek esan nahi du beste zenbait fitxategi lotura bat. Hau da, mota zorrotz C. ere, besteak bezala 

Hau HTML da bidea esateko beno nabigatzailea, go edukiekin zaitez fitxategia css2.css deitzen. Harremana, niretzat, da estilo orri bat dela. Eta, hain zuzen, hori da bat etorri S Kaskadako estilo-orriak bitartez en. Hau estilo-orri bat da. Besterik ez da testuko fitxategiak orduan It Jabetza sorta oso bat. Estilo sorta oso bat da orrialde bat aplikatu nahi duzula. 

Eta, beraz, hau da itxuraz Bigarren fitxategi bat aipatuz. Eta, CSS2.css ireki banu, konturatu egin ditudan guztiak da kopiatu eta itsatsi guztiak honek fitxategi hau sartu. Eta orain, inoiz ez dut, nahiz eta zuk kodetua stuff hau baino lehen, besterik batera kontuan hartu proverbial ingeniaritza hat on, zergatik bat hau da diseinu hobea seguruenik? CSS propietate horiek egindako Factoring, ipintzeko, beren fitxategi propioan sartu. Hau konpondu arren Duela arazoa bezalako bost minutu Oso lehen bertsioan. 

Ez dugu hobetu du Orri estilistikoki, hau da, besterik gabe, hobeto nolabait diseinua. Zergatik uste duzu? Bai. Malguagoak nola? Bai. Beraz, joan nahi izanez gero itzuli eta gauzak aldatzeko, orain, leku bat behar duzu non gauzak aldatu ahal izango dira. Eta hain zuzen ere, zerbait egiteko bezalako arazo multzo zazpi, non bat gauzatzeko dugu Stock merkataritza webgunean, hori bat izan da joan orrien sorta oso. Eta benetan izango litzateke gogaikarriak erabakitzen baduzu, HM, Ez dut 24 pixel nahi, nahi dut 28 pixel edo zertxobait handiagoa izango da. Eta gero, bat egin global aurkitu eta ordeztu edo ireki zure webgunean fitxategi guztiak Besterik gabe, benetan balio bat aldatzea. Estilo horiek egindako factoring arabera zentral bat sartu, orain ireki ahal izango duzu Testu fitxategi bat edozein programa CS50IDE ere, aldatu, gorde eta egin. Hedatzen horiek Zaituzte aldaketak nonahi. Eta hori bera izango litzateke dot h fitxategi batean baita. Beraz, edozein galdera, beraz, Urrun sintaxia honetan? Ondo da, beraz dugu egindako guztia dirudienez benetan ezik hiperestekak ezartzeko. Eta, beraz dezagun aurrera, eta hori egin. Dezagun aurrera me eta fitxategi berri bat sortu hemen. Deitu noa link.html, gaurko kodea jarri. 

Eta ez dut irekia egin da joan parentesi Dokumentu Mota itsatsi. Bat alde batera utzita, bertan gauza hau bezala gora, doc mota, aitorpen hori, Alde hori arraroa bakarra da harridura batera. Nahikoa da bertan egin eta horri esan nahi HTML 5 bertsioa erabiltzen ari gara. Bertsio zaharragoak Hizkuntza askoz luzeagoa izan beharrezko duzun kateak ez jartzea. Hortaz, hona hemen link izeneko adibide bat da. 

Nire web orriaren gorputz bat behar dut hemen. Eta hemen ere, href berdinen bat demagun HTTP://www.disney.com eta nire gogoko web, esan dugu. Ondo da, beraz oso bat kalterik, lagungarri orria. I bada, orain nire direktorioa sartu Hemen zerrendarekin eta ireki link.html, hiper testu ditugu. 

Eta hain zuzen ere, hau da, non HTTP in H dator. Hipertestua transferitzeko protokoloa Testu transferitu da duten bestelako baliabideak hiperestekak ditu. Eta hain zuzen ere, hemen da ezagutzen du, retro bada, lotura urdin klik egin baduzu hori, benetan izango nazazu Disney.com izateko. Orain, Oh, hori da egindako arida. Zenbait Ondo da, beraz, gaur egun, zeintzuk dira honek inplikazio? 

Eta Egia, munduan hasten familiar apur bat gehiago lortu ahal izateko eta, era berean, scarier apur bat baina, aldi berean, apur bat gehiago auto defenda behin hasten zara Gauza horiek ulertzeko. Aurka daudelako, batzuk, bazoaz Zure Gmail spam karpetan bidez edo baita zure sarrera-ontzia, ziurrenik duzun email nolabaiteko ahaztuak aldatu da duzun galdetuz zure pasahitza, agian, edo agian egiaztatzeko Zure PayPal-egiaztagiriak edo whatnot. 

Eta hain zuzen ere, jaso duzu Zerbait klik bezalako dio hemen Zure PayPal pasahitza berrezartzeko. Eta orain, nabarituko, bada hau ez da Disney.com Holako badplace.com eta freskatuz, kontutan hartu testua hemen ezer esan liteke inolako. Eta hain zuzen ere, honek hitzak besterik ez da. Zergatik ez benetan izan dut super maltzur eta esan http://www.paypal.com. 

Egin klik hemen zure PayPal berrezarri pasahitza eta orain freskatuz. Badirudi nahiko zilegia da, ezta? Esan nahi dut, ez nuke klik egin ezazu email bat besterik ez dela dio honek. Baina konturatu dikotomia hemen. Esaten da www.paypal.com, eta hain zuzen ere, itxaron minutu bat, ezagutzen dugu nahi duzula segurtasunerako s. Beraz, orain, joan www.paypal.com HTTPSra, baina inoiz ez duzun egin bada, hori baino lehen, Zer ohitura bihurtu zaitez loturak gutxi hemen gainetik pasatzean. Eta zaila da ikusten pantailan han, eta hemen da hori guztia ez da errazagoa. Baina hemen modu behera txikietako gutxi korner nabigatzailea benetan esango dizut ari garela to Paypal.com ordez badplace.com. Orain, nora goaz honekin? Adibide guztiak gaur egin duguna, Nik utziaz dugu eta makinara eskuz. Web da izugarri izanarren duzunean hard Zure web orriak, beraz, eduki hori behar kodea estatikoan eta inoiz aldatzen da. Jakina, guztiok gure gogoko webguneak gaur, ote den Gmail edo Twitter edo Facebook edo beste kopuru dinamikoak dira. Ari dira aldatzen Sarrerako erantzunez Besterik Google bilaketa-emaitza bezala. 

Eta orain, asteazkenean, zer egiten da HTML eta CSS sarrera utziko dugu Atzean geratu eta hartuko dugu Emandako dugu horretarako orain ezagutzen da eta aurkeztu dugu programazio hizkuntza berri bat PHP izeneko gustatzen C, da gurekin emateko joan programak sortu benetan boterea irteera sortzea beraiek direla. Kasu honetan, erabili beharko dugu PHP dinamikoki web sortzea Hizkuntza berri hau erabiliz orrietan. Beraz, horretan gehiago asteazkenean. Ikusi duzu gero. 

[Musika jotzen]