[Música tocando] 

DAVID MALAN J: Este é CS50 e este é o início da semana 7. Então, bem-vindo de volta. E você deve se lembrar que no conjunto de problemas quatro, houve um pouco de uma caçada para alguns fabulosos prémios pelo qual depois de recuperar as fotos de equipe, tanto aqui como em New Haven, você foram desafiados a encontrar o maior número de esses cientistas da computação como você poderia. E nós temos um todo bando de submissões. Pensei que iria partilhar algumas com vocês aqui hoje. 

E nós vamos deixar tudo isso online. Mas, em particular, eu queria chamar a sua atenção a-- bem um, Sam estava em muito poucos deles geralmente posando como este. Mas parece que a partir de esta manhã, o vencedor foi um certo alguém chamado Ken com 24 da equipe capturado na câmera ou um pouco mais quando você levar em conta vários funcionários nas fotos. Retratado aqui é Ken próxima a Maria em New Haven. 

Agora, Ken, porém, transforma fora é um pouco de um caso de canto que ainda não aconteceu antes. Acontece que isso não ocorreu para me colocar em letras miúdas problema definir quatro que diz que os funcionários são inelegíveis para os prémios fabulosos porque Ken é, evidentemente, uma das os fotógrafos em nossa equipe. Agora, com o que disse, ele originalmente escreveu-me a dizer por favor, não postar estas fotos online. Eu acho que em grande parte porque a maioria das fotos que este fotógrafo tirou olhar um pouco algo como isto. E similar. 

Mas Ken gostaria de me tranquilizá-lo que ele é um bom fotógrafo, Ele é um profissional, ele leva fotos que não são borradas, que são melhores em foco, e ele levou alguns de nossos próprios funcionários. Mas ao invés de reconhecer única Ken, o que nós pensamos em fazer é percorrer a lista de alunos reais que apresentaram. E verifica-se que Lance com 15 fotos a partir desta manhã foi o nosso vencedor. 

E é aqui retratado com Lance Colton, com Skaz, comigo mesmo, e com Sam. Mas, em seguida, verifica-se que a partir de 11:46, por isso apenas um pouco atrás, Eu voltei para o meu e-mail e encontrado que teve ainda mais uma apresentação por um estudante chamado Bonnie cujo e-mail disse que somente isso. Não vamos mentir, eu sou fazendo isso durante a aula. E então começou a anexar apenas 14 fotos, um tímido de Lance de 15. 

Mas, em fotos de Bonnie, verifica-se out foram vários membros da equipe, Sam entre eles, então o que nós pensamos que nós gostaria de fazer é reconhecer ambos. Assim, além de obter o Dropbox espaço que todos que participaram recebe, essas duas seções também irá receber um bom almoço servidos por eles e sua seção acasala esta semana que vem. E assim que você vai ouvir de nós, Lance e Bonnie, sobre isso. Tão grande parabéns para eles. Agora, aqueles de vocês que faria como o almoço de modo mais geral sabe que o almoço CS50 em Cambridge e New Haven é nesta sexta-feira. Ir para o site da barra de RSVP CS50. E agora uma palavra sobre os seminários. Mais curricularly. Então, nós estamos aproximando o ponto do semestre onde você deve começar pensando sobre projetos finais. E, de fato, em apenas um pouco, vai os chamados propostas pré ser devido. Assim pré propostas destinam-se a ser muito baixo impacto e realmente apenas uma oportunidade para você compor uma nota curta seu companheiro de ensino para informar ele ou ela o que você está pensando que você pode querer fazer para o seu projeto final. 

Agora, muitos estudantes acabam fazendo web baseada projetos finais. E, claro, nós somos apenas Agora, na semana passada nesta e além de mergulhar em programação web. Então não se preocupe se você não tenho absolutamente nenhuma idéia de como você iria construir as idéias que você pode ter em sua mente. Isto é realmente apenas uma função de força para você pensar e falar com o seu TF sobre isso. Mas, para ajudá-lo com isso, e com projetos finais, em última análise, sei que CS50 tem uma tradição de oferecer seminários. 

E estes são opcionais, mãos, ou palestra com base em oportunidades para aprender mais sobre temas que são um pouco auxiliares para o curso de currículo, mas ainda assim maravilhoso materiais para conduzir projetos finais. E assim esta é a lista que é CS50 equipe aqui em New Haven vêm-se com a este ano sobre iOS programação, Android programação, desenvolvimento de jogos, e cachos de mais ferramentas e linguagens e técnicas. 

Portanto, manter um olho no site do CS50. E, enquanto isso, se você gostaria de registrar seu interesse em qualquer um destes, ir para registo barra de CS50. E nós vamos depois seguir quanto à dias e horários de vôos e locais e mais tudo vai tudo-- ser transmitido e também está disponível sob demanda depois se você não pode realmente fazê-lo. Assim, sem mais delongas, vamos parou na última vez com GET. 

E esta era como a mensagem de que era dentro do envelope virtual, lembra, que passou de roteador para roteador para router entre um navegador web e um web servidor. E essa mensagem parecia um pouco algo como isto. Esta foi a mensagem que mais arcano era, na verdade, dentro de um envelope escrito numa folha de papel cujo primeira linha diz, literalmente, chegar barra. 

E, assim como uma verificação de sanidade, o que barra denotar? O que quer dizer quando barra solicitando um site? Você solicitá-lo o tempo todo. A maioria dos qualquer vez que você visita um site, você na verdade, não digite um nome de arquivo. Você provavelmente só ir para Facebook.com, introduzir, gmail.com, ou semelhantes. E o que barra representam? Qual arquivo? Ou que página, especificamente? 

O índice, sim. Então, a página padrão. Portanto, se você não especificar um arquivo nomear como nós vamos começar a ver, na verdade você está apenas pedindo dá-me a página padrão do Facebook ou me dar a minha caixa de entrada ou dar me a página padrão de notícias no site da CNN ou similares. E em seguida, um servidor responde a essa mensagem com algo como este, dizendo: sim, eu falar HTTP versão 1.1. 

200, que é um estado código que nós, seres humanos raramente nunca ver porque é bom. Porque significa OK, o pedido foi recebida e tratada adequadamente. E o tipo de conteúdo aparentemente na resposta é, muitas vezes, mas não sempre, texto. E especificamente, o HTML. E isso é, na verdade, onde olhamos para hoje. 

Então, na verdade, eu estou indo para ir em frente e abrir um browser. Vou usar o Chrome, você pode usar mais qualquer navegador nas semanas para vir. Em geral, recomendamos Chrome porque é particularmente bom para os desenvolvedores de software. Ele tem um monte de construída em ferramentas que tornam mais fácil para desenvolver não apenas HTML e CSS, coisas que vamos começar a falar sobre hoje, mas também outras línguas também. 

E eu estou indo para ir em frente e ir a-- Eu estou indo para controlar ou clique direito clique em qualquer lugar em uma página web. E eu estou indo para ir para Inspect Element. E eu vou ajustar meu tela só um pouquinho aqui. Deixe-me passar isso para o fundo. Portanto, este é o que é chamado Inspector do Chrome. Então, isso é como uma depuração ferramenta embutida no Chrome. 

Todos vocês já têm essa se você esteve usando o Chrome. E isso permite que você veja o que está acontecendo por baixo do capuz de alguma página web. Então, vamos realmente ter um olhar para isto como segue. Tem maneira mais recursos e nos preocupamos hoje. Mas há essas guias para cá. Elementos, rede, fontes, linha do tempo, e algumas outras coisas. Eu estou indo para clicar em Rede por um momento. 

E é um pouco esmagadora à primeira vista aqui. Mas o que eu vou fazer é deixar me simplificá-lo um pouco. Vou ligar o gravação de luz de modo que é vermelho. E eu vou dizer preservar log. E este é apenas um pouco coisa que eu descobri ao longo do tempo que vai salvar tudo o que acontece no navegador. E agora eu estou indo para ir para http://facebook.com. 

Na verdade, vamos fazer www para uma boa medida, slash. Enter. Assim, um URL que muitos você pode ter visitado. E agora web do Facebook A página surge no topo. E, em seguida, um monte de material voou na parte inferior. E, de fato, verifica-se que quando você visita Facebook.com, você não está apenas fazendo uma solicitação HTTP, verifica-se que vai Facebook.com envia 41 desses envelopes, cada um com seu próprio pedido get, conforme indicado, se bem que por detrás do ecrã aqui, na parte inferior do ecrã, isso indica que, na verdade, o meu navegador fez 41 pedidos. 

E no total, transferiu 861 kilobytes e levou por algum motivo até oito segundo para baixar tudo isso. Então, isso é realmente um pouco estranho que o site do Facebook que levaria por muito tempo, mas que assim seja neste caso. Agora, tudo isso eu realmente não me importo sobre, exceto para o pedido de nível superior. Então vamos para este aqui e deixe-me afastar por um momento. 

E deixe-me fazer zoom sobre o assunto. Então o que eu fiz na esquerda, embora há muita coisa acontecendo aqui é que eu destaque Facebook.com e depois notar que eu estou rolando para baixo, rolagem para baixo, rolando para baixo, para solicitar cabeçalhos. E você vai ver que o Chrome está mostrando me essencialmente o conteúdo interno do pedido que eu fiz. Não é formatar completamente na mesma maneira, mas observe há menção de entrar, notar há menção do anfitrião, Facebook.com, o caminho, ou barra, que é o arquivo que eu solicitado. 

E então se eu rolar backup, nós vamos realmente ver que o Facebook devolvido para mim é todos esses cabeçalhos. Então, dentro desse envelope virtual na verdade, há um monte de pares de valores-chave. Uma palavra, um cólon, e, em seguida, um valor. Uma palavra, uma vírgula, e um valor. Estes são chamados os cabeçalhos. E não há maneira mais detalhes aqui do que que realmente se preocupam agora. 

Mas esta é a segunda último lá em baixo, notar, que o servidor da Facebook.com, de fato disse vem aqui algum texto HTML. Então, tudo isso é para dizer que quando você pedir um web página de um navegador para um servidor, que servidor responde com um envelope de sua própria no interior dos quais é texto. Em outras palavras, o HTML. Linguagem de marcação de hipertexto. Que é uma outra língua que apresentamos hoje que os seres humanos ou computadores gerar a fim de implementar páginas web. 

Especificamente, vamos olhar para isso. Eu vou agora voltar para o site do Facebook. E eu vou apenas controle clique ou clique direito e clique em Exibir código fonte da página. E mesmo se você não usar o Chrome, IE pode fazer isso, o Firefox pode fazer isso, Safari pode fazer isso, embora o menu opções pode parecer um pouco diferente. E este é o código HTML que Mark e empresa no Facebook escreveu. 

E coletivamente, essa linguagem aqui implementa o azul e branco da página que vimos há pouco. Agora, isso é um pouco esmagadora. Mas se olharmos para cima no canto superior esquerdo, estamos vai começar a ver alguns padrões. Parece que há um monte destes suporte de ângulo aberto e depois há este HTML palavra-chave. Aqui está outro aberto suporte de ângulo e cabeça. 

Aqui está, se desloque e para baixo e para baixo, eu sou indo para ir em frente e tentar para procurar algo. Há caminho à direita aqui é o órgão de suporte aberto. E lembrar da última tempo que propusemos que a página web mais simples que um ser humano pode escrever pode parecer um pouco algo como isto. Abrir tag HTML, cabeça aberta tag, tag title aberto, então o título fechado, cabeça fechada, aberta tag corpo, algum texto, corpo fechado, HTML fechado. 

Mas uma pausa aqui por um momento. Este código, mesmo se você tiver nunca escreveu isso antes mas ainda não entendo muito bem o que está acontecendo, parece muito bom. Certo, é muito limpo. É muito estilisticamente agradável. Um monte de recuo e espaço em branco. Facebook é não é. Então, por que é tão Facebook pior do que eu em escrever em HTML? Aparentemente. 

Certo, isso é como um fora de cinco para o estilo. Há uma razão convincente para que estes cantos cortados. Tudo bem, então eles não querem tornar mais fácil para que você possa lê-lo. Assim, em certo sentido, eles são ofuscar-lo, tipo de codificação que pelo menos tão esteticamente que é mais difícil para Myspace para ir e arrancar seu homepage eo HTML para ele. Acontece que com programas no entanto, incluindo o cromo, podemos limpar isso super fácil. Por isso, não é bem isso é como a razão. O que mais poderia ser a causa. Sim. Sim, dados os custos de espaço em branco. O que você quer dizer? Sim exatamente. Se você pressionar a tecla Tab muito ou o barra de espaço, considerar as implicações. Assim, cada tecla no teclado é uma [Inaudível] representado como um byte. 

Então suponho que Mark ou qualquer um dos devs estes dias atinge a barra de espaço apenas uma vez nesta página HTML que representa a página de Facebook. E o Facebook tem um monte de usuários nos dias de hoje. Então, suponha que a página de Facebook é visitado por um bilhão de pessoas hoje. E alguém no Facebook tem pressione a barra de espaço apenas uma vez. 

Então, um byte adicional, um bilhão de solicitações, quanto mais dados são Facebook a transferência através da internet porque alguém bateu o barra de espaço no seu teclado? Um bilhão de bytes, ou um gigabyte de os dados estão sendo enviados a partir de servidores do Facebook para pessoas em todo o mundo sem uma boa razão. Agora, isso é apenas um espaço. 

Imagine se nós realmente limpar este coisa e recuado ele e acrescentou um monte de espaço em branco e caracteres de tabulação e espaços, Você acaba gastando gigabytes, se não terra bytes mais espaço. E tão super comum no mundo real de desenvolvimento web é para apoucar o seu código. E nós vamos finalmente ver como você pode fazer isso. 

Mas hoje, nós vamos começar a escrever código que é realmente lido por nós seres humanos. Acontece, porém, se você voltar a esta ferramenta no Chrome Inspect Element, anteriormente, estávamos na guia Rede. Acontece que se você vai para o guia elementos, o que você realmente ver Chrome é bastante impresso versão de HTML que mesmo. Então, nós temos deobfuscated-lo. Por isso, não é páreo para um computador. E agora você pode realmente clique ao redor e começar para ver a hierarquia que é uma página web. Então vamos realmente fazer isso. Eu estou indo para ir em frente e abrir-se em meu Mac um programa chamado de edição de texto. E lembrar que este é apenas um programa super texto simples. Windows tem notepad.exe. E eu vou Verbatim digite o seguinte. Doc tipo HTML, suporte aberto HTML, fechou suporte HTML, temos a cabeça da página aqui, o fim do cabeçalho da página aqui, um título será como, Olá mundo. 

E, em seguida, para baixo aqui, precisamos o corpo da página web. Corpo fechado. E, em seguida, aqui, Olá mundo. Tudo certo. Então nós escrevemos uma página da web super rápido. Vou guardá-lo como hello.html no meu desktop. Meu Mac vai reclamar, pensando que, espere um minuto, este é um arquivo de texto, fazer você quiser chamá-lo .txt? Mas não, eu quero usar HTML ponto. 

E então o que é bom se eu basta clicar duas vezes neste arquivo, hello.html, aqui vai a minha página web. Infelizmente, eu sou o única pessoa no mundo que pode visitar esta página agora. Porque onde ela vive aparentemente? É no meu Mac, certo? Que é inútil. Como ninguém nesta sala muito menos na internet pode realmente visitar essa página. Então, hoje, nós precisamos introduzir um outro elemento. 

E para fazer isso, eu vou vá em frente e abrir cloud 9. Então cloud 9 é, naturalmente, um nuvem serviço-- baseado CS50 IDE-- Isso tem todos os nossos espaços de trabalho correndo em algum lugar na internet. E isso significa que todos os nossos arquivos são acessíveis ao público já. Então, vamos seguir em frente e fazer isso. Eu estou indo para ir em frente e criar um novo arquivo NCS50IDE. Vou guardá-lo como antes como hello.html e clique em Salvar. E agora só para economizar tempo, eu vou para ir em frente e copiar e colar este código em vez de digitá-lo novamente. E salvá-lo. E então agora eu tenho um arquivo chamado hello.html. Mas como é que eu realmente abri-lo como uma página da web? Bem, acontece que o construído em para CS50 IDE não só é um compilador como clang e um depurador como o GDB e cachos de outros programas, há realmente uma pleno direito servidor web rodando dentro CS50 IDE. 

Todos vocês, isto é, ter seu próprio servidor web. E um servidor web é apenas um pedaço de software cujo propósito na vida é para servir páginas web. Para escutar as solicitações de navegadores e responder com pequenos envelopes virtuais dentro do qual é a conteúdo que eu escrevi. Portanto, este servidor web é fonte realmente livre e aberto. Onde open source significa apenas software que alguém tem escrito que todos nós podemos realmente ver e baixar e mesmo alterar o código-fonte. E ele é chamado Apache. 

E nós temos feito um pouco mais fácil usar em CS50IDE chamando-50 Apache. Para que ele possa realmente compreender o seguinte. Eu vou dizer Apache 50 início. E então eu só vou dizer ponto. E nós vemos alguns um pouco mensagem dizendo arcano configuração do Apache documento [? grupo?] a casa, ubuntu, qualquer que seja, barra de espaço de trabalho. Iniciando o servidor web Apache 2 com êxito. 

Então, longa história curta, I ter apenas apertou um botão e virou-se em um servidor web que é agora escutando na internet na porta TCP 80 em um endereço específico. E ele diz aqui, e isso vai mudar com base em seu nome de usuário e outros fatores, mas agora perceber se eu clicar isto, IDE50 dot jharvard e assim e por isso, perceber que todo esse tempo Para os últimos semanas, você pode ter reparou que o seu próprio nome de usuário é incorporado no lado superior direito esquina da CS50IDE. 

E isso, na verdade, tem sido tudo isso cronometrar o endereço em que você pode visitar todos os seus ficheiros através da web. Até agora, não importava, porque em C, você geralmente querem que as coisas funcionam em um terminal, não na web. Mas hoje, começamos escrever código baseado na web que nós queremos acessível em URLs públicas. Então o que eu vou fazer é clicar nesse URL. 

E note que eu vejo um bastante índice feio, uma listagem de diretório, mas o arquivo salta em você provavelmente? Hello.html. Isso é porque eu salvei o arquivo na minha área de trabalho. E o que eu disse a Apache o servidor web é olhar no diretório do espaço de trabalho de David. E deixe que ninguém no mundo ver esses arquivos. 

E, de fato, se eu agora clique no hello.html, Eu vejo dentro deste guia exatamente esse arquivo. Agora note, nuvem 9 de obra algo um pouco útil para nós. Dentro CS50 IDE, observe que há de repente, uma barra de endereços. Isso porque mesmo que estejamos usando Chrome para visitar CS50IDE, dentro de CS50IDE é a sua própria versão de um navegador da web agora. E assim, em vez de complicar as coisas, como tal, Eu estou indo para ir em frente e apenas copiar este URL. Eu estou indo para ir em frente e apenas abrir a minha própria janela Chrome. Então não há nenhuma mágica aqui, não CS50IDE. Eu só vou para colar literalmente Harvard minha URL e J pressione Enter. E pronto, agora eu e em teoria, todos na internet, se eu tiver configurado Permissões de forma adequada, pode visitar este arquivo. E agora, se eu disse hello.html, voila, há é a minha página web incrivelmente decepcionante. Então vamos fazer uma verificação de sanidade rápida. Por causa de tudo isso é conceitual set up. E nós realmente não tenho realmente você ensinou como escrever HTML per se. Quaisquer perguntas até agora sobre o que está aconteceu? Sim. O CS50 possui estas páginas da web? Em que sentido? Boa pergunta. Então CS50 é proprietária CS50.io. Temos de fato comprou o nome de domínio. E pela natureza de vocês registrando em CS50IDE, você obter tudo o que é chamado um subdomínio. 

Então IDE50-Malan, ou IDE50-Rob.CS50.io, esse é o seu endereço exclusivo dentro o nosso nome de domínio. Assim, para os fins de curso, você tem seu próprio endereço exclusivo. Mas nós simplificamos as coisas por comprar o domínio de nível superior, CS50 dot I / O e, em seguida, toda a gente é dentro de que, por assim dizer. E nós vamos voltar a isso em um par de semanas, provavelmente, especialmente no projeto final tempo, quando alguns de vocês pode querer obter seus próprios nomes de domínio. Na verdade, é relativamente direto. Tudo certo. Então, vamos agora fazer isso. Eu vou voltar para CS50IDE, onde meu arquivo agora, hello.html, não é tão interessante. Eu gostaria de fazer algo um pouco melhor do que isso. Então, eu vou fazer algo parecido com isto. Deixe-me paragraphs.html aberto. Portanto, este é um arquivo que eu escrevi com antecedência. No topo de que, como sempre, temos comentários. Mas, em HTML, comentários olhar um pouco diferente. Na linha de três e linha 14, você veja a sintaxe para iniciar um comentário e acabar com um comentário. 

Mas nenhuma das coisas em entre as questões funcionalmente. É apenas uma nota a um humano que está acontecendo aqui. E assim como a sanidade rápida verificar, se eu rolar para baixo, o que é o novo óbvia tag que nós introduzimos? As tags, até agora, temos visto são abertos suporte HTML, cabeça, título, e corpo. Mas o que é obviamente novo agora? 

Sim, então p. A tag p ou parágrafo tag. E então eu apenas emprestado algum padrão Texto em latim para constituir meus parágrafos. Porque o que eu queria demonstrar é a forma como você pode representam parágrafos de texto em HTML. E então o que está começando a acontecer aqui é que já existe um padrão de desenvolvimento. E deixe-me ir em frente e fazer isso. Deixe-me primeiro desligue Apache. E eu vou dizer a ele para começar a si mesmo novamente dentro de fonte de hoje sete m diretório. Assim que eu tenho acesso a tudo. 

E agora, se eu voltar para esta listagem de diretório, notar que eu vejo todos os arquivos a partir de hoje. E você vai ver no jogo seguinte problema, vamos dar-lhe instruções para fazer exatamente isso. Se eu abrir paragraphs.html, isso pode bem parecido com uma linguagem de programação para você, se você não falar ou ler em latim. Mas esta é apenas três parágrafos de texto que são marcados em HTML. 

E observe o parágrafo pausas entre eles. Porque gira para fora, e mesmo que você pode estar inclinado a fazer isso, Considerando que, no mundo real, se você quiser colocar linha pausas entre as coisas, você pode simplesmente fazer isso e bateu em Salvar. E agora, se eu recarregar aqui, aviso que tudo só borra juntos em apenas uma bolha de texto. Como o HTML é uma espécie de linguagem mudo. 

Ele foi criado para ser usado em tais uma maneira que o navegador só irá fazer explicitamente o que você diga a ele para fazer. Portanto, se você não dizê-lo dê-me um novo parágrafo, você não vai ver um novo parágrafo. E, de fato, o que a navegador vai fazer é mesmo que você pressione Enter, digamos que uma e outra vez e novamente, movendo-se deste modo texto para baixo na tela e, em seguida, salvar e, em seguida, recarregar, o navegador vai a desmoronar todo este espaço branco em apenas um único espaço em branco, visível. Tudo certo. Então essa é a marca de parágrafo. E então qual é o padrão que está desenvolvendo aqui? Bem, parece ser o caso de que HTML é tudo sobre como iniciar um tag e terminando a tag. E o que é uma marca? Bem, é apenas um pedaço de sintaxe. Abrir suporte, uma palavra-chave, suporte fechado, é uma tag. Ou começar tag. E então quando você está feito se expressar, como no que você fez com o parágrafo, você faz assim dizer oposto. Mas o contrário não é muito para trás. 

Você simplesmente prefixar a mesma marca de nomear com uma barra como este. Tudo certo. Então, nem tudo o que emocionante. E, de fato, nós não estamos fazendo o web tudo o que mais interessante. E se eu quiser fazer coisas maiores e ousada? Assim, verifica-se que aqui está um exemplo em headings.html, onde no meu corpo, Eu tenho uma tag H1, H2, H3, quatro, cinco, ou seis, os quais parecem bastante misterioso. Mas se eu for abrir este exemplo, vamos dar uma olhada. Headings.html. 

Então navegadores por padrão pode dar-lhe texto que é grande e corajoso de tamanhos diferentes. H1 é grande. H6 é menor e, em seguida tudo o mais no meio. Então, isso é interessante, mas ainda não é realmente a web eu sei. E se nós queremos que tenho algo como uma lista. . Então aqui está uma lista com marcadores de três das casas de Harvard. 

Como você vai fazer sobre isso? Bem, dê uma olhada list.html. E aqui, vemos uma pouco de funkiness mas vamos considerar o que está acontecendo. Assim, com base no que você acabou de ver, UL significa lista desordenada. Lista não ordenada significa apenas marcadores. Não há números. Há também uma coisa chamada lista, que é um OL na tag ordenada. Em seguida, LI, item da lista é tudo o que isso significa. 

E assim automaticamente números de tudo para você. Mas, novamente, todo o meu recuo e espaço em branco é apenas por minha causa. O navegador não é realmente vai se importar. Assim, mesmo que você não podia fazer isso, só para ficar claro, Você não deve mesmo embora O navegador ainda ser capaz de compreendê-lo muito bem. Eu estou batendo na minha recarga navegador, estou clicando recarga e nenhuma mudança está acontecendo porque o navegador ainda fazendo exatamente o que eu diga a ele para fazer. 

Tudo certo. Então, tudo isso é apenas texto. Agora vamos fazer algo mais interessante. Eu estou indo para ir em frente e emprestar algum deste HTML. Eu estou indo para ir em frente e criar um novo arquivo aqui. E nós vamos chamar este rick.html. Temos desproporcionalmente algo usado chamado um rolo Rick neste classe este ano, eu não sei, apenas aconteceu organicamente. 

E agora ele tem fora de controle. Então, eu estou indo só para ir com ele. E se eu for para o Google Imagens e Rick Astley. Se você não sabe por que fazemos isso, basta ler sobre Wikipedia. Toda vez que você clicou no link, Alguém está rindo em algum lugar. E deixe-me ir lá ahead-- vamos, vamos ver esta imagem. 

Portanto, temos aqui um imagem em Imagens do Google. E vamos supor que este é razoavelmente em toda parte na internet. Então, eu vou assumir que é OK para mim para realmente colocar isso em minha página web. Eu estou indo para ir em frente e copiar URL da imagem. E agora, se eu voltar para a Nuvem 9, vamos ver o que posso fazer aqui. Então aqui é apenas uma página web. Este é Rick Astley, haha, Eu vou agora voltar para o meu navegador, recarregar e interessante. 

Onde está Rick? Então deixe-me ver o que aconteceu. Na verdade, eu vou fingir que eu não fiz isso. [Inaudível] colocá-lo aqui. Nós vamos voltar a isso em um momento. Então aqui está rick.html. Então isso não é Rick Astley. Então não é que nós podemos realmente adicionar ele aqui. Este é Rick Astley. Eu vou dizer-me dar uma imagem cujo fonte é o URL eu só copiados, o que aparentemente é um feliz aniversário uma coisa ou outra. 

E agora eu vou fechar a tag como este. Então, isso é quebra super longa. Mas note que tudo o que eu tenho feito imagem suporte é aberto, fonte com um atributo deste. E é realmente uma longa URL. E no final, perceber isso. Barra Por que foi que eu fiz suporte angular em vez de, como qualquer outra tag, tendo um suporte aberto, IMG, suporte fechado? Basta dar um palpite, mesmo que você não têm qualquer familiaridade com HTML antes. 

Assim é como ele se fecha o comando, mas porque ele não realmente fazer intuitiva sentido fazer algo um pouco mais verbose perto imagem como? Sim. Sim. Apenas semanticamente, não há nenhum sentido de a partir de uma imagem e terminando uma imagem, é lá ou não é. Portanto, não faz sentido deixar uma lacuna para qualquer outra coisa dentro de uma imagem. Você simplesmente não pode fazer isso. E assim a sintaxe geralmente seria apenas para fazer a barra no interior da tag de abertura ou a marca de início e em seguida, bateu em Salvar. 

Então, se eu agora recarregar este arquivo, agora Eu tenho uma boa página web cozinhar aqui. E nós certamente poderia realmente irritar as pessoas por incorporação em vez como um link do YouTube. E, na verdade, em qualquer altura você já passou para o YouTube, e me deixou realmente acidentalmente Rick Roll-me aqui. Então Rick roll. Então rick roll-- Eu estou indo para ir aqui. 

[Música tocando] 

OK, uma pessoa que gostava. Então, observe todo esse tempo, se você clique no link Compartilhar, você naturalmente obter a URL que você pode realmente incorporar em um email ou uma imagem forense ou em um conjunto de problemas ou numa corrediça. E agora, se eu clicar em vez de incorporação, notar que todo esse tempo, este material foi lá. Eu estou indo para ir em frente e copiar este. 

E só assim podemos vê-lo melhor, eu sou indo para colá-lo no meu editor de texto. Observe que isso que YouTube tem vindo a dizer. Toda vez que você visitar um Vídeo do YouTube, se você deseja incorporar o vídeo em seu A página web, simplesmente pegar isso. Portanto, este é mais um Tag HTML chamado um iframe. Ou um em linha quadro. Por isso, também parece um pouco mais complexo do que todos os outros. Assim, verifica-se que a imagem tag e, aparentemente, a tag iframe tomar o que são chamados atributos. 

E este é outro pedaço de sintaxe no HTML. Em adição à marcação de nome, nome da marca do suporte aberto, é possível controlar o comportamento da etiqueta por ter um monte de atributo é igual ao valor. Atributo é igual ao valor. E assim, por exemplo, YouTube está nos dizendo se você quiser a largura deste vídeo ser de 420 pixels e a altura para ser 315 pixels, que é como você expressá-lo em HTML. 

A fonte do vídeo vai ser que URL longo YouTube e, em seguida, algumas outras coisas como quadro de fronteira é zero, de modo que provavelmente significa que há nenhuma borda em torno da coisa. Permitir tela inteira, provavelmente, significa que o utilizador pode clicar em um botão e realmente de tela cheia do vídeo. Então, se eu realmente quero ser impressionante aqui em Rick dot HTML, ao invés de usar a tag de imagem, deixe- me excluir que, em vez cole este. E agora recarregar. E agora aqui vamos nós de novo. Tudo bem, isso é o suficiente. Tudo bem, então eu vou tentar difícil não fazer isso de novo. Então, quais são alguns dos tópicos aqui? Então, HTML, tão feio como estas páginas web são, na verdade é muito simples. Não é uma linguagem de programação. Ele não tem funções. Não tem alças. Ele não tem condições. Tudo o que tem é dezenas de diferentes etiquetas, cada uma das quais tem zero ou mais atributos. E, de fato, o que é divertido sobre HTML que você começa a mergulhar é que é auto aprendizado muito. 

Só é preciso um entendimento do quadro geral do HTML. O que é uma tag, o que é um atributo, como você realmente configurar uma página web do seguinte modo. E tudo o resto é realmente o resultado de olhar para cima em uma referência on-line ou pesquisando como fazer algumas técnica ou, como vimos, olhando na fonte do Facebook código, olhando para um site que você gosta no seu código-fonte e a compreensão de como os desenvolvedores lá realmente colocou as coisas. 

Então o que podemos fazer imagens também. E, de fato, nós fizemo-lo de um momento atrás. Deixe-me ir em frente e apenas mostrar-lhe. Aqui está um código de exemplo. Se você quiser ver gato mal-humorado. Então, observe que eu posso ter uma tag de imagem aqui. E eu tenho um comentário acima. Eu tenho uma alternativa texto para a acessibilidade. Então, alguém que está usando uma tela leitor, por razões de vista em seguida, pode realmente ter o seu leitor de tela dizer gato mal-humorado. Porque se eles não podem ver a imagem, eles pode, pelo menos, têm o seu computador dizer-lhes verbalmente o que é. E a fonte desse arquivo é cat.jpeg. Então, na verdade, se eu realmente queria obter inteligente, o que eu poderia ter done-- Eu prometo não ir para Rick Astley, de modo Eu estou indo para o google para um gato em vez disso. E se eu for para o Google Images aqui, e nós vamos assumir que esta é uma imagem de meu gato. 

Suponha que eu tenho controle clicado ou para a direita clicou sobre este, acidentalmente assustador. E eu vou cat.jpeg para salvar no meu desktop. Deixe-me agora voltar para cloud 9. Repare que aqui, posso ir para fazer upload de arquivos locais. E se eu pegar esse arquivo, cat.jpeg, aviso que eu possa arrastá-lo e soltá-lo em cloud 9 e ele vai gritar comigo aqui. 

Porque já você recebe um arquivo cat.jpeg, mas é super fácil de agarrar uma foto que você tem tomada a partir do Facebook ou Flickr ou similares e, na verdade, arraste e solte-o em cloud 9 e, em seguida, torná-lo parte do seu próprio pessoal site ou problema definir sete ou oito anos, como veremos em breve. E então quando você finalmente visitar aquele gato, supondo que eu baixei esse mesmo gato, aviso isso-- que era adorável. 

O que você vê é algo como este cara aqui. Então os arquivos que você referência dentro de uma página web podem ser locais em seu próprio conta ou remoto em algum outro servidor como no caso do Rick Foto Astley um pouco atrás. Então, onde o que else-- mais podemos fazer aqui? Então vamos dar uma olhada no seguinte. Você sabe o que é legal? 

Temos vindo a fazer até agora páginas da web muito estáticos. Eu quero apimentar as coisas da seguinte forma. Eu quero fazer o meu próprio motor de busca. Então, para fazer um motor de busca, vamos vá em frente e começar a fazer isso. Eu estou indo para ir em frente e criar um novo arquivo chamado search.html. E nós temos prefabed versões online. Whoops. Não cole em sua janela de terminal. Prefab versões on-line. E eu vou começar como segue. Então aqui está o início de um arquivo chamado search.html. Vou guardá-lo no diretório de origem de hoje. Eu vou chamar esse Search. Na verdade, vamos torná-lo melhor. CS50 Pesquisa e realmente marca-lo. E agora, eu vou dizer algo como H1 CS50 Search. E, em seguida, para baixo aqui, H2 em breve. E só para recapitular, H1 e H2 significa que, respectivamente? 

Sim, tão grande e corajoso, e não tão grande, mas ainda negrito. Então, se eu salvar este e passar por cima aqui, vamos ver o search.html arquivo. Tudo bem, e este é direita-- [inaudível]. Estar por. David é confuso. Oh, ele está lá. David é um idiota. ESTÁ BEM. Então é isso. Assim, busca CS50 em breve. Então, agora, vamos sintetizar o que fizemos na semana passada. 

Quando falamos sobre a mecânica de nível mais baixo de HTTP. E essas novas idéias de HTML, que é apenas esta linguagem de marcação, onde dizer um navegador exatamente o que fazer e implementar o nosso próprio motor de busca. Então, ao invés de apenas dizendo em breve, eu sou vai introduzir algo chamado de tag form. E desta forma, eu vou ter algo como um campo de entrada. 

E o nome de esta entrada campo, eu vou chamá-lo P. E o tipo de campo de entrada Eu vou dizer é apenas "texto". E um campo de texto, como veremos ver, é apenas uma caixa de texto. E por isso não sente aqui para ter qualquer coisa dentro dele neste momento. E por isso estou indo simplesmente para fechar a tag com que de barra direita na marca própria. E então eu vou tem uma outra entrada. Tipo de entrada é igual a enviar. E então eu vou fechar um presente também. 

E agora eu vou voltar aqui. E já vemos, embora muito feio, eu tenho tem os começos de minha própria página de pesquisa aqui. Na verdade, deixe-me tentar limpar isso um pouco. Acontece que no entrada aqui, eu posso ter outro atributo chamado espaço reservado. E eu poderia ver algo como palavras-chave, ou, mais especificamente, consulta para q. 

E observe, agora, eu tenho este tipo de texto cinza que desaparece tão Assim que eu começar a digitar, mas é provavelmente algo você já viu em outras páginas da web. Eu realmente não gosto do botão Enviar. Então, eu estou indo realmente para dar a Botão enviar um valor de pesquisa. E agora, se eu recarregar, observe que meu botão torna-se o nome de busca. Você sabe, eu realmente não como o logotipo aqui. Então gerador Google Font. 

Eu quero apimentar este ainda mais. Pesquisa de modo CS50. Deixe-me criar o meu próprio logotipo. Isso parece bom. Então, agora deixe-me salvar esta as-- vamos lá. Onde é que vai? Lá. ESTÁ BEM. Perdeu. Salvar como. Navegadores estúpido. Stand by, vamos corrigir isso de uma vez por todas. Aí vamos nós. Tudo certo. Desculpe. Dia de folga. Agora, este é funky. Sair da tela inteira. Tudo certo. 

Agora, como uma normal, pessoa, salvar imagem como. Logo.gif. Agora eu estou indo para ir para CS50IDE e Eu vou simplesmente pegar o logotipo, Eu vou arrastá-lo para meu diretório de origem sete, arquivo já existe, eu estou bem com isso. Então, eu estou indo para substituí-lo porque eu já tinha. E agora como faço para me livrar disso? 

Vamos em frente aqui e fazer fonte de imagem é igual a logo.gif. Feche essa. Guardar. E agora, se eu voltar para a minha pesquisa página, agora está olhando muito bom. Tudo bem, por isso não tem bem feito nada de útil. Na verdade, deixe-me tentar pesquisar para um gato e ver o que acontece. Cats. Caramba. Ele não apenas trabalhar, aparentemente. Então, qual é a peça-chave o que está faltando aqui? 

Certo, mesmo se você não sabe nada de HTML, Eu comecei marcando o formulário de telefone e eu disse a ele como obter entradas, dá-me uma caixa de texto e um botão de envio, o pedaço aparentemente está faltando? Suponha que nós queremos realmente chegar esta coisa funcionando corretamente. O que precisamos fazer? Temos uma necessidade de implementar o back-end banco de dados ou o motor de busca próprio, e que vai levar um todo muito tempo, francamente. 

Então lembre-se o que fizemos da última vez. Então, se você procurar algo no Google e você com antecedência desligado, recall, pesquisa instantânea. Então deixe-me desligar isso de modo que este realmente se comporta como um navegador de escola mais velho, se eu agora procurar algo como gatos, recordar o que o URL parece. É muito enigmática. Mas incorporado em lá, recall, é a pesquisa barra. Ponto de interrogação q é igual a gatos. 

E isso parece-me dar- um monte de resultados de pesquisa. Então você sabe o que eu vou fazer? Eu estou indo para emprestar Google por apenas um minuto. Eu vou passar por cima aqui e eu vou dizer que esta forma de ação ou destino, por assim dizer, deve ser literalmente Google. E o método que eu queria para uso vai ser chegar. 

Então, o que é ação? A ação é estranhamente nomeado, mas isso apenas significa que está indo para lidar com a ação dessa forma? Quando eu clique em Procurar, onde Caso o resultado ir? E se eu agora voltar para a minha forma aqui e recarregar minha página web e agora procurar algo como o cão, observe agora Tenho re implementado Google. Certo? 

Se eu quiser procurar alguma coisa mais, ele trabalha para não apenas os cães, ele também funciona para gatos. Ele também funciona para CS50. E OK, este é apenas sob whelming, não é? Tudo bem, mas ele realmente funciona. Então, o que está realmente acontecendo? Então eu ensinei meu navegador, usando HTML, para ter a entrada do usuário e realmente enviar essa entrada para um servidor remoto através de HTTP. 

E porque meu navegador entende HTTP, ele realmente construir a URL para que o Eu acabar mais no meu navegador, observe o que acontece quando eu procurei para o cão. Se eu clique em Procurar, observe que o URL muda como eu pretendia google.com/search~~V a consulta é igual a cachorro. E isso é porque a forma sabe, porque o método é obter, simplesmente anexá-lo para a URL lá. 

Agora, essas páginas da web ainda são feios. Então, vamos introduzir uma outra pedaço de sintaxe, se pudermos hoje. E isso é algo conhecido como folhas de estilo em cascata. Então deixe-me dar uma olhada este exemplo aqui e veja se é que podemos inferir o que está acontecendo. Este é CSS0.html. E é aí que as coisas ficar um pouco feio. Porque, infelizmente, no mundo da web, HTML por si só não pode fazer tudo. E por isso, se você quiser estilizar sua página web, você realmente precisa se concentrar no estética de uma forma diferente. Então, aqui, eu tenho o corpo de meu Web principal no interior do qual é uma grande div. E um div apenas significa divisão. Então, é como um parágrafo, mas não tem a mesma semântica de um parágrafo de texto. 

Isto apenas significa que o navegador, vem aqui uma grande região retangular da minha web página, eu quero lidar com isso especialmente. Agora, linha 21 é onde que começa div. E apenas dar um palpite. O que é o efeito da linha 21 no resto do conteúdo da página? Centralizando-a. Isso é tudo. Então, nós não vimos uma forma de na verdade, a centragem texto. 

Na verdade, o meu motor de busca, Ao contrário do Google real, foi tudo justificado para a esquerda. E agora na linha 21, eu estou dizendo, hey navegador, criar uma divisão da página. Dá-me um grande, retângulo invisível. É assim que eu quero pensar sobre a página web. E então estilizar-lo como se segue. Dentro destas citações, agora, é uma segunda língua que apresentou hoje chamados de folhas de estilo em cascata. Felizmente, isso também não é uma linguagem de programação, Portanto, é muito limitada na sua sintaxe, mas também muito limitado na sua funcionalidade Considerando que é tudo sobre HTML marcando-se os dados de uma página web e a estrutura de uma página web. CSS é geralmente sobre o última milha, a estética, obter o tamanho ea cor eo colocação exatamente correto em uma página web. E, de fato, ela é formada com pares de valores-chave. 

A propriedade como esta, texto alinhar, seguido de dois pontos, seguido pelo valor da referida propriedade, que, neste caso, é o centro. E agora observá-lo pode aninhar essas coisas. Se eu queria que tudo em que Eu destacou a ser centralizado, é por isso que eu tenho linha 21 e a linha correspondente 31. Mas suponha agora quero dizer John Harvard, bem-vindo ao meu home page. 

Copyright symbol John Harvard. E suponha que eu quero o primeiro de essas linhas a ser bastante grande. 36 pixels. Então, isso é um tamanho decente. E eu queria que o seu peso de ser ousado. Mas, em seguida, abaixo que, Eu quero texto menor. E abaixo disso, eu quero texto ainda menor. Desculpe. Hoje parece um dia de folga. 

Então, agora, o que estou fazendo para expressar isso? Aqui na linha 22 é um embutido div ou div aninhada, se você quiser. Ele também tem sua própria marca de estilo. Eu especificar um tamanho de fonte de 36. Eu especificar uma espessura da fonte de negrito. Aqui embaixo, eu só especificar 24 pixels. E, finalmente, na linha 28, eu especificar 12. Então, assim como uma verificação de sanidade rápida e como uma leitura humana presente, que as palavras na tela são realmente vai ser corajoso? Quais as linhas são realmente corajoso? 

Apenas John Harvard. Certo? Porque assim como linha 22 diz hey navegador, aqui é uma divisão da página. Faça-lhe o tamanho da fonte de 36 pontos. Faça o peso negrito. Assim que chegar ao tag final correspondente ou tag fechada na linha 24, Isso significa que, hey navegador, parar de fazer tudo o que você está fazendo. E notem que ser claro, mesmo que A linha 22 tem todos estes atributos como estilo, quando você fechar a tag na linha 24, só mencionar o nome do tag. 

Você não repetir o estilo de texto ou qualquer coisa que está dentro dessas citações. E por isso, se eu olhar para isso agora no meu navegador, vamos dar um olhar para o resultado final. Deixe-me ir frente a esse arquivo, que é CSS 0. E ainda é bastante simples, mas ficando muito interessante. Mas acontece que há outras coisas que posso fazer aqui, e correndo o risco de fazer esta completamente hediondo, notar aqui que, na minha corpo de minha página web, Eu posso fazer algo engraçado como bg ou cor de fundo. 

E rápido, o que é sua cor favorita? Verde ouvi. Tudo certo. Então, agora, se eu acertar recarregar agora, temos uma página web verde. Tudo bem, então isso não é ruim. E agora, se eu quiser fazer isso realmente legal, eu posso fazer a cor do meu texto até mesmo vermelho. Então vamos ver o que isso parece. Agora ele está olhando muito bom. E aqui embaixo, se você realmente quer mexer com alguém ou se você quer ser uma daquelas pessoas que tenta induzi-lo a visitar um web página porque eles enganado Google em pensar que há um grupo inteiro de palavras-chave como-- vamos ver, recarregar. Para onde ele foi? E não nos TI. Tudo certo. Então eu digo isso como um aparte, nós vamos falar sobre essas coisas em algumas semanas quando falamos de segurança, se você realmente cachos inteiros de embutir palavras-chave em uma página web, mesmo se eles não são visíveis para um humano, alguém como Google, é claro, ainda pode realmente encontrar este. Tudo bem, então isso é muito hedionda muito rapidamente. 

E, de fato, não é tudo que muito diferente de minha própria web página como estudante de graduação, que Comecei pesquisando em torno de encontrar versões anteriores de meus velhos sites. Foi muito ruim. Na verdade, eu achei um pouco antes da aula. Mas há pior lá fora. Este, aparentemente, era meu home page de volta em 1996. Aparentemente, eu pensei que era apropriado para pedir às pessoas o seu nome Antes que pudessem realmente ver a minha página web. 

E então eu mostrei a eles algo estúpido, provavelmente. Eu vou cavar-se mais para a próxima vez. Mas, por agora, vamos considere um pouco de design. Nós conversamos sobre estilo. E esta página, até agora, e mais tudo que eu escrevi é bastante limpo estilisticamente. Mas o que dizer de design? Bem, há um monte de redundância em que eu venho fazendo aqui. 

Eu mencionei a palavra cor em um par de lugares. Eu mencionei o tamanho da fonte em um par de lugares e corajosa em um par de lugares. E, fundamentalmente, eu sou co misturando-se duas línguas. Eu tenho HTML com os meus tags e minha atributos e, em seguida, de repente, entre aspas, eu tenho a segunda língua hoje chamado de CSS, que por sua vez, é apenas estes pares de valores-chave ou essas propriedades separados por dois pontos. 

Acontece que muito como em C onde nós pode começar a fatorar algum código em arquivos de cabeçalho, para que possamos fazer o mesmo em HTML. E um passo para que é como se segue. Observe que esta versão, é CSS1.html Estruturalmente a mesma página da web exato. Então, eu tenho um monte inteiro de divs, mas desta vez, eu tenho se livrado do invólucro div como você vai ver. 

E eu dei esses três divs superior, média e inferior, IDs exclusivos. Isso é bom, porque por dando essas divisões dos identificadores únicos de página, I pode referenciá-los em outro lugar. Onde? Bem, deixe-me rolar para cima. E, até agora, a qualquer hora nós olhamos à frente de uma página web, o que é a única tag que tivemos em o chefe de uma página da web? Um pouco mais alto. Apenas o título até agora. Mas acontece que há algumas outras coisas você pode colocar lá, um dos que é chamado de tag estilo. Então, há pouco, nós olhamos em um atributo de estilo. Acontece lá fora é uma marca de estilo. Pertence no interior da o chefe de uma página web. E agora perceber o que estou fazendo. Eu tenho dentro deste tag estilo a seguir. Eu estou literalmente mencionando na linha 20 do nome de uma marca que eu quero para estilizar. 

Então eu tenho chaveta aberta e fechou chaveta. Então similares em espírito à C, mas Novamente, isto não é uma função, este é apenas um detalhe sintático aqui. E depois, claro, estou dizendo o navegador, hey navegador, fazer todo o corpo da página ter um alinhamento do texto do centro. E então isto está dizendo o seguinte. Hey navegador, se você vê uma página HTML elemento ou tag na página que tem um identificador único de topo, de modo que o símbolo de hash aqui significa apenas idéia original de topo, vá em frente e fazer seu tamanho de fonte 36 e seu peso negrito. 

Hey navegador, um elemento cuja ID é médio, torná-lo 24 pixels. E hey navegador, se você vê uma idéia de fundo, torná-lo 12 pixels. O efeito na extremidade é exatamente o sam. Se eu entrar em CSS 1, o A página parece o mesmo. Mas estamos um passo na direção um design um pouco melhor. Deixa-me voltar aqui para CSS2 e ver o que mais eu fiz. 

Agora, a página é realmente, realmente limpo. Na verdade, eu posso atender a todas as o conteúdo de uma página aqui. Mas o novo tag tenho introduzido, obviamente? Ligação. E não é o melhor nome para um tag, porque não é um link no sentido que a conhecemos, mas isso significa um link em algum outro arquivo. Este é tipo de como afiado incluir em C. 

Esta é a maneira em HTML para dizer hey navegador, ir buscar o conteúdo de o arquivo chamado css2.css. A relação, para mim, é que é uma folha de estilo. E, de fato, é isso que a do S de em Cascading Style Sheets meios. Isto é uma folha de estilo. É apenas o arquivo de texto contendo um monte de propriedade. É um monte de estilos que você deseja aplicar a uma página. 

E assim esta é, aparentemente, referindo-se a um segundo ficheiro. E se eu abrir esse, CSS2.css, perceber que tudo que eu fiz é copiar e colar tudo desta para este arquivo. E agora, mesmo se você nunca codificado essas coisas antes, considerar apenas com o chapéu engenharia proverbial em, por que isso é uma melhor concepção provavelmente? Factoring para fora aquelas propriedades CSS, colocá-los em seu próprio arquivo. Mesmo que resolveu este problema como há cinco minutos na primeira versão. 

Nós não tenha melhorado o página estilisticamente, este é apenas melhor projeto em algum sentido. Por que você pensa? Sim. Mais flexível como? Sim. Então, se você quer ir para trás e mudar as coisas, agora, você tem um lugar onde você pode mudar as coisas. E, na verdade, para algo como conjunto de problemas de sete, onde vamos implementar um site de negociação de ações, que vai ter um todo grupo de páginas. E seria realmente irritante se você decidir, hm, Eu realmente não gosto de 24 pixels, eu quero que seja 28 pixels ou ligeiramente maior. E então tem que fazer um global de localizar e substituir ou abrir todos os arquivos do seu site simplesmente para realmente mudar um valor. Ao fatorar esses estilos em um lugar central, Agora você pode abrir um arquivo de texto em CS50IDE em qualquer programa, mudá-lo, salvá-lo, e feito. Você propagada aqueles mudanças em todos os lugares. E que seria a mesma em um arquivo ponto h bem. Assim dúvidas, portanto, medida sobre essa sintaxe? Tudo bem, então nós temos feito tudo o que parece exceto realmente implementar hyperlinks. E então vamos ir em frente e fazer isso. Deixe-me ir em frente e criar um novo arquivo aqui. Vou chamá-lo link.html, coloque o código de hoje. 

E eu vou fazer aberto suporte tipo doc html. Como um aparte, essa coisa no top, esta declaração de tipo doc, é o único que é estranho com o ponto de exclamação. Você apenas tem que fazê-lo lá e significa que estamos usando HTML versão 5. Versões mais antigas do linguagem teve muito mais tempo strings que você precisava para colocar lá. Então, aqui está um exemplo chamado link. 

Eu preciso de um corpo de minha página web aqui. E aqui, a é igual a href digamos HTTP://www.disney.com e meu site favorito, vamos dizer. Tudo bem, então um muito , página amigável inócuo. Se eu agora vá em meu diretório listando aqui e abrir link.html, temos de hiper texto. 

E, de fato, este é o lugar onde o H em HTTP vem. Protocolo de Transferência de Hipertexto é sobre a transferência de texto que tem hiperlinks a outros recursos. E, de fato, aqui é o familiar, se retro, azul link que, se clicado, vai realmente me levar a Disney.com. Agora, oh, que está saindo em breve. Tudo bem, então agora, quais são alguns das implicações disso? 

E, francamente, o mundo começa para obter um pouco mais familiar e também um pouco mais assustador mas também um pouco mais auto defensável uma vez que você começar para entender essas coisas. Porque as probabilidades são, alguns de vocês, se você ir através de sua pasta de spam do Gmail ou mesmo sua caixa de entrada, você provavelmente obtido algum tipo de e-mail que está lhe pedindo para mudar o seu password talvez ou talvez verificar suas credenciais PayPal ou outros enfeites. 

E, de fato, você pode ter recebido algo que diz como, clique aqui para redefinir sua senha PayPal. E agora, repare, se Isto não é Disney.com mas como badplace.com e recarregar, note que o texto aqui pudesse dizer qualquer coisa que seja. E, de fato, este é apenas palavras. Por que não posso realmente ser super mal-intencionado e dizer http://www.paypal.com. 

Clique aqui redefinir sua PayPal senha e agora recarregar. Isso parece bastante legítimo, certo? Quero dizer, eu não clique em um e-mail que só diz isso. Mas note a dicotomia aqui. Diz www.paypal.com, e, de fato, espere um minuto, nós sabemos que você quer a s para a segurança. Então, agora, ir para www.paypal.com HTTPS, mas se você nunca fez isso antes, Não adquira o hábito de pairando sobre pequenos links aqui. E é difícil ver na tela existe, e não é tudo o que mais fácil aqui. Mas até aqui em o pequeno cantinho faz o navegador realmente dizer-lhe que vamos para badplace.com em vez de Paypal.com. Agora, para onde estamos indo com isso? Todos os exemplos que fizemos hoje, temos codificado e digitado manualmente. A web é incrivelmente desinteressante quando você duro codificar suas páginas da web para que o conteúdo é estático e nunca mudar. Claro, todo o nosso sites favoritos hoje, se é o Gmail ou o Twitter ou Facebook ou qualquer número de outros são dinâmicas. Eles estão mudando em resposta à entrada do usuário assim como os resultados de pesquisa do Google. 

E assim na quarta-feira, o que fazemos é deixamos HTML e CSS introdução atrás de nós e nós tomamos por certo que nós agora conhecê-la e introduzimos uma nova linguagem de programação chamado PHP, que gosta C, vai nos dar o poder de realmente criar programas que se geram saída. Neste caso, vamos usar PHP para gerar dinamicamente web páginas usando essa nova linguagem. Então, mais sobre isso na quarta-feira. Vejo você então. 

[Música tocando]