[Música tocando] DAVID J MALAN: Tudo bem, bem-vindo de volta. Este é CS50. Este é o fim de semana de sete. E é o fim desse limpador caça do conjunto de problemas de quatro que você pode se lembrar. Depois de se recuperar de todos esses JPEGs de pessoal, você foi desafiado, se você quiser, para fotografar-se com o maior número daquelas pessoas que você puder. Temos um monte de submissões ao longo das últimas semanas, de fato, algumas direito bastante antes do meio dia hoje, alguns dos quais são aqueles aqui, pego aqui em-- parece como-- Annenberg Salão no horário de expediente, um aqui em Lowell Casa com Nick. Aqui está Ramon ser pego no telefone. Isso foi numa CS50 almoço. Este foi Jason Skyping com um colega de classe mais criativo, que lhe telefonou desta forma. Nós não sabemos o que isso era. 

[Risos] 

DAVID J MALAN: Mas que vale a pena um gigabyte. Aqui é Chang, que literalmente, correu para fora do palco para evitar ser fotografado uma dia, mas foi finalmente capturado. Aqui é Nick. Aqui é Nick. Aqui é Nick. E aqui é Alison para baixo pelos campos. E Zamyla mesmo foi encontrado em uma competição de salão. Então vamos passar por estas fotos, descobrir que apresentou o maior no mínimo, e recompensa um prêmio fabuloso, como prometido na spec. E nós também vamos acompanhar cerca de o espaço que foi envolvido. 

Um casal de announcements-- tão almoço é, novamente, nesta sexta-feira 13:15. Se você gostaria de se juntar a nós, De RSVP em que URL aqui. Jason aparece novamente aqui a partir de uma das seções de um par de anos volta, o que aconteceu cair no Halloween. E, de fato, ele se vestia como um abóbora nesse mesmo ano. Se você assistir a esta seção de sua seção a partir de 2011 oito, se você está curioso, em CS50.tv, eu acho este foi o ano em que sua bomba de ar estava funcionando. 

Se você, em seguida, assistir a seção semelhante em 2012, você verá esta Jason muito esvaziado, uma vez que o fato já não funcionava, que é só para dizer nesta sexta-feira, se você gostaria de esculpir uma abóbora com Daven e Gabe e outros, RSVP para as cabeças no endereço cs50.harvard.edu. Promete ser uma grande diversão. Daven, dizem, tem esculpido abóboras toda a sua vida. Gabriel de o Brasil nunca tem esculpida uma abóbora para o Halloween. Então, seja lá com eles como ele aprende. 

Seminários, meanwhile-- assim que você vai aprender em breve sobre o que nossas expectativas são para o projeto final, que, essencialmente, vai se resumem a concepção e implementação de mais qualquer projeto de interesse para você, ainda sujeito à aprovação e orientação do seu companheiro de ensino. Perto do fim do semestre, nós introduzimos um número de seminários, que são aulas opcionais liderada pelos companheiros de ensino e Harvard pessoal, os amigos do curso em todo campus, sobre vários temas que são tangenciais à syllabus do curso subjacente mas mesmo assim o caso, divertido, e diferente para potenciais projetos finais. 

Por exemplo, em primeiro lugar, se você gostaria para se inscrever, siga para a URL lá. E esta é a programação para sozinho seminários deste ano. Mas percebemos que temos dezenas de seminários de anos passados, os quais estão ligados no menu Seminários opção do site do curso. Então, se você está pensando em indo além de sua zona de conforto ou pegar algumas novas habilidades, por exemplo, a programação iPhone aplicativos com Swift, uma nova linguagem da Apple ou Objective-C ou Android Apps ou programação [? cue?] lâmpadas, ou qualquer um dos tópicos aqui em cima e mais, devido verificação a página de inscrição. 

Então começamos e concluído em Segunda-feira com olhando para HTTP. Então HTTP refresher-- rápida, HyperText Transfer Protocol. Mas o que isso realmente significa? O que isso realmente significa? É que uma mão? Eu sei que você está apenas coçando a cabeça. Mas você quer propor o que é HTTP? 

Audiência: Como os computadores comunicar-se com [inaudível]. DAVID J MALAN: eu perdi a última parte. Como os computadores se comunicam com-- 

Servidores de Internet: audiência. DAVID J MALAN: boa-- com internet servidores e, especificamente, servidores web. Porque lembre-se, há um monte de serviços na internet, alguns dos quais você usa provavelmente diariamente entre bate-papo e de mensagens, chat e web, e-mail, e semelhantes. E HTTP é apenas o protocolo que navegadores web falar ao se comunicar com servidores web, e vice-versa. E o analógico na mundo humano poderia ser, Eu estendo minha mão para apertar alguns outro ser humano do e ele ou ela reconhece, alargando a sua mão também. Então, isso é apenas um protocolo, um conjunto de convenções. 

E o que de fato são essas convenções? Bem, isso só se resume a envio de mensagens e para trás, como descrito aqui. E há um par de maneiras em qual você pode enviar essas mensagens. E talvez o mais comum é conhecido como get. E nós vamos ver um contraste para isso antes do tempo. 

Mas um pedido get a partir de um navegador ao servidor apenas se parece com isso. É um monte de texto que coloca dentro de um envelope virtual. Na parte externa do envelope que ir algumas peças de detalhes. O que precisa ir para a envelope, por assim dizer, a fim de obter um pedido como isso de mim para um servidor web? Sim. 

AUDIÊNCIA: O seu endereço de IP. 

DAVID J MALAN: O meu endereço IP no campo de, por assim dizer, e, é claro, o endereço IP do destinatário. Mas, no caso de um pacote de teia, precisamos de um pouco mais de detalhes Não é suficiente apenas para enviar um envelope para um servidor, porque esse servidor pode ser escuta para diferentes tipos do tráfego de internet. Então, o que mais precisamos além de IP do destinatário? Sim? 

AUDIÊNCIA: É TCP? DAVID J MALAN: Good. TCP-- 

AUDIÊNCIA: Endereço. 

DAVID J MALAN: Endereço, ou porta, como é chamado. Perto, mas um número de porta TCP. E há um monte delas. Mas, certamente, o mais familiarizado deveria eventualmente ser de 80, que é o padrão utilizado para o tráfego da web. E outra familiarizado uma breve estará 443, que é usado para seguro web tráfego, URLs que começam com https. 

Então é isso que vai dentro desse envelope. E obter / significa apenas, dar me a página web padrão. Dá-me a raiz do disco dirigir no servidor web. E espero que, a web servidor irá responder com, OK eo número 200, que é apenas uma convenção diz que, sim, tudo é realmente OK. Aqui está a página. O tipo de página web vai ser de texto, mas, mais especificamente, HTML, que estamos prestes a mergulhar de volta para. E o dot dot dot apenas meios, aqui está o HTML. E é aí que nós pegar a história de hoje, realmente escrever HTML, HyperText Markup Language, que é a língua em que páginas da web são escritos. Não é uma linguagem de programação. Não há funções ou laços ou condições. É uma linguagem de marcação, bem novamente vemos hoje, que permite que você especifique como estruturar e estilizar esteticamente uma página web. 

Portanto, este foi o único e só página que realmente olhou, se brevemente, na segunda-feira. E observe alguns características mais salientes. Há um monte de abertura angular suporte e perto do suporte angular. Entre aqueles angular colchetes são palavras. E nós vamos começar chamando essas tags palavras. Cabeça suporte de forma aberta e suporte de cabeça fechada são as tags abertas e fechadas, ou as tags de início e fim respectivamente, de um elemento HTML, como vamos chamá-lo, chamado de cabeça. E o mesmo se aplica jargão ao corpo em HTML e assim por diante. 

E o que é bom é HTML-- e, na verdade, nós vamos passar terrivelmente pouco tempo com ele, porque você vai na maior parte apenas descobrir quais as características que ele tem quando você realmente tem um problema concreto para solve-- você vai descobrir que um navegador é muito burro. Ele só vai fazer-- não ao contrário um Computador-- o que você diga a ele para fazer. E assim, quando você tem aberto HTML suporte no topo ali, que, essencialmente Significa apenas que, hey, navegador, aqui vem uma página web escritas em HTML. 

Quando se vê suporte aberto cabeça, isso só significa que, hey, navegador, aqui vem a cabeça, ou a parte superior da minha página web. Quando se vê um suporte fechado cabeça, o que significa apenas, hey, é isso para a cabeça. Espera para outra coisa. E que outra coisa é aparentemente vai ser o corpo. E quando você não tem uma marca, como você tem apenas Olá, vírgula, mundo, que só vai ser um texto cru que em última análise, é apresentada no ecrã. 

Agora, você vai notar também o recuo aqui. Você provavelmente pode-se inferir como estamos estilizando-lo. Toda vez que eu abrir uma tag, por assim dizer, eu recuar. E cada vez que eu fecho uma tag, eu un-indent, similares em espírito à chaves. E além disso, eu sou do tipo de usar meu julgamento. Observe que eu não me incomodei bater Digite dentro dessa tag título. Por quê? Bem, eu apenas decidi que parecia um pouco mais limpo para mim, o ser humano, apenas para não incomodar a fazer isso. Então, novamente, há alguns julgamento chama apenas como há em C ou qualquer outra linguagem. 

Mas note também que este recuo presta-se a um modelo mental, para não complicar mais isso. Mas uma árvore, certo? Se você pensar em uma web página, aparentemente escrito assim, como sendo bem recuado dessa forma, você quase pode pensar o suporte aberto HTML tag suporte fechado é demarcar a raiz de um nó, uma árvore da família nó de estilo no estilo das árvores olhamos para sexta-feira passada. 

E, de fato, temos à direita aqui o que vamos chamar DOM, D-O-M, um documento modelo de objeto, uma maneira elegante de dizer uma árvore que representa esse HTML. E observe que o HTML tem, vamos dizer, como uma árvore de família, dois filhos. À esquerda é a cabeça. À direita está o corpo. 

E assim como um exercício de pensamento irracional, cabeça, é claro, tem quantas crianças de acordo com esta estrutura? Assim, apenas um, title-- e é por isso que temos a seta que vai da cabeça ao título. Então, é como se essa pessoa no árvore de família tinha apenas um filho. E, em seguida próprio título pode ser dito de ter um filho também. 

Lembre-se que o HTML tinha Olá, vírgula, mundo abaixo dela. E eu simplesmente tirado ele dentro de uma oval em vez de apenas um retângulo para transmitir semanticamente que, embora é um nó da árvore, por assim dizer, é uma espécie de fundamentalmente diferente. Não é uma tag. Ou, mais propriamente, não é um elemento. É apenas um nó de texto, se você quiser. Mas estes são completamente convenções humanas arbitrárias. Este é apenas agora a minha maneira de representando o que eu vou como um agregado chamar o documento. 

E como um aparte, a coisa em o super canto superior esquerdo, suporte aberto ponto de exclamação doc tipo HTML, esta parece ser uma marca, mas é o caso canto estúpido onde que é apenas lá, copiado e colado para indicar os navegadores esta é a versão 5 do HTML. O mundo continua a mudar o que o primeira linha de código em uma página deve ser. Isto apenas significa que a versão 5. Por isso, não chega a parecido com os outros. 

Tudo bem, então, com que disse, agora você vai apreciar esta bastante este estúpido tatuagem alguém tem. 

[Risos] 

DAVID J MALAN: Tudo bem, e agora vamos realmente mergulho em fazer algo com isso. Você deve se lembrar que a última vez Eu abri o Appliance CS50 e eu fiz algo tão simples como abertura gedit. E eu salvo o arquivo, mesmo em meu desktop-- lugar nenhum especial-- como hello.html. 

Então deixe-me fazer isso novamente-- hello.html Enter. E agora, neste arquivo, eu vou vá em frente e replicar o que acabamos de doc saw-- tipo html Então eu vou fazer aberto html suporte de suporte fechado. E então eu vou preventivamente abrir e fechar a tag. Por quê? Só para eu não esquecer mais tarde. É apenas uma boa prática, como abertura e fechando chaves de uma vez. 

E então o que veio a seguir? Você pode pensar a tatuagem. 

AUDIÊNCIA: A cabeça. 

DAVID J MALAN: A cabeça. E então, aqui, eu tinha o título, eu acho. E o título foi arbitrariamente, Olá, título próximo mundo. E então para cá, o corpo, de course-- então fechar a tag body. E depois é só um pouco redundante, Eu tive a mesma coisa aqui em baixo. 

Então, eu afirmo que esta é uma página web. Isso é algo que agora podia viver na web, embora, é claro, é literalmente vivendo no meu desktop agora. Mas, na verdade, se eu minimizar gedit, Vou ver no meu desktop em seu ícone. Mesmo que este seja o aparelho, você pode fazer isso no Mac OS sem TextEdit ou Windows com o bloco de notas mesmo. 

E se eu ir em frente e dê um duplo clique que mesmo, e select-- bem, vamos Não selecione isso porque Chrome não está abrindo. Vamos em frente e abra o Chrome. E depois fazer Command-O para abrir E navegue até a área de trabalho e abrir esse arquivo. É assim que um navegador interpreta HTML, de cima para baixo, da esquerda para a direita. Ei, aqui está o navegador HTML. Aqui está a cabeça. Aqui é o título. Aqui está o corpo. E, de fato, é assim torna essa página web. 

Mas observe a URL. Nenhum de vocês pode puxar para cima este específico página em seus laptops agora, mesmo dentro de seu aparelho via que URL, porque file: // indica que é, na verdade, no meu sistema de arquivos, o meu disco rígido, não o seu. Então isso não é tudo o que útil. 

Vamos agora avançar para usando um servidor web real. E acontece que o CS50 Appliance é mais do que apenas um ambiente onde você pode escrever código C e compilar e executá-lo como se você estivesse fazendo. Também tem sido configurado pela equipe para representar um típico web servidor que está na internet, um que você pode pagar por ou um que está na chamada nuvem. 

E ele está correndo padrão livre de código aberto software, por exemplo, algo chamado de Apache, que é talvez ainda o mais popular da web software de servidor no mundo que milhares de sites usam hoje. E, ele também tem ainda software como o MySQL, que é um servidor de banco de dados que vai finalmente chegar a, que é só para dizer Eu posso começar a tratar meu aparelho como um servidor de pleno direito que eu não estou pagando para outro lugar. Ela só vive em meu próprio laptop para fins de desenvolvimento e de conveniência. 

Então, vamos em frente e tirar proveito desta. Eu estou indo para ir em frente e abrir uma janela de terminal. E eu estou indo para ir em frente e move-- na verdade, primeiro eu sou indo para navegar para a área de trabalho. Se eu fizer ls, há hello.html. E eu estou indo para ir em frente e começar a usar um novo diretório temos não utilizado antes de hoje. 

hello.html-- Vou mover para ../vhosts para hosts-- virtual mais sobre isso no future-- e depois em um diretório chamado localhost, que é o apelido dado a quase qualquer computador, seja ele um Mac, PC, ou Linux, e em seguida especificamente em um diretório que nós, o pessoal já criado para você quando você baixou o aparelho chamado público. E, como o próprio nome sugere, nada Eu coloquei nesta pasta, em teoria, vai ser agora público, pelo menos para as pessoas que têm uma relação directa conexão com o meu computador. 

Então, agora deixe-me ir em frente e fazer cd para esse mesmo diretório para que eu possa ver o que está acontecendo e digite ls. E, de fato, essa é a única coisa lá dentro. Eu afirmo agora que porque eu ter colocado este arquivar hello.html dentro de um diretório chamado dentro de um diretório público chamado localhost dentro de um diretório vhosts chamados, que graças ao pessoal CS50 foi pré-configurado para ser a raiz do seu servidor web, Eu posso agora espero fazer isso. 

Vou abrir uma nova aba. E eu estou indo para ir para não file: //. Eu vou usar real http / localhost, que mais uma vez, é o apelido para o meu próprio servidor. E então eu estou indo para ir para o nome do arquivo, só para ficar claro? Onde está esta história, provavelmente, vai? hello.html. 

Portanto, em outras palavras, eu quero agora esta é o meu próprio computador, o meu próprio aparelho, como se fosse um servidor real. Seu apelido é localhost. Mas pense como localhost como Facebook.com google.com, o que for. É apenas o meu nome local. E, em seguida, a final que eu quero é no raiz do disco rígido, por assim dizer, ou a raiz do servidor web, ergo a barra e, em seguida, o hello.html nome do arquivo. 

Deixe-me zoom e pressione Enter. E, de fato, existe agora a minha página web. Por isso, é um pouco diferente. E é tão assombroso. Esta é a versão antiga. Deixe-me encolher a fonte de volta. Este é o velho. Este é o novo. Mas o que está acontecendo fundamentalmente agora é que HTTP está sendo usado. 

Vamos fazer isso um pouco mais claro, ou, se você quiser, um pouco mais complicado. Deixe-me ir para o canto inferior direito canto do meu aparelho. E perceber que tudo isso tempo, tem havido um número. Esse é o endereço único do seu aparelho CS50. É um endereço privado, como implica a 172,16, que apenas significa que só você fisicamente pode acessar este servidor web. Tudo passa pelo firewall e bem protegido contra o resto do mundo por causa desta abordagem. 

E agora percebe que se eu for para Neste endereço, não no meu aparelho, mas no Mac OS-- eu vou para voltar para cá. Este é o meu Mac agora. E agora eu vou abrir esta versão do Chrome aqui. E eu estou indo para ir para http: //172.16.25 / E eu esqueço o rest-- 133. 

Então eu vou te visitar de meu Mac que o endereço IP /hello.html Enter. E agora eu vejo do meu Mac que o meu CS50 Appliance, que é Endereço IP é que número, é de fato se comportando como um servidor web na internet. Ele não tem um bom fácil se lembrar do nome como Facebook.com, mas ele está usando HTTP aparentemente, embora Chrome é uma espécie de simplificação do mundo para nós, mas não nos mostrando HTTP. Mas esta é realmente exatamente isso. Chrome é apenas poupar algum teclas digitadas nos dias de hoje. E é isso que vemos agora. 

Então, isso é muito bom e correto. Mas é uma página muito abaixo do esperado. Deixe-me entrar e fazer alguma coisa um pouco diferente agora. Então deixe-me voltar para gedit. E em vez de Olá, mundo, vamos colocar uma imagem. E eu reclamada antes-- deixe-me ir para o meu público diretório localhost. E deixe-me ir em frente e copiar um todo monte de arquivos a partir de hoje da minha pasta Dropbox em aqui. 

Agora, se eu digitar ls, olhar em todos esses arquivos que eu tenha distribuído pelo site do curso com antecedência de hoje, uma das quais é ainda hello.html. Portanto, não há que um. E recordar este bobo do último cat.jpg tempo--. Então deixe-me tentar incorporar cat.jpg dentro da minha página web. 

Eu estou indo para ir em frente e fazer cat.jpg, salvar. Deixe-me voltar para o Chrome. E deixe-me ampliar o fonte e agora recarregar. Opa, onde eu coloco isso? Standby-- eu ainda tenho o velho versão da minha aberto desktop. Então deixe-me ir para o meu vhost, meu localhost, o meu público, e hello.html. Então, agora deixe-me ir em frente e dizem cat.jpg interior do corpo onde eu quero que ele seja exibido e recarregar. Claro, isso não é correto. 

Então eu preciso dizer ao navegador um pouco mais deliberadamente o que eu quero que ele faça. Basta digitar o nome é obviamente não é suficiente. Então lembro que havia uma outra tag, imagem, img para breve. Isso é só porque os seres humanos não gosto das palavras cheias de tipos. E então o que podemos fazer source = "cat.jpg". 

E agora eu vou fazer uma coisa diferente aqui. Apesar de todos nossas marcas, até agora, tem tinha essa noção de um tag de início e uma tag final, que realmente não faz sentido de uma imagem, certo? Uma imagem pode existir ou não existe. E assim os seres humanos têm vindo com uma convenção simples. Quando você tem uma marca que pode tanto começar e terminar no mesmo tempo-- ele pode estar vazia, então a speak-- apenas colocar a barra dentro da tag no final. Agora deixe-me voltar para o meu browser. Hit Reload Porra, alguma coisa está errada. Você provavelmente já viu isso ocasionalmente na web, mesmo que não foi sua culpa. É culpa do servidor web. O que odes este parece indicar? É quebrado. É aí que a imagem pertence. Sim? 

AUDIÊNCIA: Mas isso não acontece ter acesso à imagem. 

DAVID J MALAN: Não faz ter acesso à imagem. Isso, ou, pior ainda, talvez ele nem sequer existe. Vamos ver se não podemos diagnosticar isso. Lembre-se da última vez que se no Chrome, no aparelho, ou até mesmo no seu Mac ou PC, você vai para o menu desenvolvedor e ir para as Ferramentas de Desenvolvimento opção, que, provavelmente, você tem não muito usado ou nunca. E se eu for fazer uma rede e recarregue a página, vamos realmente olhar para o HTTP solicitações que estão sendo feitas. 

Parece que é hello.html OK, na verdade, daqui a 200. Mas é um cat.jpg 403. Portanto, não é um 404. Ficheiro provavelmente existe. 403 significa proibido. Então, isso é um pouco confuso. Eu vou voltar a minha janela de terminal. Deixe-me aproximar-se aqui. E deixe-me fazer um ls. Há esses mesmos arquivos. 

Agora deixe-me fazer um ls-l, que você provavelmente utilizado antes de olhar para arquivo tamanhos talvez ou timestamps. E vemos um monte de informações esmagadora. Mas observe alguns detalhes. Aqui está hello.html neste remar aqui e aqui está cat.jpg. E isso é apenas o aparelho sendo user friendly, destacando JPEG em roxo como este. Mas o que mais é diferente ao lado o tamanho do arquivo eo nome do arquivo? 

AUDIÊNCIA: [inaudível]. DAVID J MALAN: Sim, não há dois a mais do até aqui R. Observe o que tem hello.html acontecendo. Assim, verifica-se que o nome de esse público diretório é importante. Qualquer coisa neste diretório pretende ser público. Mas não é suficiente só para soltar os arquivos lá. Você também precisa mudar o modo de os arquivos, alterar as permissões de o arquivo de forma pró-ativa não ser a configuração padrão, o que é que só posso ler e escrevê-lo, eu sendo o proprietário. Eu quero todo o mundo para todo mundo ser capaz de ler o meu arquivo, por assim dizer. Leia significa apenas visualizá-lo. 

E, de fato, como você verá no problema definir sete, que é o que significam estas de R. Média Estes dois de R deixar todo mundo o resto do mundo também lê-lo, especialmente agora que é neste diretório. Assim, a maneira mais simples de corrigir isso é ir para a minha rápida e fazer chmod para a mudança modo e, em seguida, fazer a + r, em conjunto, todos, todos, mais r para leitura, e depois cat.jpg Enter. Nada parece acontecer, o que normalmente significa uma coisa boa. Então ls-l novamente-- agora vamos olhar para cat.jpg. E essa permissão parecem ter mudado. Como um aparte, se você fizer uma erro e você, por exemplo, só fez your-- Eu não sabe-- ensaio acessível ao público por acidente, você pode fazer o oposto, chmod a-r. Embora, francamente, não deveria estar no diretório público de qualquer maneira, se essa é a preocupação. 

Então agora vamos voltar para meu navegador e reload. E eu vou clique o pequeno Ghostbusters símbolo para limpar a parte do tela para que possamos ver novas solicitações. E, de fato, é aqui Cat Grump de antes. Mas, mais importante, tecnicamente, não há o número 200, que significa que chegamos OK. Tudo bem, o que é muito bom e correto. Mas nós não estamos fazendo o melhor de websites, nem vamos tentar demasiado duro para tornar o mais extravagante dos sites hoje. Mas vamos pelo menos fazer algo Super familiarizado antes de chocalho fora algumas outras tags. Então suponho que eu não quero apenas um gato aqui. Suponha que eu realmente quero que isso gato para conectar-se a alguma coisa. 

Eu poderia, por exemplo, fazer algo assim. uma para href âncora para hiper equals-- referência e vamos fazer alguma coisa como www.google.com perto citar próximo suporte. E agora procurar gatos. Fechar âncora tag. Portanto, este tem apenas um tipo de fundamentalmente novo detalhe. A etiqueta é claro, é diferente. É o nome de uma âncora para referência href ou hiper. 

Mas, mais importante, não há esta função sintática aqui. Isto é o que nós vamos começar a chamar não uma marca, mas um atributo. E um atributo é algo que modifica o comportamento de uma etiqueta. E esse atributo, href, meios modificar o comportamento desta âncora para que, quando ele for clicado, ele vai para este URL aqui. E, claro, que URL é o Google. 

Enquanto isso, o que é isso texto aqui vai ser? Bem, isso vai ser que o ser humano realmente vê como o sublinhado link, tão simples como isso. Então, vamos tentar isso. Deixe-me salvá-lo. Eu ainda estou em hello.html. Mas, nas versões on-line, você verá os nomes de arquivos reais que pré-preparados. Deixe-me ir em frente e recarregar. E agora é muito página decepcionante ainda. Mas se eu passar o mouse sobre há-- e é um pouco pequeno, mas- você pode ver na parte inferior canto esquerdo da tela, ele é de fato indo para google.com. E se eu clicar em que, será bata me caminho para a real Google. 

Mas note aqui uma oportunidade para exploração, assim como um aparte. E nós vamos voltar para outra questões de segurança antes do tempo. Porque não há essa dicotomia entre onde você vai eo que você diz, você poderia fazer algo assim isto-- http://www.google.com. OK, e agora se eu recarregar depois de salvar essa página, parece que eu estou indo para ir para o Google. Mas não há nenhuma razão que eu tem que ir ao Google, certo? Eu poderia realmente ir para algo como badguy.com, recarregue a página aqui. E notem, ele ainda se parece com o Google. E só se eu estiver afiada o suficiente para passar o mouse sobre aqui vejo que está mesmo indo para ir para um local diferente. 

Então, se você já ganhou um e-mail, especialmente um do Paypal, ou aparentemente do Paypal pedindo que você faça login para a sua conta, este É por isso que você nunca deve nunca clicar em links em e-mails, francamente, todos os links em e-mails. Se você sabe que tem real dinheiro no Paypal ou Banco da América ou Fidelity ou em qualquer site, digite-o manualmente no. Porque veja como é fácil enganar alguém para apresentar o que se parece com um link. Mas, na verdade, poderia ir absolutamente em qualquer lugar. 

E há muito mais ameaças do que isso. Na verdade, isso é um pouco de uma tangente agora, mas uma dos melhores que eu já vi que já foi fechado, é alguém levou as pessoas a-- então isso pode dizer, clique aqui para fazer login em sua conta, uma conta bancária. E este foi o banco do oeste. 

Então, alguém comprou isso. E é um pouco mais fácil de ver lo em uma fonte mono espaçadas ampliada no em um projetor de 30 pés. Mas quando é pequena fonte em um e-mail que você está recebendo, isto parece bankofthewest.com, não bankofthevvest.com, que alguém tinha pago US $ 10 para comprar. E então, o que levou-os para o equivalente a algum site mal. 

E você vai ver demasiado-- realmente podemos fazer isto-- se eu ir para o site real, bankofthewest.com, novamente, recordação da última vez que, se esta é a sua página web e você está curioso para saber como ele funciona, certamente você pode ir para Ferramentas de desenvolvedor do Chrome. E você pode ver toda a HTML bem formatado lá. 

Mas, mais ao ponto, você cam-- vamos fechar isto-- você pode ir para Visualizar Desenvolvedor View Source. Por que não posso simplesmente copiar tudo isso e então eu pode entrar em minha janela pouco gedit aqui e fazer minha própria página web. Salve esta em hello.html. E, provavelmente, isso vai quebrar, porque não é tão fácil normalmente. Mas agora, se eu recarregar minha própria página no minha própria CS50 Appliance e recarga bater, OK, algumas coisas quebrou. Mas eu estou muito perto de ter o meu próprio site bancário, certo? Tudo isto HTML-- 

[Risos] 

DAVID J MALAN: --Eu não actually-- e você sei que há alguém lá fora que seria, na verdade, clique nestes links também. Então, claramente, algumas coisas quebrou. Mas isso vai levar nos a uma discussão, desnecessariamente agora, quanto ao que CSS, folhas de estilo em cascata, são, e como você realmente baixar outros arquivos HTML e JPEG arquivos GIF que o site pode estar usando. Mas tudo isso é realizável. Mas realmente se resume a estes heurística muito simples. 

Então, agora vamos percorrer um par de outros exemplos de HTML só para lhe dar um sentido o que mais você pode fazer. Por exemplo, este é list.html. Suponha que eu queria fazer uma página da Web com uma lista de casas no quad. Eu poderia usar a tag ul para não ordenada lista e, em seguida, a criança item da lista e depois iterar over-- ou lista, rather-- as casas em questão. 

E se eu abrir isto, vamos fazer isso. Vamos não hello.html, mas para list.html. Caramba. Como faço para corrigir isso? É o mesmo problema de antes, certo? Então deixe-me fazer oops-- chmod-- chmod a + r de list.html. E agora, se eu voltar para o meu navegador e clique em Recarregar, lá está ele. Então, se você sempre quis fazer uma lista com marcadores, você pode fazer isso. Se você quer ser super chique e fazer uma lista ordenada, não uma lista não ordenada, mudar aqueles para ol, recarregue a página e Agora o navegador irá numerar isso por você. 

O que mais podemos fazer? Bem, um par de outros- se você tem longos parágrafos de texto-- por exemplo, alguns Texto em latim como isto-- e você quer que em alíneas separadas, aberto p, p perto da marca de parágrafo. E fazê-lo novamente e novamente. E se eu agora abrir este arquivo, paragraphs.html, bem, este está ficando chato. Então, agora vamos voltar para o meu alerta, chmod a r r estrelas + .html-- um bom curinga pouco por assim dizer. Deve corrigir todos estes problemas para mim. Vamos recarregar. Há três parágrafos. 

E agora vamos em frente e abrir um outro. Como sobre a mesa? Você vai notar olhares de mesa um pouco mais complexo. Mas é o mesmo idea-- tag aberta, tag aberta, aberto, aberto, aberto, perto tag, tag aberta. E estes acontecem em repouso por tabela, cuja fronteira é aparentemente vai ser uma espessura 1-- o que quer que linha da tabela means--, mesa dados, o que significa uma célula. E se eu voltar para o meu navegador aqui e ir para table.html, você pode ver algo assim, hediondo. Mas nós vamos chegar ao ponto onde podemos realmente tornar as coisas mais bonitas do que isso. 

Então deixe-me estipular por enquanto. Há grupos de mais tags. E HTML é maravilhoso para pegar porque, francamente, tudo o que você precisa fazer é olhar para as páginas da web existentes com o qual você está familiarizado. E você é como, oh, é assim que eles fizeram isso esteticamente. 

Ou você pode procurar qualquer linha de recursos a respeito de como funciona HTML, e você verá que há uma todo o vocabulário de outras tags. Mas com o modelo mental simples só que quase qualquer marca que você abrir tem de ser fechado, ele realmente é suficiente para ensinar a si mesmo HTML depois de entender estas idéias básicas de marcas e atributos ea boa formação que nós já conversamos sobre, nada de fechar para que possamos abrir para que não confunda um browser. Então, vamos agora dar isso para um nível mais interessante indo para o real. E vamos para o meu Mac aqui, para google.com. E agora notice-- vamos fazer isso. Estou gongo para ir para Configurações, Configurações de pesquisa. Quero desativar esse instante irritante Resultados coisa onde se imediatamente começa respondendo a sua digitação. Vamos fazer isso de modo mais velha escola nós realmente ver o que está acontecendo. 

Então, eu estou indo para salvar a minha Configurações do Google aqui. E agora notice-- eu vou procurar algo como gatos. E ele ainda está fazendo auto completa aqui, mas com base em coisas pessoas digitou no passado. Mas observe o que vai acontecer. 

Na URL no momento é isso, apenas google.com. E tecnicamente, é barra. Google acaba de salvar um personagem e não nos que mostrar. Eles estão nos mostrando https, apenas ser super reconfortante de que estamos em uma página segura ou criptografados. 

Então deixe-me ir em frente e procurar gatos. Agora isso ficou muito esmagadora rapidamente. Olhe o tamanho desta URL. Mas verifica-se que a maioria deste material na URL é realmente bastante inútil. Vou começar a apagar coisas que eu não entendo. Eu vejo gatos. Eu entendo gatos. Eu não sei por que os gatos estão lá novamente. Eu realmente não sei o que esse absurdo é. Então, eu estou indo só para manter destacando e exclusão de material que eu não entendo, destilando o URL em apenas isso. 

Agora deixe-me se inserir novamente. Parece que o Google ainda trabalha. Então, por algum motivo, eles estão adicionando um monte de coisas para por padrão do seu URL. Mas não é estritamente necessário. Então, o que é bom sobre isso? Bem, deixe-me ir em frente e abrir Inspector do Chrome. Há um pouco de atalho do mouse para isso. 

Vá até a aba Rede. E agora deixe-me recarregar desta página mais uma vez. E eu estou me segurando Shift. Como um aparte, navegadores tendem a armazenar em cache ou salvar informações apenas por causa da eficiência. Mas, normalmente, segurando a tecla Shift e recarga vai obrigar tudo que começar de novo desde o início. E é isso que eu quero fazer aqui. 

E observe todos estes linhas que apenas apareceram. Acontece que em qualquer web página, pode haver apenas um arquivo involved-- hello.html-- ou não 52 pode ser, como no presente caso. Quando eu visitar google.com, Aparentemente, o meu navegador arranca 52 solicitações HTTP separadas. Por que é que? 

Bem, olhe para o que está dentro deste top web page up. Não há apenas texto, mas não há imagens reais de gatos mais para a direita. Há um logotipo colorido aqui em cima à esquerda. Há todos esses ícones por um microfone e assim por diante. Há um monte de peças, construindo blocos, peças scratch, se quiserem, a esta página web. E o que o navegador está fazendo em cima ficando o primeiro arquivo, que É esta linha aqui, é essencialmente iteração sobre o topo HTML para baixo, da esquerda para a direita, procurando coisas como tags de imagem ou de outras marcas que estão mencionando outros arquivos e quando se vê, vai e busca-los via HTTP, toda viável metáfora envelope, e, em seguida, exibe-os na local apropriado na página da web. 

Mas note aqui se concentrar em os primeiros gatos lance, busca, perceber que, na verdade, ele está usando HTTP 1.1. E, infelizmente, o Google Chrome agora na versão 39 é o tipo de coisas emburrecimento e não nos mostrando os cabeçalhos reais. Mas o que foi de fato enviado é uma solicitação para não cortar, mas / search? q = gatos. 

Agora, por que isso é importante? Bem, eu estou indo para inferir daí que se você Google suporta as consultas deste tipo, por que eu não implementar a minha própria pesquisa motor para CS50, mas apenas a parte dianteira final, apenas a interface gráfica do usuário. E nós vamos terceirizar o back-end, a busca real resulta para o Google. 

Então, como posso fazer isso? Bem, deixe-me ir para gedit aqui. E deixe-me ir em frente e abrir até, digamos, um novo arquivo. E eu estou indo para salvar esta temporariamente como busca-0.html. E então, finalmente, vamos rápido frente ao que eu pré-preparados. 

E eu vou rapidamente chicote tipo doc html suporte aberto html perto html suporte. Então eu vou fazer a cabeça perto cabeça título aberto CS50 Pesquisar em vez de pesquisa do Google. Aqui em baixo eu vou ter o corpo, aqui perto do corpo. E agora eu preciso CS50 Search. E, na verdade, vamos construir esta forma incremental. Eu estou indo para ir em frente e fechar esta e realmente colocá-lo em meu diretório público. Então me dê apenas um momento. busca-0.html-- eu vou temporalmente chamá-lo search.html. Vou chmod um search.html + r. E agora eu vou abri-lo. Tudo bem, de modo que foi rápido. Mas o objectivo era simplesmente para nos levar ao ponto de ter este texto arquivo chamado search.html. Portanto, não há muito para olhar ainda. Na verdade, se eu for para o meu navegador, e ir para search.html, isso é tudo o que é. Mas você sabe o quê? Eu posso ser um pouco amador. Eu li em um livro que há uma rubrica denominada tag h1. E eu estou indo para ir em frente e usar que h1 abrir e fechar h1. Atualizar a página. E agora é a maior e mais ousado, nem tudo o que interessante, mas pelo menos estruturalmente mais interessante. Mas agora deixe-me apresentar uma outra tag. Acontece lá fora é uma tag de formulário. E deixe-me fechar a tag. E verifica-se que há uma marca de entrada que tem um atributo chamado tipo, que é do tipo de campo de dados, se você quiser. E vai ser do tipo texto. E seu valor vai ser CS50 Search. Fechar tag. E não vai ser nenhuma noção de abrindo e fechando com marcas separadas. 

Deixe-me voltar para cá e ver o que está acontecendo, recarregar. Ficando interessante. Parece que é um campo de texto. E na verdade, eu não queria colocar um valor lá ainda. Deixe-me voltar aqui e realmente começar livrar desse valor para mantê-lo simples. Em vez de um valor, o que eu queria para dar essa coisa era um nome. E eu não sei o que é, então eu vou voltar a isso. 

Mas abaixo disso, eu quero fazer input type = submeter. E este valor será CS50 Search. E vamos ver porque eu mudou-se o valor para este. Quando eu recarregar, eu pareço ter agora os primórdios de minha própria pesquisa motor, super hediondo, embora, francamente, é não um arremesso longe do que Página padrão do Google parece. 

Se eu ir aqui e agora, eu posso digitar gatos e esperamos clique em Pesquisar. Mas eu não estou bem feito ainda, porque eu não implementaram, obviamente, um banco de dados. Eu não arrastou o web para resultados de pesquisa. Então eu preciso terceirizar que para o Google. Então, como posso fazer isso? 

Bem, primeiro de tudo eu precisa adicionar e ação atribuir a minha forma de tag que é http://www.google.com/search. E eu sei que só de ter inferida pelo olhar de perto em sua URL. E agora dar um palpite. O que deve este campo de texto provavelmente ser chamado, a partir de onde nós viemos de antes? 

AUDIÊNCIA:? Q. 

DAVID J MALAN: q. E nós realmente não precisa pergunta marcá-lo sair, mas q é realmente isso, q para consulta provavelmente por padrão, apenas porque isso é o que Larry e Sergey veio com anos atrás. Então, agora deixe-me recarregue esta página. Não parece tão diferente. Mas agora veja o que acontece. 

Se eu digitar em gatos e clique CS50 busca e deixar ir, perceber eu me levado longe de real Google. Agora, o Google está sendo um pouco irritante em que eles são anexando um parâmetro adicional, se você, ao URL. É tudo o que está acontecendo automaticamente no lado do Google. 

A parte importante é que eu pareço ter gerado esta solicitação aqui. E, de fato, é isso que acontece. Quando você tem HTML que se parece com isso, este é uma espécie de desenvolvedores web notação por dizer, vá em frente e criar um formulário que quando ele é submetido, ele está indo para ir para este URL. E quando a URL tem proporcionado valores para coisas como q, não vão apenas para este URL. Na verdade, vá para a questão marca e então q = gatos. Acrescente o parâmetro, o Parâmetro HTTP assim. 

E só para ser super precisa, o que está sendo inferida aqui- mas eu vou ser mais explicit-- é que o método que deseja usar é obter, em vez de algo como post, que vamos finalmente ver. Assim, em breve, simplesmente pela compreensão HTML e usando algumas tags bastante simples, agora podemos começar a criar nosso próprio usuário final frente de interface com uma pesquisa motor por trás dele. 

Mas isso, claro, é bastante hediondo. Então deixe-me realmente abrir uma versão um pouco melhor. Isso é o que eu preparado em avançar que tem alguns comentários. Mas você vai ver que eu praticamente recriou. Portanto, este já está disponível online. E eu fiz acontecer com preventivamente ir para https apenas para mantê-lo simples. 

E agora vamos abrir um próxima iteração deste. É a versão 1 em vez de 0. O que salta à vista como pouco diferente neste exemplo? 

AUDIÊNCIA: [inaudível]. 

Sim, não há este centro align texto. Isto é um pouco estranho por aqui. Mas esta é realmente novo. E talvez adivinhar o que vai acontecer. Se eu ir para o meu navegador agora e visitar busca-1.html, é quase a mesma coisa. Mas é um passo mais perto de sendo um pouco mais bonita. Ainda é feio, mas mais bonita em que pelo menos, tudo está agora centrado. 

Assim, verifica-se que o que eu estou usando é uma outra língua completamente chamada CSS, folhas de estilo em cascata. E CSS, francamente, é uma espécie de, na minha opinião pessoal, uma linguagem atrozmente projetado. É muito chato para lembrar todos os vários detalhes. Mas é o que estiliza a toda web em todo o mundo hoje. Eu ofendi alguém. Tudo certo. Então, vamos voltar aqui e ver como estamos realmente usando isso. E ao que parece, pelo menos é na verdade, uma linguagem muito simples. É apenas pares de valores-chave, propriedades e valores, propriedades e valores. Na verdade, aqui é um tal propriedade e valor. 

Simplesmente usando o estilo atributo na minha tag corpo e dando-lhe um valor de um cólon palavra e outra palavra, ou uma propriedade e um valor, I pode afetar a estética da página web, não necessariamente da estrutura, no entanto, mas a estética do mesmo. E só por pesquisando por aí, eu percebo que as folhas de CSS, de estilo em cascata, suporta uma propriedade chamada text-align, cujo valor pode ser a esquerda, direita ou centro, por exemplo. 

Então agora quando eu recarregar Nesta página, o que eu consegui era uma página centrada, mas ainda bem feio. Vamos ir em frente e abrir até a versão 2 da Pesquisa. E agora percebe que fiz um pouco mais. Repare que até aqui dentro da cabeça tag, pode haver mais do que título. Na verdade, há uma marca de estilo. E é aí que ele só fica um pouco vendo CSS confuso às vezes. 

Observe que me parece ter algo que estruturalmente parece muito diferente. Mas aqui é o nome a tag Eu quero estilizado. Aqui estão os nossos velhos amigos crespos cintas e chaveta fechado. E então aqui é que propriedade e seu valor. 

Se eu carregar este arquivo, search2.html, o resultado final é idêntico. Mas é um passo em direção a uma melhor concepção. Ao fatorar o presente CSS, eu tenho não misturado com o meu HTML. E, de fato, como veremos, eu poderia reutilizar essas propriedades e valores. Se eu quisesse fazer cachos de partes da minha página web centrada, Eu não tenho que digitar style = text-align centro de todo o lugar. Eu posso colocar em um só lugar Talvez, como no topo. 

Mas mesmo isso não é o melhor design. Na verdade, uma das coisas que você vai aprender como você gastar mais e mais tempo com programação web é que quanto mais você puder modularizar coisas e fator de coisas como arquivos .h nós vamos fator material para fora, gosto helpers.c deixar-nos as coisas fator algumas Série de Exercícios atrás. Da mesma forma, poderíamos quer conseguir isso. 

Então, observe na versão três de search.html tenho limpa a cabeça de a página e basta colocar nesta, uma tag link, que contrariamente ao nome, não lhe dá um hiperlink. Ela liga para outro arquivo por meio de um href cujo valor, neste caso, é busca-3.css Então eu percebo que nós estamos indo rapidamente. Mas tudo que eu estou fazendo é uma espécie de mover as coisas. Deixe-me aberto busca-3.css. Não é, nada realmente a ele. Eu apenas copiei e colei em um novo arquivo, assim como nós consignado material para fora em outros arquivos antes. E o result-- completamente underwhelming-- vai ser exatamente o mesmo. Mas estamos nos movendo toward-- não, não é. Oh, eu sei o porquê. 

Assim, parece ser um bug. E é em algum sentido. Mas deixe-me abrir o meu guia Rede. Deixe-me recarregar a página. Ah, por que o CSS não sendo aplicado? Bem, o arquivo CSS, da mesma forma, tem para ser legível, por assim dizer. E isso também está proibido. Então deixe-me fazer um chmod a + r da estrela dot CSS-- whoops-- estamos CSS ponto é apenas o extensão de arquivo para arquivos CSS. Agora deixe-me voltar para meu navegador e reload. OK, um pouco melhor. 

Agora deixe-me fazer uma última coisa. Em busca-4.html. Eu tenho uma versão que eu só pensava era bem mais legal, ainda que forma mais complicada. Vejamos o resultado primeiro. Fechar esta para nos dar mais espaço. Altere isso para procurar-4, Enter. 

E agora um monte de coisas estão quebrados. Eu vou voltar em meu diretório aqui. E agora eu estou indo só para fazer um chmod de um + r em um file-- porque eu sei que exists-- chamado logo.gif, que é uma imagem. E agora recarregar. E wow-- então agora eu sou bem perto, francamente, gostar da versão de 1999 do Google, e francamente, a versão 2014 do Google, certo? 

Por isso, agora vai para o seu site, em última instância, se eu procurar gatos. E de fato é. Mas o que eu faria diferente nesta versão 4? Portanto, não vamos alongar muito sobre isso aqui. Você verá isso em problema definir sete eventualmente. Mas repare que eu fiz algumas coisas. 

Eu apresentei uma div tag, que é a divisão, semelhante em espírito a um tag de parágrafo. Mas a divisão é igual, é aqui uma região rectangular invisível da tela. Vamos dar-lhe uma única identificador, um rodapé, apenas para que possamos falar sobre -lo noutro local no nosso HTML. Aqui está outra div da página cujo ID vai ser o conteúdo. É o conteúdo da página. E aqui é o cabeçalho da página. 

Em outras palavras, eu tenho essencialmente em HTML sou mentalmente vendo esta página da web como três componentes, um cabeçalho até aqui com este retângulo invisível, o conteúdo no meio, e, em seguida o rodapé abaixo, mesmo embora nós não vemos essas coisas. Porque eu quero na minha cabeça de página aqui, ou em um arquivo .css, Eu posso usar essa sintaxe. 

Header não é uma tag. É uma ID para que ele se transforma que fazendo #header, Agora eu posso aplicar uma ou mais Propriedades para o cabeçalho. Eu posso fazer o mesmo conteúdo, o mesmo para o conteúdo aqui. 

Assim, por exemplo, no rodapé, o aviso prévio todas estas propriedades estou adicionando. E eu sei que eles existem apenas pela leitura se sobre a documentação para CSS. Tamanho da fonte vai ser smaller-- de modo algum o tamanho da fonte relativa. O peso vai ser ousado. Margin-- quantos pixels em torno ele-- é de 20 pixels. E isso vai ser centrado. 

Mas agora, a página se parece com isso. Se eu não estiver satisfeito com minha cópia lá, Eu poderia fazer algo parecido com a cor vermelha. E então eu posso guardar este, reload, e agora eu tenho estilizado rodapé. Portanto, esta é apenas insinuando o poder do que você pode fazer em uma página da web para mudar as coisas ao redor. 

E ainda mais frio do que isso, se você quiser para bisbilhotar sites reais, você não pode mudá-los permanentemente. Mas se eu abrir Inspector do Chrome novamente e eu não vá para o lado esquerdo aqui, o que mostra HTML do Facebook, mas mostra à direita lado todo o seu CSS, você pode e mudar as coisas na mosca. Então deixe-me ir em frente e fazer isso. 

Deixe-me ir em frente e controle clique sobre esta palavra aleatória aqui, assinar e clique em Inspect Element. Chrome salta muito convenientemente para a tag h1 que o Facebook está usando. E observe aqui Facebook tem tipo de preguiçosamente codificado tamanho da fonte como uma propriedade aqui. 

Então, o legal é que que se eu realmente entrar aqui e dizer, oh, Facebook, eu não gosto que 64 pixels, podemos agora alterar Facebook. Claro, estamos apenas mudando-o para mim, pessoalmente, no momento. Mas este é apenas mais um ferramenta em nosso kit de ferramentas que vai nos permitir ajustar e descobrir e também diagnosticar questões em nossas próprias páginas web. E nós poderíamos ir da mesma forma ao longo do aqui, que é a mesma coisa. Se você realmente quiser começar a fantasia, eu Quer dizer, agora você pode realmente transformar a página e fazer coisas malucas. 

Então, por que tudo isso é útil? Bem, em última análise, estamos vai querer ser capaz de criar páginas web que são movidos por nossos próprios fins de volta, não apenas por Google e terceirização de back-end lá. Nós, na verdade, quer o valor, por exemplo, da ação de nosso motor de pesquisa atribuir a ir não para outra pessoa, mas para algo como search.php, onde search.php é em nosso próprio servidor, não no de outra pessoa. 

E assim, para chegar lá, nós realmente necessidade de introduzir uma nova língua. Então nós já olhou para um novo linguagem aqui, ou dois realmente, HTML e CSS. Mas eles realmente são apenas linguagens estruturais e estéticas. Eles não estão programando línguas per se. E isso é tanto formais tempo que vamos gastar com eles. Porque nós vamos começar agora a transição para o PHP. 

Então PHP é uma real linguagem de programação. É uma linguagem de script no sentido de que é pretende ser mais leve do que algo como C. E é uma linguagem interpretada, o que significa que ele não está compilado. Assim, em poucas palavras, o que significava quando usamos uma linguagem como C e tivemos que compilá-lo? O que significa para compilar o código fonte C? AUDIÊNCIA: [inaudível]. DAVID J MALAN: Diga isso de novo? AUDIÊNCIA: [inaudível]. DAVID J MALAN: Perfeito. Ele transforma-lo em binário. Ele transforma em zeros e uns a partir do código fonte Inglês-like real. E então nós podemos realmente executar esses zeros e uns passando-os através do CPU com um duplo clique em um ícone ou executar um comando. 

PHP e Python e Ruby e Perl e JavaScript e cachos de outro línguas são interpretadas línguas, o que quer dizer você não compilá-los. Em vez disso, você alimentá-los como entrada para um programa chamado um intérprete. E isso intérprete, que alguém escreveu, lê o código fonte superior para baixo, esquerda para a direita e apenas interpreta essas linhas e faz o que você diz. 

Então, se você encontrar um linha que diz impressão, isso não significa necessariamente converter impressão para os zeros e uns correspondentes. Ele só tem esse intérprete como um grande se a condição que diz: se a instrução do programador é de impressão, em seguida, faça o seguinte. Por isso, interpreta-o apenas por tipo de raciocínio através do que você está dizendo que ele faça. 

E PHP é uma das línguas. E PHP anos atrás foi projetado precisamente para programação web. E foi inicialmente um linguagem confusa muito desleixado. E, de fato, há uma enorme quantidade de código PHP ruim lá fora. Mas a própria linguagem amadureceu ao longo dos anos, tanto que agora é na verdade, um maravilhoso próximo passo pedagogicamente de C, porque é tão enervante familiar para tudo você acabou de ver nas últimas semanas. 

A única diferença inicial veremos é que não há função principal mais. Quando você começar a escrever código, é só vai ser executado, não importa o quê, como veremos em um momento. Enquanto isso, aqui está o que um variável parece em PHP. É um pouco diferente, mas apenas mal. 

Em PHP, não há tipificação forte. Há semanas digitação, que apenas significa que não são tipos de dados como cordas e números e outras coisas. Mas você não se incomoda especificando o que eles são mais. PHP figuras-lo para você. O sinal de dólar é apenas uma decisão que o povo fez PHP anos atrás de tal forma que qualquer variável em PHP apenas começa com um sinal de dólar. É realmente tipo de útil em que ele salta em você um pouco mais. 

Mas depois disso, este é uma condição em PHP. O que é diferente em relação C? Truque question-- nada, que é realmente muito bom. As expressões booleanas em PHP-- o mesmo. As expressões booleanas com e contra ou, interruptores, loops, loops, loops-- OK, este é diferente. 

Assim, verifica-aí é um par de outros recursos do PHP. Um deles é realmente isso, que é maravilhosamente conveniente. Se $ números é uma matriz que você tem declarados previamente em um programa, você tem essa fantasia para cada construto que em vez de fazer tudo isso irritante I é igual a 0, I é menos do que isso, [? I ++?], para cada um dos números como o número, onde cada desses valores sinal de dólar é apenas uma variável, e esta última você pode pensar como I. Você poderia chamá-lo de qualquer coisa que você quiser. Chamei-a de número. Isso vai iterar a matriz de números de chamada. E em cada iteração, é vai atualizar automaticamente para você o número cifrão variável para que você constantemente ter acesso à variável que você deseja sem ter que fazer qualquer colchete notação ou a indexação em uma matriz. 

Além disso, ainda temos coisas como matrizes, que parecem quase o mesmo, exceto que é muito comum, como veremos ver, tanto em PHP e JavaScript para pré inicializar uma matriz usando colchetes. C usa chaves. Por isso, é um pouco diferente, embora nós realmente não usar esse truque muito. 

Mas ainda mais poderosa, PHP tem matrizes associativas, que é uma maneira extravagante de dizer tabelas de hash. Na verdade, se você quiser declarar um hash mesa em PHP, ao contrário de C-- quantos linhas de código demorou para realmente implementar uma tabela hash em C? Ou quantas linhas de código é tomando para implementar uma tabela hash em C? Por isso, é provavelmente muito, certo? É uma dúzia, talvez 100 ou 200. É trivial. Ou ele está prestes a ser, como em breve você vai ver, não trivial para implementar uma tabela hash [Inaudível] e também uma tentativa. Mas em PHP-- e, francamente, eu provavelmente não deveria dizer isso até Monday-- em PHP, se você quer uma mesa, feito. Isso é um hash mesa-- assim com uma linha de código. E 

Um monte de línguas fazer isso. Divirta-se com pset cinco. Então, um monte de línguas fazer isso. Eles dão-lhe essas abstrações que outras pessoas, outros programadores, criamos para você, de modo que você pode estar em seus ombros e começar a usar as idéias que são super convincente, como tabelas de hash e árvores e tenta. Mas você não tem que necessariamente implementar essas coisas você mesmo. 

E assim, em última análise, o que vamos usar o PHP para é potencialmente escrever programas da linha de comando chamada. Poderíamos recriar cada programa nós escrevemos neste semestre, até agora, exceto, talvez, Breakout, que utiliza SPL, o qual é específico para C no momento. Mas todos os outros problemas definir, certamente Mario e César e Vigenere e [? Crack?] E para a frente, nós poderia re-implementar em PHP, e provavelmente um pouco mais facilmente. 

Mas o que nós estamos indo em última análise, usar o PHP para programação web é. E vamos introduzir próxima semana um modelo mental, um paradigma chamado MVC, controlador de vista do modelo, que se você tiver feito a programação antes em Python ou Ruby ou em outro lugar, você poderia saber dessa equipe com Rails e Django e afins. Mas se você é novo para isso também, você verá que este é realmente um muito natural extensão da fatoração e do tipo de projeto de código que nós temos feito em C. Nós vamos agora aplicar algumas dessas lições para PHP de modo que, em última análise, estamos implementar os nossos próprios sites. E se você é uma espécie de hipnotizado ou espantado que nós vamos fazer todo o tão rapidamente, perceber que quase todos os semestre, cerca de 90% de estudantes CS50, incluindo os quem nunca programou antes, acabam fazendo projetos finais que são baseados em programação web. E assim você vai ver que os retornos são altos nas semanas que virão. Então, vamos vê-lo em seguida, na segunda-feira. 

COLUNA 1: E agora, o Deep Pensamentos por Daven Farnham. As tabelas de hash. 

[Risos]