DOUG LLOYD: Então nós gastamos about-- se minha matemática é certo, e eu acho que eu acho que olhando traseira-- passamos cerca de 35 vídeos falando sobre vários aspectos do C, talvez um pouco mais, talvez um pouco menos. E nós não cobrimos tudo em C, mas nós cobriram uma grande parte do língua, a grande maioria da mesma, certamente para usos comuns. Agora nós estamos indo falar sobre outra língua, HTML. E nós estamos indo para cobrir em que apenas um de vídeo. 

Mas isso vai ser OK. Isso vai realmente tornar-se algo que você vai se acostumar. Agora que você tem a fundamentos de uma língua, é realmente muito fácil para começar a aprender outros. Então, nós estamos indo para começar para a etapa um pouco para trás e encobrir o básico diferenças entre línguas e tipo de deixá-lo a ele. Há um monte de realmente grande recursos na internet, o que vamos começar a dirigir você no sentido porque a internet é um vasto repositório de informações. E assim não é como você vai estar perdendo necessariamente por não ter a informação coberto em um vídeo. Você ainda será capaz de obter tudo que você precisa e uso o conhecimento que você já construiu-se por entender C para fazer a curva de aprendizado para estes outras línguas, na verdade, um monte mais planas. Eu prometo. 

Mas vamos falar sobre uma linguagem que é realmente fundamental para todos os web A página, que é HTML. HTML é o Hyper Text Markup Language. HTML é uma linguagem, mas é não uma linguagem de programação. 

HTML não tem variáveis. Não tem lógica ou funções ou qualquer coisa assim. Nós não podemos fazer qualquer programação, por si só em HTML. Às vezes você vai ouvir as pessoas descrevem-se como programadores HTML, que não é totalmente preciso. Não podemos escrever programas HTML. 

HTML é usado apenas para marcar texto. É chamado de linguagem de marcação. E o que este does-- este markup-- nós usar tags em HTML e estes tags-- este markup-- semanticamente define a estrutura de uma página e faz com que o texto simples que existe entre as etiquetas para serem interpretados por navegadores de maneiras diferentes. E talvez seja melhor para explicar Desta forma, por de uma ilustração. 

Aqui está uma página HTML muito simples, não um programa de HTML, novamente, uma página HTML. E nós sabemos que é uma A página HTML, porque nós temos delimitada tudo com tags HTML. Então é isso que uma tag HTML parece. É entre colchetes. E repare no topo temos HTML e na parte inferior, depois que fizemos o que é aparentemente um monte de outras HTML, temos ângulo do suporte de barra HTML. Então que tipo de é o limite entre o que é HTML eo que não é. E, claro, convencionalmente, apenas como você escreveu todos os seus programas C com extensões ponto C, todos os seus arquivos HTML vai acabar com extensões HTML ponto. Mas há mais acontecendo aqui. Nós não apenas temos estas tags HTML. Nós aparentemente têm este coisa chamada uma marca de cabeça. Bem, OK, o que é isso? 

Bem, talvez é melhor distinguir por meio de um corpo, corpo sendo o conteúdo da página web. Então, talvez a marca de cabeça define stuff que não está na janela do navegador próprio, mas é de alguma forma importante para o nosso A página web que está sendo processado corretamente. Por exemplo, no interior da tag cabeça temos tags de título. 

Então título sendo Olá mundo, que realmente vai ser o que mostra-se na aba no Chrome ou no safari ou Firefox-- o que quer que você prefer-- navegador que é o que vai aparecer no título. E antes que ele iria mostrar tabs em sua janela do browser e você só pode ter uma página abrir em uma janela do navegador em um momento. Então isso vai ser o título da minha página na aba ou a barra de janela do navegador, Olá mundo. E, em seguida, o conteúdo do meu A página web será mundial, Olá. Então, vamos dar uma olhada no que alguns coisa como isto pode parecer. Esta é uma página HTML muito simples. Então, eu estou aqui no meu IDE e CS50 Eu ampliada um pouco. E eu estou indo só para abrir Olá dot HTML e mostrar-lhe que isso é muito bonito o conteúdo da página que vimos antes. Minhas tags HTML, cabeça simples, tags de título, corpo e assim por diante. Eu tenho recuado para ser limpo. 

E então o que posso fazer na minha IDE é apenas visualizar a página. E lá vamos nós. O conteúdo da página é meu mundo, Olá, e eu não vejo nada in a partir das tags cabeça lá. É apenas o conteúdo do corpo. Mundo, Olá. E mais uma vez o corpo apenas disse, mundo, Olá. A outra parte está em falta. 

Então, isso é realmente tudo o que é. Esta é uma página HTML básico muito simples. Agora eu tenho minha recuado para HTML ser muito bom e organizado, mas eu realmente não precisa. Eu poderia fazê-lo parecer muito feio. E isso ainda iria funcionar. Esta seria a mesma página da web exato. Acabei de se livrado todo o espaço em branco. 

Como se constata, o espaço em branco é de dados. E assim, quando estamos enviando dados de emissor para o receptor, a partir do servidor para o cliente, os dados custa dinheiro. E assim se livrar de espaços em branco é realmente uma boa idéia se você é alguém que serve uma grande quantidade de conteúdo da web. É uma má idéia se você estiver alguém que está aprendendo este material e você quer ter -lo muito bem organizado. Isto é muito mais fácil de analisar do que isso. Mas é funcionalmente idêntico. 

O recuo e coisas assim na verdade, não importa em HTML. Tudo o que importa é marcas de abertura e fechando as tags na ordem correta. Observe o que aconteceu aqui, no entanto. A marcação nos dá uma maneira de comunicar informação extra sobre o que você escreveu. A parte Olá, mundo foi interpretado como o título. E o mundo, Olá parte foi interpretado como o conteúdo ou o que deveria ser visível na minha página web. 

Existem mais de 100 destes diferentes tags e lotes de grandes recursos online para encontrá-los. Nós vamos falar sobre um alguns deles neste vídeo, alguns do material realmente fundamental. Mas não vamos falar sobre tudo porque seria exaustiva a fazê-lo. 

Outra coisa que você pode fazer, porém, é abrir ferramentas para desenvolvedores. E se você se lembra de nosso vídeo em HTTP, Expliquei como abrir se ferramentas para desenvolvedores. No Chrome é geralmente a tecla F12 para abrir a barra de ferramentas do desenvolvedor. Em seguida, em vez de escolher a rede guia, você pode escolher o separador Elementos. E se você carregar uma web página, você vai realmente ver o HTML que cria a página web. E assim você pode aprender muito sobre HTML vendo os seus sites favoritos e vendo como eles constroem a várias peças dos que você gosta. Então talvez haja este legal padrão ou algo parecido. Como eles fazem isso com HTML? Bem, você pode simplesmente abrir o seu desenvolvedor ferramentas e pairar sobre esse elemento e ver exatamente o que faz com que seja HTML. Então, isso é realmente um boa maneira de aprender HTML, e eu recomendo fortemente que você fazê-lo tanto para aprender HTML e também para aprender um pouco pouco sobre algumas das opções disponíveis para você em ferramentas de desenvolvimento, que certamente virá a calhar como você começar a fazer web mais intensiva programação. 

Então, vamos dar uma olhada em um par de tags HTML comuns. E nós vamos saltar e dar uma olhada em o que essas marcas também irá processar como por olhar para alguns arquivos na minha IDE. Então, aqui estão três marcas muito básicos para aprimorando o aspecto visual do texto. Há marcas B, I e U tags, tags. E, respectivamente, o que eles fazem é tornar o texto entre eles em negrito, itálico, sublinhado e. Então vamos ver o que isso ficaria como em uma página web real no meu IDE. 

Então, aqui no meu IDE Eu tenho um arquivo chamado BIU dot HTML. BIU dot HTML apenas a ser negrito, itálico, sublinhado. Eu vou abri-lo. 

E nós vamos ver que aqui eu temos este texto é Tag B negrito. Este texto é tags de E itálico. E este texto é U marcas sublinhado. O que é que isto vai parecer? Bem mais uma vez, tudo o que tenho fazer é passar por cima aqui para o meu navegador, o meu navegador de arquivos, clique em Preview, e isso é o que vem à tona. 

O texto entre a B Tag é de fato agora negrito. O texto entre o I Tag é de fato agora itálico. E o texto entre o U tags é realmente agora sublinhado. Então, isso é muito bom. Agora sabemos como fazer texto olhar um pouco mais extravagante ou desenhar ênfase a certas coisas. Outro par de tags comuns aqui são marcas de parágrafo, marcas P, e cabeçalho, que eu tenho rendido aqui como HX. 

Essas marcas P, estas tags de parágrafo, quebrar o seu texto em parágrafos. Não é suficiente apenas pressione Enter e deixar espaços, porque um computador está indo somente para fazer o que você diga a ele para fazer e ignora branco espaço para a maior parte. Portanto, não podemos simplesmente pressionar enter e esperamos que o nosso computador interpretar que queremos para iniciar um novo parágrafo. Nós temos que dizer muito explicitamente esta é um paragraph-- este é another-- colocando cada um em um conjunto de tags P. 

E também temos essas opções para H tags, essas tags de cabeçalho. Temos seis níveis diferentes de cabeçalhos, um, dois, três, quatro, cinco e seis, que são progressivamente maior e maior cabeçalhos. E eles ficam menores e cada vez menores e menores. Portanto, temos um cabeçalho de nível superior, uma segunda cabeçalho de nível, e assim por diante, e assim por diante. 

Vamos dar uma olhada em alguns talvez Marcas P e algumas tags de cabeçalho na ação em uma página web. Então, aqui no meu IDE Eu tenho um arquivo chamado HTML ponto PH, PH sendo parágrafos e tags de cabeçalho. Abra isso. Há muita coisa acontecendo aqui porque eu coloquei alguns lorem ipsum, apenas algum texto aleatório aqui. Então, eu vou reduzir um pouco porque há tanta coisa acontecendo. Mas observe que eu tenho no próprio top aqui eu tenho um H1, um nível um, tag de cabeçalho. Então eu tenho um parágrafo, que é apenas um bando de aleatório lorem texto-- ipsum-- apenas o padrão de enchimento padrão em texto. Então, eu tenho dois parágrafos dentro desse um cabeçalho de nível e, em seguida, para baixo abaixo I tem um cabeçalho de nível dois aqui na linha 24, um segundo nível de cabeçalho, e outros dois parágrafos. Bem, o que faz este olhar como se eu vê-lo na minha pré-visualização? Vamos ver. 

Então, observe que o primeiro cabeçalho nível aqui é na verdade um pouco maior do que o segundo nível de cabeçalho. Então nós usamos tags H1. E note que as tags P permitem-nos para quebrar as coisas em parágrafos. Se tivéssemos se livrado dessas marcas P e, na verdade, basta colocar Entra e Devoluções entre o que esperávamos que ser diferentes números, todos iriam apenas bater juntos e ele não teria esse parágrafo agradável separação com o espaço acima e abaixo. E é isso que n etiquetas e tags de cabeçalho são comumente usados ​​para fazer desenhar atenção para partes de nossa página web dessa forma. 

Em seguida estão algumas tags que usamos para construir listas em nossa página web. Portanto, temos não ordenada lists-- ULs-- que são apenas listas com marcadores, ordenados lista que estão numbered-- OLs-- e dentro de uma das um daqueles que precisamos ter conjuntos de como indicar itens de lista, LI. E assim temos aberto tag UL e nós colocamos itens dentro dela. E então, quando estamos a fazer com que, podemos fechar a marca UL. 

E da mesma forma que podemos ter uma lista ordenada ou numerada e colocar os itens da lista dentro disso. Então, vamos dar uma olhada em um par de listas eo que eles iriam renda como em CS50 IDE. Então, eu tenho aqui na minha IDE um arquivo chamado listas dot HTML. Vamos dar uma olhada. 

E notem aqui eu tenho uma desordenada lista com cinco coisas nele. E então eu tenho uma lista ordenada, e Eu mudei a marca um pouco, certo? Eu já disse início é igual a seis. Acontece com uma lista Eu pedi pode definir o ponto de partida onde quer Eu want-- por padrão, ele será um-- apenas adicionando esta chamada atributo na minha tag OL. E assim esta lista será começar a contar às seis. Assim, os elementos dessa lista numerada deve ser de seis, sete, oito, nove, dez, porque existem cinco elementos na lista, em oposição a um, dois, três, quatro, cinco, que seria o caso se eu tivesse dito OL sem especificar o atributo de início. 

Então vamos visualizar isso para que você pode obter um sentido para o que está acontecendo aqui. E lá vamos nós. Não é a minha lista. Os primeiros elementos são cinco listas desordenadas ou com marcadores. E os próximos cinco elementos são uma lista ordenada separado a partir de seis. Então é assim que pudermos construir listas usando HTML. Outra coisa que você pode querem fazer com HTML é construir uma tabela de informações de linhas e colunas para apresentar a informação em uma particularmente organizada caminho. Para fazer isso com HTML, podemos ter uma definição de tabela começando suporte aberto mesa. E, em seguida, dentro desse quadro que pode ter um conjunto de linhas, tags TR para indicar cada linha. E então as tags TD ir para dentro de tags de TR para especificar uma coluna dentro de uma linha. 

Por que é chamado TD e não TC? Bem, TD representa dados da tabela. Normalmente, você está colocando sua informação lá. Então é por isso que é TD e não TC. É um pouco confuso. 

Então você tem marcas de tabela e dentro de suas tags de mesa você tem um número de linhas, TRs. E dentro de cada linha que você tem TDS para o número de colunas que você quer ter nessa linha particular. Vamos dar uma olhada em um muito tabela simples sobre em CS50 IDE. 

Então, eu tenho aqui um arquivo chamada tabela de pontos HTML. Vamos dar uma olhada o que parece. Há muita coisa acontecendo aqui, mas se você notar que eu tenho uma tabela aberta. Estou começando com a definição de tabela. E então, em minha primeira linha I aparentemente tem quatro colunas, um, dois, três, quatro. E então eu estou feito com essa linha. 

Então eu começo outra linha e fazer dois, quatro, seis, oito. Termine essa linha. Faça outra linha, três, seis, nove, 12. E então uma última linha, quatro, oito, 12, e que seja um pouco de cortar aqui, 16. 

Eu terminei essa linha. Eu terminei a mesa. E então eu estou feito com meu HTML. O que isso se parece? Bem, não é realmente muito para ver. Eu claramente organizado minhas informações de uma forma um pouco mais organizado. Mas não é super bonita aqui. E nós estamos indo para lidar com que, quando falamos de CSS. Vamos rever essa idéia de o que podemos fazer para tornar um mesa-- talvez formatá-lo um pouco melhor? Mas eu ainda tenho quatro linhas, cada um dos quais tem quatro colunas, e realmente o que isso equivale a uma muito simples quatro por quatro multiplicação mesa. 

Só mais algumas marcas que vamos falar. Vamos falar sobre o conceito de um formulário HTML. Então você pode ter visto isso no contexto de login em uma página da web. Normalmente você digitar seu nome de usuário. Você digita sua senha, e você está pronto para ir. Isso seria o início de um formulário. 

Pulando Div um segundo. Nós também temos as entradas que tipo de caber dentro de formas. Estes são os elementos que na verdade você está digitando em, ou os botões de rádio que você está assinalando, ou o cheque caixas que você está passando ao largo. Então, essas ir para dentro de formas. E eles compreendem, basicamente, cada linha do formulário se o formulário está formatado bem. Então há esse conceito de um div, que realmente não caber numa determinada categoria de tags como os que eu feito anteriormente. É apenas uma espécie de demarca o começando de alguns division-- arbitrária div-- da página. Não há nenhuma ruptura visual. Não há nenhuma linha. Não é definido como um off pedaço separado automaticamente. Você teria que denominá-lo que maneira de fazer isso. 

É apenas uma espécie de diz que eu quero um pedaço de espaço na minha página web, e eu estou indo só para chamar que esta divisão de minha página. Nós podemos colocar coisas dentro de divs, e de fato, quando nós cabeça para IDE em um segundo, vamos ver que eu estou colocando minha formar dentro de uma div. 

Então, eu tenho aqui na minha IDE um arquivo chamado div forma dot HTML. Vamos abri-lo. Observe que, como eu disse, div é uma espécie de arbitrário. Certo? Realmente não significa nada. Então, eu tenho uma arbitrária primeira divisão da minha página. E, em seguida, em vez de outra div mais tarde, começando na linha oito, Eu tenho este formulário. E dentro do formulário Eu tenho um número de entradas, os campos do formulário. Então, eu tenho um campo cujo nome é A-- que realmente não significa nada agora-- certo que, aparentemente, leva o texto, um outro que toma uma senha, outro que é uma Radio botão, outra que é uma caixa de seleção, e outro que é um botão Enviar. Bem, o que faz isso tudo realmente se parece? Bem, vamos dar uma olhada. Vamos abri-lo na nossa janela de visualização. Observe que essa arbitrária primeiro division-- há nenhuma separação visual aqui. Ele realmente não fazer nada, certo? 

E então eu tenho a minha forma. E eu não fazer qualquer formatação especial. Então, a forma é apenas um grande linha de informações. Se eu tivesse formatado minha forma diferente, Eu poderia tê-lo linha por linha por linha. Mas eu não fazer qualquer estilo. Novamente, nós não estamos falando de CSS aqui. Nós estamos apenas falando de HTML. 

Bem, na minha forma de texto que posso type-- lembre-se que as formas de tipo de texto para que eu possa colocar o meu nome. E na minha senha I pode digitar minha senha. E porque esse campo é do tipo senha, você não sabe o que minha senha está. É todos os pontos. 

Eu também pode optar por marcar fora um botão de opção ou assinalar fora de uma caixa de seleção. Ou eu poderia enviar meu formulário. E eu não fiz nada, então quando eu enviar a minha forma, a página apenas refresca. Mas eu talvez pudesse configurar o meu Submit para fazer outra coisa. E vamos ver o que podemos fazer com em que um vídeo no futuro PHP. Mas isso cria uma muito formulário simples que nós pode usar para que os usuários interagem e enviar informações ao nosso site. 

Um último comentário antes de nós passar para algumas outras tags estão a dar uma olhada neste tag de entrada mais uma vez. Repare que eu tenho em destaque as extremidades da etiqueta no vermelho. Cada outra tag que vimos até agora tem teve um começo e um fim, uma abertura tag e uma tag de fechamento. 

Mas uma marca de entrada não. Não há nenhum texto que vai entre tags de entrada. Todas as informações nós estamos pretendendo transmitir está ligada como parte do atributos desse insumo. Observe temos o nome de entrada é igual a x. Tipo iguala y. Isso é realmente tudo o informações que precisamos. 

Isso é chamado de tag de fecho automático. Ela não requer uma abertura e um perto, porque todas as informações está contida no interior da tag e seus atributos. Então, às vezes você vai ver isso também. Então, basta estar ciente de que se você tem um tag que é totalmente auto-suficiente, ele abre e fecha-se com o suporte de ângulo aberto na esquerda e o ângulo de corte suporte do lado direito. Vamos ver mais um daqueles agora com tags de imagem também. 

Antes de falarmos sobre as imagens, nós Precisamos conversar sobre hyperlinks. Se queremos que a nossa página web para ser interativa e mover-se em torno de nós, seria bom ser capaz a clicar em um desses o que tem sido tipicamente um link azul. Esta é realmente a forma como construímos um hiperlink em nossa página web. E, curiosamente há uma outra tag HTML chamado de link, que não é um hiperlink. Um aqui insere uma âncora, e é assim que indicam um hiperlink. 

Um href é igual x meios ir para página web X. E tudo entre o aberto Uma tag ea estreita A tag é o que vai ser que sublinhou texto azul que se parece com um link que estamos familiarizados. Abaixo disso temos uma tag de imagem, que é uma auto fechamento tag para exibir uma imagem localizada em X. E você pode ser capaz de mudar aquela imagem especificando largura e altura e outros atributos que dot dot dot lá. 

Na parte inferior aqui temos um muito interessante olhando tag que não faz ter uma tag de fechamento. É exclamação HTML ponto doctype. Então HTML tem sido em torno desde o início de 1990 para a construção de páginas web, e ele se foi submetido várias revisões desde então. Mais recentemente, em 2014 ele foi submetido a uma revisão chamado HTML5, que agora é a corrente tipo de padrão de facto HTML. 

Para indicar que a nossa web páginas são escritas usando HTML5, isto é como nós começar. Ele pode ser omitido, mas o que, basicamente, meios é que você não pode usar qualquer uma das marcas que são tags HTML5, essas novas tags. Então, nós sempre começar se estamos usando HTML5. E todas as marcas nós já conversamos sobre anteriormente não são tags HTML5. Mas isso indica que Tags de HTML5 estará presente. E por isso temos de exclamação doctype HTML, que é logo no início da nossa Arquivo HTML, e em seguida, depois desse ponto nós realmente temos o nosso HTML aberto marcar e proceder a partir daí. 

A última é uma tag de comentário, que parece um pouco diferente, também. Ela começa com ângulo suporte de exclamação traço traço, mas não colchete de fechamento. Entre esses dois elementos lá é onde você escrever seus comentários. E vamos dar uma olhada em imagens e comentários e links em CS50 IDE. 

Então, eu tenho aqui um arquivo chamado link de imagem dot HTML que eu vou abrir. E repare que eu tenho um par de comenta aqui em meus comentários HTML. Assim como em C e outro linguagens de programação, HTML apenas por ser uma linguagem de marcação tem a capacidade de ter comentários. E por isso estou aparentemente, vai colocar uma foto de Rick Astley algures entre esta div tag, essa divisão arbitrária. Aparentemente, esse arquivo é localizado no Rick ponto JPEG, que se dirigir de volta para minha árvore de arquivos para um segundo, é um arquivo que existe em o diretório atual. Então, isso é OK. Eu posso fazer referência a ela. 

Então eu posso ter ligações internas. Então, observe na linha 11 aqui meu href é Olá dot HTML. De modo que apenas se refere a Olá dot HTML que existe no diretório atual. E eu também pode ter externo ligações por apenas especificando HTTPS para indicar que eu não estou falando sobre um arquivo no meu diretório atual. Eu estou falando sobre um arquivo que existe em algum lugar na internet, o que eu tenho para solicitar, utilizando o protocolo HTTP. 

Então, vamos dar uma olhada no que Nesta página pode parecer e prepare-se para uma imagem de Rick Astley para aparecer na sua tela. Então, eu vou visualizar isso. Há Rick Astley no muito superior neste arbitrária divisão de eu colocá-lo no topo. E, em seguida, para baixo abaixo I tenho minhas ligações, certo? 

Eu tenho um link para Olá dot HTML. E se eu clicar em que, eu recebo transferida para esta página que estamos muito familiarizados com a partir de o início do nosso programa. Se eu aparecer essa página aberta novamente, se eu pop link de imagem abrir mais uma vez, Eu também pode ir externamente para o site do CS50. E lá nós see-- eu vou zoom out um pouco aqui-- vamos ver do CS50 tipo de website incorporado no meio de nossa página. Então, eu era capaz de fazer um interno vincular, bem como um link externo. 

A última regra com HTML que vamos falar aqui é que o HTML deve ser bem formado. Em C, falamos muito sobre a sintaxe de várias coisas. Em HTML a sintaxe realmente gira em torno de tags. Cada tag você abre precisa ser fechado. E, de fato, cada tag você abre devem ser fechados pela ordem inversa. 

Então, se você abrir uma etiqueta em negrito, itálico uma tag, e então uma tag sublinhado para fazer todos os três para um especial conjunto de texto, você deve fechá-los em ordem inversa. Então, se você abriu corajoso, itálico, sublinhado, você quer encerrar sublinhado, itálico, negrito. Este tipo de encapsulamento é o que mantém HTML agradável e organizado. 

Ao contrário de C, porém, erros de sintaxe não vai na verdade, prejudicar o seu HTML, possivelmente. Seu HTML pode não ser bem formado, mas que ainda funcionam. E assim estes erros pode classificar de slide. É até você para realmente ser vigilante. Às vezes, eles vão falhar, mas às vezes você pode começar afastado com ele. 

Pode ser um realmente tarefa difícil, porém, manter o controle de quando você abriu uma tag, quando você fechou-a, especialmente como seu HTML arquivos ficar maior e maior. Você vai querer alguma ajuda. E há on-line ferramentas de validação que você pode usar para ter um olhar para o seu web página e ver se ele está bem formado HTML. E você deve definitivamente Dê uma olhada os e começar a usá-los como você começar a fazer algum trabalho com HTML, escrever em HTML, apenas para que você obtenha alguns bons hábitos sobre a organização o seu HTML em um bom caminho e bom estilo e certificando- que você não está fazendo qualquer coisa que poderia criar um erro de sintaxe que faria com que você um pouco de um problema no caminho. 

Eu sou Doug Lloyd. Este é CS50.