[REPRODUCCIÓ DE MÚSICA] 

DAVID J Malan: Aquest és CS50 i aquest és el començament de la setmana 7. Així que benvinguda. I vostè pot recordar que en el problema en quatre sets, hi havia una mica d'una recerca del tresor per a alguns fabulosos premis pel qual després de recuperar les fotos el personal, tant aquí com a New Haven, que hi ha el repte de trobar, ja que molts els científics de la computació com poguessis. I tenim un tot munt de presentacions. Vaig pensar en compartir alguns amb vostès aquí avui. 

I posarem tot això en línia. Però, en particular, volia cridar la seva atenció A-- bé un, Sam estava en un bon nombre d'ells en general, posant com aquest. Sembla, però, que a partir d' Aquest matí, el guanyador ser un cert algú anomenat Ken amb 24 del personal capturat en càmera o una mica més si es té en compte personal múltiple en les imatges. A la foto és Ken proper a Maria a New Haven. 

Ara, Ken, però, resulta fora és una cosa d'un cas cantonada que encara no ha passat abans. Resulta que no se li va ocórrer per a mi per posar lletra petita en el problema en quatre sets que diu que el personal són inelegibles per als fabulosos premis perquè Ken és, per descomptat, un els fotògrafs en el nostre personal. Ara, dit això, ell originalment em va escriure per dir si us plau no publicar aquestes fotos en línia. Crec que en gran part perquè la majoria de les fotos que aquest fotògraf va prendre miri una mica d'alguna cosa com això. I similars. 

Però Ken li agradaria que jo asseguro que que és un molt bon fotògraf, Ell és un professional, ell pren fotos que no són borroses, que són millors en el focus, i ell va prendre un bon nombre del nostre propi personal. Però en lloc de solament reconèixer Ken, el que pensem que ens agradaria fer és anar a través de la llista de estudiants reals que van presentar. I resulta que Lance amb 15 fotos a partir d'aquest matí va ser el nostre guanyador. 

I representa aquí és Llança amb Colton, amb Skaz, amb mi mateix i amb Sam. Però després resulta que a partir d' 11:46, pel que fa tan sols una mica, Vaig tornar al meu correu electrònic i vaig trobar que teníem però, una presentació més per un estudiant anomenat Bonnie el correu electrònic es va limitar a dir això. No vaig a mentir, estic fent això durant la classe. I després va procedir a col·locar just 14 fotos, un menys que la llança de 15. 

Però en les fotos de Bonnie, resulta terme eren diversos membres del personal, Sam entre ells, de manera que el que crèiem de fer és reconèixer les dues coses. Així que a més d'aconseguir el Dropbox espai que tots els que van participar rep, aquestes dues seccions també rebre un bon esmorzar atès per ells i la seva secció S'acobla la setmana que ve. I pel que tindrà notícies nostres, Lance i Bonnie, per això. Així que les grans felicitats a ells. Ara, aquells de vostès que faria igual que el dinar més general saber que el dinar CS50 a Cambridge i New Haven és aquest divendres. Anar a la pàgina web barra de RSVP del CS50. I ara una paraula sobre els seminaris. Més curricularly. Així que estem a punt de la punt del semestre on ha de començar pensant en els projectes finals. I de fet, en només una mica, la voluntat els anomenats propostes pre deure. Així pre propostes estan destinades a ser molt baix impacte i realment només una oportunitat per compondre una nota curta el seu company d'ensenyament per informar ell o ella el que vostè està pensant pot ser que vulgui fer per al seu projecte final. 

Ara, molts estudiants acaben fent web basa projectes finals. I, per descomptat, només som setmana passada en aquest moment i més enllà de capbussar-se en la programació web. Així que no us preocupeu si vostè no tenen absolutament cap idea de com vostè construir les idees que que pugui tenir en la seva ment. Això és en realitat una funció de força per fer-li pensar i parlar amb el seu TF respecte. Però per ajudar amb això, i amb projectes fi de carrera, en última instància, saber que CS50 té una tradició d'oferir seminaris. 

I aquests són opcionals, mans, o donar una conferència sobre la base de les oportunitats per aprendre més sobre els temes que són una mica d'auxiliar el curs de pla d'estudis, però tot i això meravellosa materials per impulsar projectes finals. I el que aquesta és la llista que és Personal CS50 aquí a New Haven han arribat amb de aquest any sobre iOS programació, Android programació, desenvolupament de jocs, i raïms de més eines i els llenguatges i tècniques. 

Així que mantenir un ull en el lloc web del CS50. I mentrestant, si voleu Si està interessat en algun d'ells, anar al registre slash del CS50. I llavors ens donarem seguiment pel que fa a la dies i horaris de vol i la localització i tot-- gairebé tot ho farà ser escoltats i també està disponible a comanda després si vostè no pot realment fer-ho. Així que sense més preàmbuls, deixat l'última vegada amb GET. 

I això era com el missatge que era a l'interior de l'envolupant virtual, recordar, que passem de router a router encaminador entre un navegador web i una xarxa servidor. I aquest missatge semblava un mica alguna cosa com això. Aquest va ser el missatge més arcana que era en realitat dins d'un sobre escrita en un tros de paper el primera línia diu, literalment, arribar barra. 

I així com una comprovació de validesa, ¿Què denoten barra? Què significa la barra quan sol·licitant una pàgina web? Vostè sol·licita que tot el temps. La majoria cada vegada que visita un lloc web, en realitat no escrigui un nom d'arxiu. És probable que només ha d'anar a Facebook.com, entrar, gmail.com, o similars. I què representa barra? Què arxiu? O quina pàgina, específicament? 

L'índex, si. Així que la pàgina per defecte. Així que si no s'especifica un arxiu nom que començarem a veure, en realitat estàs simplement sol·licitant dóna'm la pàgina per defecte de Facebook o donar-me la meva safata d'entrada o donar Me la pàgina per defecte de notícies a la pàgina web de la CNN o similars. I un servidor llavors respon a aquest missatge amb una mica així, dir que sí, jo parlar HTTP versió 1.1. 

200, que és un estat de codi que els éssers humans rarament a veure perquè és bo. Perquè vol dir OK, la sol·licitud va ser rebut i es manegen adequadament. I el tipus de contingut aparentment en la resposta és molt sovint, però no sempre, text. I específicament, HTML. I això és en realitat quan ens fixem en l'actualitat. 

Així que, de fet, em vaig a anar per davant i obrir un navegador. Vaig a utilitzar Chrome, vostè pot utilitzar més qualsevol navegador en les setmanes per venir. Generalment recomanem Crom perquè és particular bo per als desenvolupadors de programari. Té un munt de construït en eines que fan més fàcil per desenvolupar no només HTML i CSS, les coses que començarem a parlar de l'actualitat, sinó també altres idiomes. 

I jo seguiré endavant i anar A-- Vaig a Controlar clic o dreta feu clic a qualsevol part d'una pàgina web. I jo vaig a anar a Inspeccionar Element. I jo vaig a modificar la meva pantalla de només una mica aquí. Permetin-me passar això a la part inferior. Així que això és el que s'anomena Inspector de Chrome. Així que això és com una depuració eina integrada a Chrome. 

Tots vostès ja tenen aquest si has estat utilitzant Chrome. I li permet veure el que està passant de sota el capó d'alguna pàgina web. Així que anem a fer un fet mirar això de la següent manera. Té forma més característiques i ens preocupem per avui. Però hi ha aquestes fitxes per aquí. Elements, xarxa, fonts, línia de temps, i algunes altres coses. Vaig a fer clic a Xarxa per un moment. 

I és una mica aclaparador a primera vista aquí. Però, ¿què faré és deixar em simplifico una mica. Vaig a encendre la gravació de la llum perquè sigui vermell. I jo vaig a dir a preservar registre. I això és només una mica El que em vaig adonar en el temps que va a estalviar tot el que succeeix en el navegador. I ara em vaig a anar a http://facebook.com. 

En realitat, farem www per si de cas, retallar. Retorn. Així que un URL que molts és possible que hagi visitat. I ara la web de Facebook pàgina apareix a la part superior. I llavors un munt de coses va passar volant a la part inferior. I de fet, resulta que quan vostè visita Facebook.com, que no només hi ha la fabricació d'una petició HTTP, resulta que va a Facebook.com envia 41 d'aquests sobres, cadascun amb la seva pròpia petició GET, com s'ha indicat, tot i que darrere de la pantalla aquí, a la part inferior de la pantalla, indica que, de fet, el meu navegador va fer 41 les sol·licituds. 

I en total, es va transferir 861 kilobytes i va prendre per alguna raó tant com vuit segons descarregar tot això. Així que en realitat és una mica estrany que el lloc de Facebook hauria de llarg, però que així sigui en aquest cas. Ara, tot això jo no m'importa sobre excepte per la sol·licitud més alta. Així que anirem a aquesta d'aquí i m'ho dius a mi Allunyar per un moment. 

I permetin-me zoom en això. Així que el que he fet en l'esquerra tot i que no hi ha molt a fer per aquí és que m'he destacat Facebook.com i després Noto que estic desplaçar-se cap avall, desplaçament cap avall, el desplaçament cap avall, per sol·licitar capçaleres. I veuràs que Chrome està mostrant em essencialment el contingut intern de la sol·licitud que vaig fer. No és el format en el mateix manera, però noten que hi ha esment d'aconseguir, noti que hi ha esment de la hoste, Facebook.com, el camí, o barra, que és l'arxiu que vaig sol·licitar. 

I després, si em desplaço una còpia de seguretat, anem a realitat veure que el va tornar Facebook per a mi és totes aquestes capçaleres. Així que dins d'aquest sobre virtual de fet són un munt de parells de valors clau. Una paraula, una coma, i després un valor. Una paraula, una coma i un valor. Aquests són anomenats capçaleres. I no hi ha manera més detall aquí que que realment importa en aquest moment. 

Però això no té rival últim allà baix, notar, que el servidor de Facebook.com, de fet dit aquí ve una mica d'HTML text. Així que tot això és dir que quan vostè sol · licita una web pàgina d'un navegador a un servidor, aquest servidor respon amb un sobre del seu propi dins dels quals és de text. En altres paraules, HTML. HyperText Markup Language. La qual cosa és una altra llengua que introduïm avui que els éssers humans o els ordinadors generen per tal de posar en pràctica pàgines web. 

Específicament, donem una ullada a això. Vaig ara a tornar el lloc web de Facebook. I vaig a poc control de clic o clic dret i feu clic a Edita. I fins i tot si vostè no utilitza Chrome, IE pot fer això, el Firefox pot fer això, Safari pot fer això, encara que el menú opcions podrien semblar una mica diferent. I aquest és l'HTML que Mark i companyia a Facebook haver escrit. 

I col·lectivament, aquest llenguatge aquí implementa el blau i la pàgina en blanc que vam veure fa un moment. Ara, això és una mica aclaparador. Però si mirem cap a dalt a l'esquerra, estem va començar a veure alguns patrons. Sembla que hi ha molt d'aquests el suport d'angle obert i després hi ha aquest codi HTML paraula clau. Hi ha un altre obert suport angular i el cap. 

Aquí està, si desplaceu-vos cap avall i cap avall i cap avall, jo sóc seguirà endavant i tractar per buscar alguna cosa. Hi ha molt per sobre a la dreta aquí és el cos parèntesi obert. I recordar de passada temps que vam proposar que la pàgina web més senzilla que un humà podria escriure podria semblar una mica alguna cosa com això. Obrir etiqueta HTML, cap obert etiqueta, etiqueta del títol obert, a continuació el títol de tancament, cap tancat, oberta etiqueta del cos, una mica de text, cos tancat, HTML tancat. 

Però una pausa aquí per un moment. Aquest codi, fins i tot si vostè té Mai escrit abans però encara no entenc molt bé el que està passant, es veu molt bé. Dret, és molt net. És molt estilísticament agradable. Una gran quantitat de sagnat i l'espai blanc. Facebook és no és. Per què és Facebook tant pitjor del que en l'escriptura d'HTML? Pel que sembla. 

Dret, això és com un sol de cada cinc per l'estil. Hi ha una raó de pes per a ells per tallar aquestes cantonades. Molt bé, així que no vull fer més fàcil perquè el llegeixis. Així que, en un sentit, són ofuscar ella, tipus de codificació que almenys estèticament pel que és més difícil per Myspace anar i estafar la seva pàgina web i l'HTML per a ell. Resulta que amb els programes però, incloent Chrome, podem netejar això molt fàcilment. Per tant, no és que és com la raó. Quina altra cosa podria ser la causa. Sí. Sí, les dades dels costos d'espai en blanc. Què vols dir? Sí, exactament. Si vostè xoca amb la tecla Tab molt o la barra d'espai, consideri les implicacions. Així que cada tecla del teclat és un [Inaudible] representat com un byte. 

Així que suposo que Marc o qualsevol dels desenvolupadors aquests dies colpeja la barra d'espai un cop en aquesta pàgina HTML que representa la pàgina principal de Facebook. I Facebook té molt dels usuaris d'aquests dies. Així que suposo que la pàgina d'inici de Facebook és visitat per milions de persones en l'actualitat. I algú a Facebook té colpejar la barra d'espai una vegada. 

Així que un byte addicional, MIL MILIONS de sol·licituds, quant més dades Facebook transferir a internet perquè algú va colpejar la barra d'espai en el seu teclat? Mil milions de bytes, o un giga de s'estan enviant dades des dels servidors de Facebook a persones de tot el món sense una bona raó. Ara, això és només un espai. 

Imagineu si en realitat ens netegem això cosa i sangria i va afegir una gran quantitat d'espai en blanc i caràcters de tabulació i espais, acabes gigabytes de despesa, si no terra bytes més l'espai. I tan super comú en el món real de desenvolupament web és minify seu codi. I, finalment, veurem com es pot fer això. 

Però avui en dia, anem a començar a escriure codi que en realitat és llegible per nosaltres els éssers humans. Resulta, però, si ens remuntem a aquesta eina en Chrome Inspeccionar Element, anteriorment, estàvem a la fitxa Xarxa. Resulta que si vas a la pestanya elements, el que es veu és Chrome de prou impresa versió d'aquesta mateixa HTML. Per a això hem deobfuscated ella. Així que no és rival per a un ordinador. I ara pot fer-ho realitat clic i començar per veure la jerarquia que és una pàgina web. Així que anem a fer això realitat. Vaig a seguir endavant i obrir el el meu Mac un programa anomenat d'edició de text. I recordeu que això és només un programa de text super simple. Windows té notepad.exe. I em vaig a peu de la lletra escrigui el següent. Doc tipus HTML, suport obert HTML, HTML tancat suport, tenim la capçalera de la pàgina d'aquí, Al final de la capçalera de la pàgina d'aquí, un títol serà, hola món. 

I després aquí baix, necessitem el cos de la pàgina web. Cos tancat. I després aquí, hola món. Tot bé. Així que hem escrit una pàgina web molt ràpid. Vaig a guardar-lo com hello.html en el meu escriptori. El meu Mac va a queixar-se, pensant que, espera un minut, aquest és un fitxer de text, fer vols dir-.txt? Però no, jo vull utilitzar HTML punt. 

I llavors el que és bo si simplement feu doble clic en aquest arxiu, hello.html, aquí està la meva pàgina web. Per desgràcia, jo sóc el única persona al món ¿Qui pot visitar aquesta pàgina en aquest moment. Perquè ¿d'on viuen semblar? És en el meu Mac, oi? La qual cosa és inútil. Igual que ningú en aquesta sala i molt menys a l'Internet en realitat pot visitar aquesta pàgina. Així que avui, hem de introduir un altre element. 

I per fer això, vaig a seguir endavant i obrir el núvol setembre. Així núvol 9 és per suposat una núvol clients-- basada CS50 IDE-- Això té tots els nostres espais de treball corrent en algun lloc d'internet. I això vol dir que tots els nostres fitxers són d'accés públic ja. Així que seguirem endavant i fer això. Vaig a seguir endavant i crear un nou arxiu NCS50IDE. Vaig a guardar-lo com abans com hello.html i feu clic a Desa. I ara només per estalviar temps, em vaig seguir endavant i copiar enganxar el codi en lloc de escriure-la. I guardar-lo. I pel que ara tinc una arxiu anomenat hello.html. Però, com fer que en realitat obrir-la com una pàgina web? Bé, resulta que l'integrat en CS50 IDE no només és un compilador com Clang i un depurador com GDB i raïms d'altres programes, hi ha realment una de ple dret servidor web funcionant a CS50 IDE. 

Tots vostès, és a dir, tenir el seu propi servidor web. I un servidor web és només una peça de programari el propòsit a la vida és per servir pàgines web. Per escoltar les peticions dels navegadors i respondre amb petits sobres virtuals dins dels quals és el contingut que he escrit. Així que aquest servidor web és font realment lliure i obert. On codi obert només significa programari que algú més té escrit que tots nosaltres podem realment veure i descarregar i fins i tot canviar el codi font. I es diu Apache. 

I ho hem fet una mica més fàcil utilitzar en CS50IDE cridant Apache 50. Així que en realitat pot entendre el següent. Vaig a dir Apache 50 inici. I llavors jo només vaig a dir de punts. I veiem alguns una mica missatge arcana dient l'establiment d'Apache document [? grup?] de casa, ubuntu, sigui el que sigui, reduir espai de treball. A partir servidor web Apache 2 amb èxit. 

Així que conte llarg, em simplement han empès un botó i es va convertir en un servidor web que ara és escoltar a Internet en el port TCP 80 en una direcció específica. I diu aquí, i això canviarà en funció en el seu nom d'usuari i altres factors, notar ara si faig clic en això, IDE50 punt jharvard i tal així, notar que tot aquest temps Durant els últims setmana, és possible que tingui notat que el seu propi nom d'usuari està incrustat a la part superior dreta cantonada de CS50IDE. 

I que en realitat ha estat tot això temps de la direcció a la qual es pot visitar tots els seus arxius a través del web. Fins ara, no ha importat, perquè en C, en general, volen que les coses s'executen en un terminal, no a la web. Però avui, comencem l'escriptura de codi basat en la web que nosaltres volem accessible a les adreces URL públiques. Així que el que vaig a fer és feu clic en aquest URL. 

I noto que veig bastant Índex lleig, un llistat de directori, però ¿quin arxiu salta a la vista és probable? Hello.html. Això es deu al fet que vaig salvar l'arxiu en el meu espai de treball. I el que jo he dit Apache servidor web es buscarà en el directori de l'espai de treball de David. I que a ningú al món vegi aquests arxius. 

I de fet, si ara feu clic a hello.html, Veig dins d'aquesta pestanya exactament aquest arxiu. Ara noti, núvol obra del 9 una cosa una mica d'ajuda per a nosaltres. Dins IDE CS50, observi que hi ha Tot d'una una barra de direccions. Això és perquè tot i que estem utilitzant Chrome per visitar CS50IDE, interior de CS50IDE és la seva pròpia versió d'un navegador web en aquest moment. I així, en lloc de complicar les coses, com a tal, Vaig a seguir endavant i simplement copiar aquest URL. Vaig a seguir endavant i just obrir la meva pròpia finestra Chrome. Així que no hi ha màgia aquí, no hi ha CS50IDE. Jo només vaig a pegar literalment la meva J Harvard URL i premeu Enter. I voilà, ara i En teoria, tots a Internet, si he configurat Apropiadament, permisos pot visitar aquest arxiu. I ara, si em va dir: hello.html, voilà, aquí és la meva pàgina web increïblement decebedor. Així que farem una comprovació de validesa ràpid. Perquè tot això és conceptual configuració. I en realitat no he realment et va ensenyar com escriure HTML en si. Per tant qualsevol dubte ara en el que acaba de succeir? Sí. Té CS50 posseeixen aquestes pàgines web? En quin sentit? Bona pregunta. Així CS50 de propietària CS50.io. De fet hem comprat aquest nom de domini. I per la naturalesa dels nois ingressant a CS50IDE, tots vostès obté el que es diu un subdomini. 

So-IDE50 Malan o IDE50-Rob.CS50.io, aquesta és la seva adreça única dins nostre nom de domini. Així que per als propòsits de la descomptat, vostè té la seva pròpia adreça única. Però hem simplificat les coses per comprar el domini de nivell superior, CS50 dot I / O i després tots els altres estan dins d'això, per així dir-ho. I tornarem a això en un parell de setmanes, probablement, especialment al projecte final temps, quan alguns de vostès pot ser que desitgi per obtenir els seus propis noms de domini. En realitat és relativament senzill. Tot bé. Així que ara farem això. Vaig a tornar a CS50IDE, on el meu arxiu en aquest moment, hello.html, no és tan interessant. M'agradaria fer alguna cosa una mica millor que això. Així que vaig a fer alguna cosa com això. Déjame paragraphs.html oberta. Així que aquest és un arxiu que vaig escriure amb antelació. A la part superior de la mateixa, igual que sempre, tenim observacions. Però en HTML, comentaris mirar una mica diferent. En la línia de tres i la línia 14, que veure la sintaxi per iniciar un comentari i acabar un comentari. 

Però cap de les coses en entre els assumptes funcionalment. És només una nota a un humana el que està passant aquí. I igual que un seny ràpida comprovar, si em desplaço cap avall, ¿Quina és la nova òbvia etiqueta que hem introduït? Les etiquetes fins ara que hem vist estan obertes HTML suport, cap, títol, i el cos. Però el que és evidentment nou ara? 

Sí, així pàg. L'etiqueta po etiqueta de paràgraf. I llavors jo només prestat algun incompliment Text llatí per constituir meus paràgrafs. Perquè el que volia demostrar és com vostè pot ser representar paràgrafs de text en HTML. I així el que està començant a succeir aquí és que ja hi ha un patró de desenvolupament. I me n'aniré endavant i fer això. Permetin-me primer apago Apache. I jo vaig a dir perquè s'iniciï en si de nou a l'interior de la font actual de set m directori. Així que no tinc accés a tot. 

I ara, si em vaig de nou a aquest anunci en el directori, noto que veig tots els arxius a partir d'avui. I veuràs al següent conjunt de problemes, anem a donarà instruccions per fer exactament això. Si obro paragraphs.html, això podria així semblar-se a un llenguatge de programació a vostè si vostè no parla o llegeix Amèrica. Però això és només tres paràgrafs de text que es marquen en HTML. 

I notar el paràgraf pauses entre ells. Perquè resulta que, i encara podria estar inclinat a fer això, mentre que en el món real, si vostè vol posar línia descansos entre coses, vostè pot ser, senzillament, fer això i prem a Desa. I ara, si torno a carregar aquí, previ avís que tot acaba desdibuixa junts en una sola bombolla de text. A causa d'HTML és una espècie de llenguatge mut. 

Està destinat a ser utilitzat en tals de manera que el navegador només es fer explícitament el que vostè li diu que faci. Així que si vostè no diu que dóna'm un nou paràgraf, no vas a veure un nou paràgraf. I de fet, el que el navegador va a fer és encara si prem enter, diguem que una i altra vegada i de nou, movent d'aquesta manera text avall a la pantalla i després guardar i després torneu a carregar, el navegador va a col·lapsar tot aquest espai en blanc en una sola, espais en blanc visible. Tot bé. Així que aquesta és l'etiqueta de paràgraf. I així, el que és el patró això és el desenvolupament d'aquí? Doncs bé, sembla ser el cas que HTML és tot sobre com iniciar una etiqueta i acabant una etiqueta. ¿I què és una etiqueta? Bé, és només una part de la sintaxi. Suport Open, una paraula clau, suport tancat, és una etiqueta. O començar etiqueta. I després quan estàs fet expressar-se, com en què hagi acabat amb el paràgraf, ho fa per dir-ho contrari. Però el contrari no és exactament a l'inrevés. 

Només ha de anteposi la mateixa etiqueta de nomenar amb una barra diagonal com aquest. Tot bé. Així que no tot el que emocionant. I, de fet, no estem fent el web tot el que sigui més interessant. Què passa si vull fer coses més grans i en negreta? Així resulta que aquí està un exemple en headings.html, on en el meu cos, Tinc una etiqueta H1, H2, H3, quatre, cinc, o sis, tots els quals semblar bastant arcà. Però si vaig a obrir aquest exemple, anem a fer una ullada. Headings.html. 

Així navegadors per defecte pot donar vostè text això és gran i en negreta de grandàries dispars. H1 és gran. H6 és menor i després tota la resta en el medi. Així que això és interessant, però encara no és realment la web que conec. Què passa si volem que tinc una mena de llista. . Així que aquí està una llista amb vinyetes de tres de les cases de Harvard. 

Com va ser el procés de fer això? Bé, mireu list.html. I aquí, veiem una mica de funk però anem a considerar el que està succeint. Així que basat en el que acabes de veure, UL significa llista desordenada. Llista sense endreçar simplement vol dir vinyetes. No hi ha números. També hi ha una cosa anomenada 1 llista, que és un OL a l'etiqueta ordenada. Llavors LI, element de la llista és tot el que significa. 

I així de forma automàtica números de tot per a vostè. Però, de nou, tots els de la meva esquerda i l'espai en blanc és només per mi. El navegador no és en realitat cuidarà. Així que tot i que no podia fer això, només per ser clars, no es deu a tot i que El navegador segueix ser capaç d'entendre molt bé. Estic colpejant recàrrega en el meu navegador, estic fent clic recàrrega i cap canvi està passant perquè el navegador encara fent exactament el que et dic que fer. 

Tot bé. Així que tot això és només text. Ara farem alguna cosa més interessant. Vaig a seguir endavant i demanar prestat una mica d'això HTML. Vaig a seguir endavant i crear un nou arxiu aquí. I anem a trucar a aquest rick.html. Tenim desproporcionadament alguna cosa usat anomenat un rotllo de rick en aquest classe aquest any, no sé, simplement va succeir orgànicament. 

I ara va sortir de control. Així que només vaig a anar amb ell. I si vaig a Google Imatges i Rick Astley. Si vostè no sap per què ho fem això, acabo de llegir a la Viquipèdia. Cada vegada que hagi fet clic a l'enllaç, algú ha estat rient d'alguna part. I me n'aniré ahead-- existeix anem, anem a veure aquesta imatge. 

Així que aquí tenim una imatge a Google. I anem a suposar que es tracta d' raonablement tot arreu a Internet. Així que vaig a assumir que està bé per a mi per posar en realitat això a la meva pàgina web. Vaig a seguir endavant i copiar URL de la imatge. I ara si em vaig de nou al núvol 9, anem a veure el que puc fer aquí. Així que aquí és només una pàgina web. Aquesta és Rick Astley, jaja, Vaig ara a tornar al meu navegador, torneu a carregar, i interessant. 

On és Rick? Així que permetin-me veure el que ha passat. En realitat, jo vaig a fer veure que jo no vaig fer això. [Inaudible] el va posar aquí. Tornarem a això en un moment. Així que aquí està rick.html. Així que això no és Rick Astley. Així que resulta que puguem en realitat el afegir aquí. Es tracta de Rick Astley. Jo vaig a dir que em donen una imatge el font és l'adreça URL que acabo de copiat, que pel que sembla, és un feliç aniversari una cosa o una altra. 

I ara vaig a tancar l'etiqueta així. Així que això és embolicar super llarg. Però noto que tot el que tinc fet imatge claudàtor obert és a dir, font amb un atribut d'aquest. I és una molt llarga URL. I al final, compte d'això. Slash Per què he fet forca en lloc de, com qualsevol altra etiqueta, tenir un suport obert, IMG, suport tancat? Només cal fer una conjectura fins i tot si no tenen familiaritat alguna amb HTML abans. 

Així és com es tanca la comanda, però per què ¿No realment fer intuïtiva sentit de fer alguna cosa una mica més verbose com prop d'imatge? Sí. Sí. Només semànticament, no hi ha sentit de a partir d'una imatge i acabant una imatge, és allà o no ho és. Per tant, no té sentit deixar un espai per a qualsevol altra cosa dins d'una imatge. Vostè simplement no pot fer això. I així la sintaxi seria generalment just fer la barra diagonal a l'interior de l'etiqueta oberta o l'etiqueta d'inici i després feu clic a Desa. 

Així que si ara torna a carregar l'arxiu, ara Tinc un bon lloc a Internet la pàgina de cuina aquí. I podríem sens dubte realment molestar la gent mitjançant la incorporació en comptes com un enllaç de YouTube. I de fet, en qualsevol moment Alguna vegada has anat a YouTube, i em va deixar realment accidentalment rick rodar jo aquí. Així que Rick roll. Així rick Roll-- vaig a anar aquí. 

[REPRODUCCIÓ DE MÚSICA] 

OK, una persona li agrada això. Així compte de tot aquest temps, si feu clic a l'enllaç Share, és clar obtenir la URL que pugui realment incrustar en un correu electrònic o una imatge forense o en un conjunt de problemes o en una diapositiva. I ara, si em vegada clic a embed, notar que tot aquest temps, aquestes coses ha estat allà. Vaig a seguir endavant i copiar aquest. 

I només perquè puguem veure millor, estic va a pegar en el meu editor de text. Tingueu en compte que això ho YouTube ha estat dient. Cada vegada que visita un Vídeo de YouTube, si desitgi incrustar el vídeo en el seu pàgina web, només ha de agafar això. Així que aquest és un altre Etiqueta HTML diu un iframe. O un marc en línia. Per tant, també es veu una mica més complex que tots els altres. Així que resulta que la imatge etiqueta i pel que sembla l'etiqueta iframe prendre el que són anomenats atributs. 

I aquest és un altre tros de sintaxi en HTML. A més de l'etiqueta de nom, nom d'etiqueta oberta del suport, es pot controlar el comportament de l'etiqueta per tenir un munt d'atributs igual valor. Atribut igual valor. I així, per exemple, YouTube ens està dient si voleu que l'ample d'aquest vídeo per a ser 420 píxels i l'alçada ser 315 píxels, això és com ho expresses en HTML. 

La font del vídeo es va estar tant de temps URL de YouTube i després algunes altres coses com la frontera del marc és zero, de manera que probablement vol dir que hi ha sense vora per la cosa. Permetre pantalla completa, probablement, significa que l'usuari pot fer clic en un botó i realment la pantalla completa del vídeo. Així que si realment vull ser impressionant aquí a Rick punt HTML, en lloc d'utilitzar l'etiqueta de la imatge, i molt em esborro que, en lloc enganxa aquest. I ara recarregar. I ara aquí anem de nou. Molt bé, ja n'hi ha prou. Està bé així que intentaré difícil no fer-ho de nou. Quins són alguns dels robatoris de pilota d'aquí? Així HTML, tan lleig com aquestes pàgines web són, en realitat és bastant simple. No és un llenguatge de programació. No té funcions. No té bucles. No té condicions. Tot el que té és desenes de etiquetes diferents, cadascun dels quals té zero o més atributs. I de fet, el que és divertit sobre HTML com vostè comença a submergir-se en és que és acte ensenyable molt. 

Només es necessita una entesa del marc general d'HTML. Què és una etiqueta, què és un atribut, Com en realitat configura una pàgina web com segueix. I tota la resta és realment el resultat de mirar cap amunt en una referència en línia o googlejar com fer algunes tècnica o com hem vist, busca a la font de Facebook codi, mirant a un lloc web que t'agrada en ell és el codi font i la comprensió de com els desenvolupadors d'allà realment relaxat coses. 

Així que podem fer imatges també. I de fet, ho vam fer fa un moment. Déjame anar endavant i només et mostro. Aquests són alguns exemples de codi. Si alguna vegada vols veure gat rondinaire. Així que adonar-se que el que pugui tenir una etiqueta d'imatge aquí. I tinc un comentari sobre ella. Tinc una alternativa text per a l'accessibilitat. Així que algú que està utilitzant una pantalla lector per raons de vista en realitat pot llavors tenir la seva lector de pantalla dir gat rondinaire. Perquè si no poden veure la imatge, que almenys pot tenir el seu ordinador dir-los verbalment el que és. I la font d'aquest arxiu és cat.jpeg. Així que, de fet, si jo realment volia aconseguir llest, el que podria tenir done-- Prometo no anar a Rick Astley, per la qual Vaig a google per un gat al seu lloc. I si vaig a Google aquí, i anem a suposar que aquesta és una foto del meu gat. 

Suposem que tinc el control fa clic o la dreta clic en aquest, per accident esgarrifós. I cat.jpeg vaig per guardar en el meu escriptori. Permetin-me ara torno al núvol setembre. Tingueu en compte que aquí, pot anar a carregar els arxius locals. I si m'agafa aquest arxiu, cat.jpeg, previ avís que puc arrossegar i col·locar en el núvol setembre i que va a cridar a mi aquí. 

Perquè ja hem donat un arxiu cat.jpeg, però és molt fàcil de fer una foto que tens presa de Facebook o Flickr o similar i en realitat arrossegar en el núvol 9 i després fan part del seu propi personal pàgina web o problema establir set o vuit com a molt aviat veurem. I després, quan finalment visitar aquest gat, assumint que he descarregat aquest mateix gat, avís que-- que era adorable. 

El que es pot veure és una mena aquesta cara aquí. Així que els arxius que de referència dins d'una pàgina web o bé pot ser local en el seu propi compte o remot en algun altre servidor com en el cas de la Rick Foto Astley fa una mica. Llavors, on el else-- més podem fer aquí? Així que donem una ullada a la següent. Vostè sap el que està bastant guai? 

Fins ara hem estat fent pàgines web molt estàtica. Vull condimentar les coses de la següent manera. Vull fer el meu propi motor de cerca. Així que per fer un motor de cerca, anem a seguir endavant i començar a fer això. Vaig a seguir endavant i crear un nou arxiu anomenat search.html. I hem prefabed versions en línia. Vaja. No enganxar a la finestra del terminal. Versions muntades en línia. I jo vaig a començar la següent. Així que aquí està el començament de un arxiu anomenat search.html. Vaig a guardar-lo en directori d'origen d'avui. Vaig a trucar a aquesta cerca. En realitat, ho farem millor. CS50 Recerca i realment marca la mateixa. I ara, jo vaig a dir una mena H1 CS50 Cerca. I després aquí baix, H2 properament. I només per recapitular, H1 i H2 significa el respectivament? 

Sí, per la gran i en negreta, i no tan gran, però encara negreta. Així que si puc guardar això i vaig per aquí, anem a veure la search.html arxiu. Molt bé, i aquest és dreta- [inaudible]. Prepareu-vos. David és confusa. Oh, és just aquí. David és un idiota. D'ACORD. Així que aquí està. Així CS50 recerca properament. Així que ara, anem a sintetitzar el que vam fer la setmana passada. 

Quan parlem de la mecànica menor nivell d'HTTP. I aquestes noves idees d'HTML, que és només Aquest llenguatge de marques en què explicar un navegador exactament què fer i implementar el nostre propi motor de cerca. Així que en lloc de només dient que ve aviat, estic va introduir cosa que es diu una etiqueta de formulari. I en aquesta forma, vaig a tenir alguna cosa com un camp d'entrada. 

I el nom d'aquesta entrada camp, vaig a dir-P. I el tipus d'aquest camp d'entrada Jo vaig a dir és "text". I un camp de text, com veurem veure, és només un quadre de text. I així no sentir aquí per tenir res dins d'ell en aquest moment. I així que estic simplement va per tancar l'etiqueta amb la qual barra diagonal just a la pròpia etiqueta. I després vaig a tenir una altra entrada. Tipus d'entrada és igual a presentar. I després vaig a tancar aquesta també. 

I ara vaig a tornar aquí. I ja veiem, encara que bastant lleig, tinc aconseguir els inicis de la meva pròpia pàgina de cerca aquí. De fet, vaig a tractar de netejar això una mica. Resulta que en el Introduir, puc tenir altre atribut anomenat marcador de posició. I podria veure alguna cosa com paraules clau, o més específicament, consulteu per q. 

I compte, ara, tinc aquest tipus de text gris que desapareix tan abans de començar a escriure, però és probable que hi hagi alguna cosa vostè ha vist en altres pàgines web. No m'agrada realment el botó Enviar. Així que estic realment va a donar el Botó Enviar un valor de cerca. I ara, si torno a carregar, observi que el meu botó es converteix en el nom de cerca. Saps, realment no em com el logo aquí. Així generador de Google Font. 

Vull donar-li vida a això encara més. Cerca per CS50. Déjame crear el meu propi logo. Sembla interessant. Així que ara anem a salvar aquest com-- anem. On va? Hi ha. D'ACORD. Perdut. Guardar com. Navegadors estúpid. Prepareu-vos, anem a arreglar això d'una vegada per totes. Som-hi. Tot bé. Ho sento. Dia lliure. Ara bé, això és molt de moda. Surt de la pantalla completa. Tot bé. 

Ara, igual que un de normal persona, registrar la imatge. Logo.gif. Ara vaig a entrar en CS50IDE i Vaig a simplement agafar el logotip, Vaig a arrossegar-lo a el meu directori font 07:00, ja existeix l'arxiu, estic bé amb això. Així que vaig a anul·lar- perquè jo ja tenia. I ara, com puc desfer-me d'això? 

Seguirem endavant i fer aquí font d'imatge és igual logo.gif. Tancar aquesta. Save. I ara si em torno a la meva recerca pàgina, ara es veu bastant bé. Molt bé, pel que no té bastant fet res útil. De fet, vaig a intentar buscar per a un gat i veure què passa. Gats. Maleït sigui. No només funciona, pel que sembla. Quina és la peça clau que falta aquí? 

Dreta, encara que no sap res d'HTML, He començat a marcar el formulari de telèfon i jo he dit és com aconseguir entrades, dóna'm un quadre de text i un botó d'enviament, quina peça aparentment falta? Suposem que volem aconseguir realment aquesta cosa funcioni correctament. Què necessitem fer? Tenim una necessitat d'implementar la part de darrere base de dades o el motor de recerca de si mateix, i això va a prendre un tot molt de temps, francament. 

Així recordem el que vam fer l'última vegada. Així que si vostè busca alguna cosa a Google i ha avançat desactivat, revocatori, cerca instantània. Així que permetin-me que fos de manera que en realitat això es comporta com un navegador de l'escola més antiga, si jo ara busco alguna cosa com gats, recordar el que l'URL es sembla. És bastant críptic. Però incrustat allà, record, és la recerca de tala. Signe d'interrogació q és igual als gats. 

I això em sembla donar un munt de resultats de cerca. Així que ja saps el que vaig a fer? Vaig a demanar prestat Google només per un minut. Vaig a anar més aquí i jo vaig a dir que aquesta forma d'acció o destí, per així dir-ho, literalment ha de ser Google. I el mètode que jo volia per a ús serà aconseguir. 

Llavors, què és l'acció? Acció està estranyament nomenat, però això només significa ¿Qui va a gestionar l'acció d'aquesta manera? Quan faig clic a Cerca, on si el resultat d'anar? I si ara torno a la meva forma aquí i recarregar la meva pàgina web i ara buscar alguna cosa com el gos, compta ara He re implementat Google. Oi? 

Si vull buscar alguna cosa una altra cosa, funciona per no només els gossos, també funciona per als gats. Això també funciona per CS50. I bé, això és només sota a sobre teu, no? Molt bé, però realment funciona. Així que el que està succeint realment? Així que m'he ensenyat al meu navegador, utilitzant HTML, per prendre la entrada de l'usuari i en realitat enviar aquesta entrada a un servidor remot a través d'HTTP. 

I perquè el meu navegador entén HTTP, que en realitat construir la URL perquè ho Acabo altra vegada en el meu navegador, adonar-se del que passa quan vaig buscar per al gos. Si faig clic a Cerca, observi que la URL canvia a mesura que pensava a google.com/search~~V consulta equival gos. I això és perquè la forma sap, perquè el mètode és obtenir, simplement afegir a aquesta URL allà. 

Ara, aquestes pàgines web són encara lleig. Així que anem a introduir un altre tros de sintaxi si podem avui. I això és una cosa conegut com les fulles d'estil en cascada. Així que permetin-me fer una ullada a aquest exemple aquí i veure si podem inferir el que està passant. Això és CSS0.html. I aquí és on les coses aconseguir una mica lleig. Perquè per desgràcia, en el món de la web, HTML per si sola no pot fer-ho tot. I així, si vols estilitzar la teva pàgina web, que realment necessita per centrar-se en el l'estètica d'una manera diferent. Així que aquí, tinc el cos de la meva web pàgina dins de la qual és un gran div. I un div només significa divisió. Així que és com un paràgraf però no té la mateixa semàntica d'un paràgraf de text. 

Això només significa que el navegador, aquí ve una regió rectangular gran de la meva web pàgina, vull manejar de forma especial. Ara, la línia 21 és on comença aquesta div. I acaba de prendre una conjectura. Quin és l'efecte de la línia 21 en el resta dels continguts de la pàgina? Centrant. Això és tot. Així que no hem vist una forma de en realitat centrar el text. 

De fet, el meu motor de cerca, a diferència de l'actual Google, va ser tot justificat a l'esquerra. I pel que ara en la línia 21, que estic dient, hey navegador, crear una divisió de la pàgina. Només dóna'm un gran, rectangle invisible. Això és el que vull pensar en la pàgina web. I després estilitzar la següent manera. Dins d'aquestes cotitzacions, Ara, és un segon idioma que presentem avui trucades fulls d'estil en cascada. Afortunadament, també no és un llenguatge de programació, així que és molt limitat en la seva sintaxi, però També és molt limitat en la seva funcionalitat mentre que HTML està tot sobre el marcatge de les dades d'una pàgina web i l'estructura d'una pàgina web. CSS és generalment d'aproximadament el última milla, l'estètica, aconseguir la mida i el color i la col·locació exactament a la dreta en una pàgina web. I, de fet, està format amb parells de valors clau. 

Una propietat d'aquest tipus, el text alinear, seguit de dos punts, seguit pel valor d'aquest propietat, que en aquest cas és central. I ara adonar que Pot niar aquestes coses. Si volia tot en aquesta He destacat d'estar centrat, és per això que tinc la línia 21 i la línia corresponent 31. Però suposem ara volen dir John Harvard, benvingut a la meva pàgina d'inici. 

Símbol de copyright John Harvard. I suposo que vull la primera de aquestes línies per ser bastant gran. 36 píxels. Així que això és una mida decent. I jo volia el seu pes a ser valents. Però llavors sota d'això, Vull text més petit. I sota d'això, vull text encara més petit. Ho sento. Avui en dia se sent com un dia de descans. 

Així que ara, què estic fent per expressar això? Aquí a la línia 22 és una encastat div o div niat, si es vol. També té la seva pròpia etiqueta d'estil. Puc especificar una mida de font de 36. Puc especificar un pes de la font de negreta. Aquí sota, només puc especificar 24 píxels. I, finalment, en la línia 28, que especifiqui 12. Així que com una prova de seny ràpida i com una lectura humana això, que les paraules en la pantalla són en realitat va a ser audaç? Quines línies són realment audaç? 

Només John Harvard. Oi? Perquè així com la línia 22 diu bo navegador, aquí hi ha una divisió de la pàgina. Que sigui la mida de font de 36 punts. Fer que el pes de la font negreta. Tan aviat com arribi a la etiqueta final corresponent o etiqueta de tancament a la línia 24, això vol dir, bé navegador, deixar de fer el que sigui que estigui fent. I fixin-se que quedi clar, tot i que línia 22 té tots aquests atributs com l'estil, quan tancar l'etiqueta en la línia 24, només s'esmenta el nom de l'etiqueta. 

No repetir l'estil paraula o tot el que hi ha dins d'aquestes cotitzacions. I pel que si em veig en aquest moment en el meu navegador, donem Una mirada a el resultat final. Deixa'm anar per davant d'aquest arxiu, que és CSS 0. I tot i així és força planer, però aconseguir força interessant. Però resulta que hi ha altres coses que puc fer aquí, i en el risc de fer aquesta completament horrible, notar aquí que en el meu cos de la meva pàgina web, Puc fer alguna cosa divertida com bg o color de fons. 

I ràpid, quin és el teu color preferit? Verd que vaig sentir. Tot bé. Així que ara, si em va colpejar recàrrega ara, tenim una pàgina web verd. Molt bé, així que no està malament. I ara, si vull fer això realment fresc, puc fer el color del meu text fins i tot vermell. Així que anem a veure el que això s'assembla. Ara es veu bastant bé. I aquí, si realment vol ficar-se amb algú o si vols ser una d'aquelles persones que tracta d'enganyar perquè visiti una web pàgina perquè han enganyat Google en el pensament que hi ha un munt de les paraules clau com-- veurem, tornar a carregar. On va ser? I no nosaltres. Tot bé. Per això dic això com un a part, anem a parlar d'aquestes coses en un parell de setmanes quan parlem de seguretat, si en realitat incrustar raïms sencers de paraules clau en una pàgina web, encara que no són visibles a un humana, algú com Google, per descomptat, encara pot realment trobar això. Molt bé, així que és bastant horrible amb força rapidesa. 

I, de fet, no ho és tot que gran diferència de la meva pròpia web pàgina com a estudiant, que Vaig començar buscant a Google voltant per trobar Les versions anteriors dels meus vells llocs web. Era bastant dolent. De fet, he trobat 1 just abans de la classe. Però no hi ha pitjor que hi ha. Pel que sembla, això va ser el meu pàgina d'inici en l'any 1996. Pel que sembla, vaig pensar que era apropiat per preguntar a la gent del seu nom abans que poguessin en realitat veure a la meva pàgina web. 

I llavors els vaig mostrar alguna cosa estúpid, probablement. Vaig a desenterrar més per a la propera vegada. Però per ara, anem a considerar una mica de disseny. Hem parlat d'estil. I aquesta pàgina fins al moment i gairebé tot el que he escrit és bastant net estilísticament. Però què passa amb el disseny? Bé, hi ha una gran quantitat de redundància en el que he estat fent aquí. 

He esmentat la paraula color en un parell de llocs. He esmentat la mida de font en un parell de llocs i audaç en un parell de llocs. I fonamentalment, sóc co barrejant dos idiomes. Tinc HTML amb els meus etiquetes i el meu atributs i després, de sobte, entre cometes, tinc la segona llengua d'avui anomenat CSS, que al seu torn, és només aquestes parells de valors clau o aquestes propietats separats per dos punts. 

Resulta que molt com en C on pot començar a factoritzar un codi en arxius de capçalera, així que podem fer el mateix en HTML. I un pas cap a la qual és com segueix. Recordeu que aquesta versió, és CSS1.html Estructuralment la mateixa pàgina web exacta. Així que tinc un munt de divs, però aquesta vegada, no tinc lliurat de l'embolcall div com veuràs. 

I m'he donat aquests tres divs superior, mitjana i inferior, identificadors únics. Això és bo, perquè per donant aquestes divisions de les pàgines identificadors únics, Puc fer referència a ells en altres llocs. On? Bé, deixa desplaçar-se cap amunt. I fins al moment, en qualsevol moment ens hem vist al capdavant d'una pàgina web, el que és l'única etiqueta que hem tingut en el cap d'una pàgina web? Una mica més fort. Només el títol fins al moment. Però resulta que hi ha algunes altres coses vostè pot posar en allà, un que es diu una etiqueta d'estil. Així que fa un moment, busquem a un atribut d'estil. Resulta que hi ha una etiqueta d'estil. Pertany interior el cap d'una pàgina web. I ara noto el que estic fent. Que tinc dins d'aquesta etiqueta d'estil el següent. Estic literalment esmentar en la línia 20 del nom d'una etiqueta que vull per estilitzar. 

Llavors tinc clau d'obertura i tancat claudàtor. Així similar a la de C, però de nou, aquesta no és una funció, això és només un detall sintàctica aquí. I després, per descomptat, jo estic dient el navegador, hey navegador, fer que tot el cos de la pàgina tenir una alineació de text de centre. I llavors això està dient el següent. Hey navegador, si vostè veu un HTML element o etiqueta a la pàgina que té un identificador únic de la part superior, per la qual cosa el símbol de hash aquí només significa idea única de la part superior, endavant i fer que la seva mida de font 36 i el seu pes negreta. 

Hey navegador, un element la ID és mitjana, el converteixen en 24 píxels. I sent navegador, si vostè veu un idea de fons, el converteixen en 12 píxels. L'efecte en el final és exactament el sam. Si entro a CSS1, el pàgina té el mateix aspecte. Però estem un pas cap a una mica millor disseny. Permetin-me ara torno aquí per CSS2 i veig què més que he fet. 

Ara la pàgina està molt, molt net. De fet, puc encaixar tots el contingut d'una pàgina aquí. Però, ¿quina nova etiqueta he introduït, òbviament? Enllaç. I no és el millor nom per a una etiqueta, perquè no és un enllaç en el sentit que el coneixem, però això significa un enllaç en algun altre arxiu. Això és una cosa així com aguda inclouen en C. 

Aquesta és la manera en HTML per dir escolta navegador, anar a buscar els continguts de l'arxiu anomenat css2.css. La relació, per a mi, és que és un full d'estil. I de fet, això és el que el de la S d'estil en cascada enmig llençols. Es tracta d'un full d'estil. És només l'arxiu de text que conté un munt de propietat. És un munt d'estils que vol aplicar a una pàgina. 

I pel que aquest aparentment és referint-se a un segon arxiu. I si obro que, CSS2.css, adonar que tot el que he fet és copiar i enganxar tot d'això en aquest arxiu. I ara, fins i tot si vostè mai ha codificat aquestes coses abans, n'hi ha prou amb considerar la barret de l'enginyeria proverbial , Per què és això un millor disseny, probablement? Factoring aquestes propietats CSS, posar-los en el seu propi arxiu. Tot i que hem resolt aquest Fa problema com cinc minuts en la primera versió. 

Nosaltres no hem millorat la pàgina estilísticament, això és simplement millor disseny en algun sentit. Per què creus? Sí. Més flexible, com? Sí. Així que si vols anar enrere i canviar les coses, Ara, vostè té un sol lloc on pot canviar les coses. I de fet, una cosa com a problema estableix set, on anem a implementar un lloc web de comerç de valors, això va a tenir un tota munt de pàgines. I seria molt molest si vostè decideix, hm, Realment no m'agrada 24 píxels, vull que sigui 28 píxels o una mica més gran. I després haver de fer un mundial buscar i reemplaçar o obrir tots els arxius del seu lloc web simplement per canviar realment un valor. En tenir aquests estils en un lloc central, Ara vostè pot obrir un arxiu de text en CS50IDE en qualsevol programa, canviar-lo, guardar-lo, i fet. Vostè ha propagat els canvis a tot arreu. I això seria el mateix en un arxiu dot h també. Així que qualsevol pregunta per tant ara en aquesta sintaxi? Molt bé, així que hem fet tot el que sembla excepte en realitat aplicar hipervincles. I així seguirem endavant i fer això. Déjame anar endavant i crear un nou arxiu aquí. Vaig a dir- link.html, posar en el codi actual. 

I jo faré oberta suport de tipus doc html. Com acotació al marge, aquesta cosa en la superior, aquesta declaració de tipus de document, que és l'únic que és rar amb el signe d'exclamació. Només has de fer-ho allà i vol dir que estem utilitzant la versió d'HTML 5. Les versions anteriors de idioma tenia molt més llarg cadenes que es necessitava per posar-hi. Així que aquí és un exemple anomenat enllaç. 

Necessito un cos de la meva pàgina web aquí. I en aquest cas, un href iguals diguem HTTP://www.disney.com i el meu lloc web favorit, direm. Molt bé, pel que una molt pàgina innocu, fàcil d'utilitzar. Si ara entro en el meu directori llista aquí i obrir link.html, tenim hiper text. 

I de fet, aquí és on la h en HTTP ve. Hypertext Transfer Protocol és sobre la transferència de text que té enllaços a altres recursos. I de fet, aquí està el familiar, si retro, blau enllaç que si es fa clic, en realitat em porten a Disney.com. Ara, oh, això és que sortirà aviat. Molt bé, així que ara, ¿quins són algunes de les conseqüències d'això? 

I, francament, el món comença per aconseguir una mica més familiar i també una mica més por però també una mica més acte defensable una vegada que comenci per entendre aquestes coses. A causa que les probabilitats són, alguns de vostès, si vas a través de la seva carpeta de correu brossa Gmail o fins i tot la safata d'entrada, probablement aconseguit algun tipus de correu electrònic que vostè està demanant de canviar el seu contrasenya verificar potser o potser les seves credencials de PayPal o què sé jo. 

I de fet, és possible que hagi rebut cosa que diu com fer clic aquí per restablir la contrasenya de PayPal. I ara, observi, si això no és Disney.com però igual que badplace.com i recarregar, tingui en compte que el text aquí podien dir res en absolut. I de fet, això és només paraules. Per què no puc ser realment molt maliciós i dir http://www.paypal.com. 

Feu clic aquí restablir la seva PayPal contrasenya i ara recarregar. Això es veu molt legítim, no? Vull dir, no em faci clic a un correu electrònic que només diu això. Però notar la dicotomia aquí. Diu www.paypal.com, i de fet, espera un minut, sabem que vostè vol el s per a la seguretat. Així que ara, aneu a www.paypal.com HTTPS, però si vostè mai ha fet això abans, no entrar en l'hàbit de plana sobre petits que enllaça. I és difícil de veure a la pantalla d'allà, i no és tot el més fàcil aquí. Però fins aquí a el petit racó petit el navegador fa realitat que anem dir-li a badplace.com lloc de Paypal.com. Ara, ¿a on anem amb això? Tots els exemples que hem fet avui, hem codificat i escrivim manualment dur. El web és increïblement sense interès quan dura codificar les seves pàgines web perquè el contingut és estàtic i mai canvia. Per descomptat, tot el nostre llocs web favorits d'avui, ja sigui Gmail o Twitter o Facebook o qualsevol nombre d'altres són dinàmics. Estan canviant en resposta a l'entrada d'usuari de la mateixa manera que els resultats de cerca de Google. 

I així, dimecres, el que fem és deixem HTML i CSS introducció darrere de nosaltres i ens prenem per fet que ara conèixer-la i introduïm un nou llenguatge de programació anomenat PHP, el que li agrada C, se'ns va a donar el poder de crear en realitat programes que ells mateixos generen sortida. En aquest cas, utilitzarem PHP per generar dinàmicament web pàgines amb aquest nou llenguatge. Així que més que dimecres. Ens veiem llavors. 

[REPRODUCCIÓ DE MÚSICA]