Daven FARNHAM: Hoje, eu vou falar um pouco sobre HTML, HyperText Markup Language. Você vê HTML em toda parte estes dias. Na verdade, se você está assistindo a esta vídeo em um navegador, você está vendo HTML agora. HTML não é uma linguagem de programação, em vez disso, é uma linguagem de marcação utilizada pelo navegadores para processar páginas na internet. 

Então você pode perguntar, como exatamente está escrevendo uma página web em HTML diferente de escrever um programa em uma programação linguagem como C? Bem, C é uma língua com muito rigorosa regras sintáticas que precisa ser compilado antes que ele possa ser executado. Se você já esqueceu de incluir um ponto e vírgula no fim de uma instrução em seu código C, você sabe o que eu estou falando sobre em relação à sintaxe estrita. 

Os navegadores da Web, porém, são um pouco mais perdoando quando se trata de HTML. Mesmo que o seu HTML não é sintaticamente correta, sua página pode ainda ser exibida por um navegador, mas talvez Não olhe como você pretende. Por isso, é sempre melhor seguir as regras. A melhor maneira de ter uma intuição sobre como as coisas trabalho é passar por um exemplo. 

Então o que temos aqui é um básico modelo para uma página web. Você deve ter notado um monte de coisas entre colchetes angulares. Bem, essas são apenas as etiquetas. Marcações basicamente informar navegadores web que, hey, algo está vindo em sua direção. Lembre-se, sempre que você abrir uma tag, você precisa fechá-lo, uma vez que são feito usando. 

Assim, por exemplo, eu abro uma seção de código aberto com corpo do suporte, perto do suporte. Eu, então, adicionar algum texto, neste caso, o meu primeira página web, em seguida, quando fui para a fechar esta seção, eu uso quase uma tag idêntica só que desta vez com um de barra antes corpo. Em geral, este é o formato que você está vai usar sempre que você está abrindo e fechando tags. Juntos, uma tag de abertura e uma tag final compor o que é chamado um elemento. 

Se você olhar para a primeira linha, você vai ver um ponto de exclamação seguido por Html DOCTYPE. Isto é realmente apenas dizendo seu navegador que o arquivo é uma página da web escrito em HTML. A tag HTML diz essencialmente, Aí vem um pouco de HTML. Então nós temos uma marca de cabeça com um título de tag dentro dela. A marca de cabeça que você pode pensar como compreendendo código HTML que vem para a maior parte da sua página da web do conteúdo real. 

Em geral, você coloca o título do seu página web aqui, embora existam alguns outras marcas que podem aparecer aqui também. Em seguida, vem o corpo da sua página web, a carne real e os ossos do seu site. No nosso exemplo, nós acabamos de colocar uma simples sentença, minha primeira página Web, que, se corremos o nosso site, vai olhar um pouco algo como isto. Nossa página web não é muito estranho, mas não se preocupe. Vamos enfeitar-lo em breve. 

Então o código HTML acima, nós vamos dar-lhe um modelo básico para uma página web, Nada extravagante, apenas o esqueleto. Mas se eu estou criando uma página web, e se eu quiser adicionar um imagem de, digamos, eu mesmo? Bem, eu posso fazer isso. Há um par de maneiras de adicionar imagens para o seu site. Se a imagem estiver na mesma pasta que seu arquivo HTML, você pode ligar para o imagem via caminho assim. 

Você abre com uma tag de imagem seguido por no atributo Alt no fonte da imagem. O valor do atributo Alt é apenas um texto alternativo no caso de um usuário não pode ver a imagem. Alternativamente, você também pode ligar para o imagens através de um URL completo, como este. Agora, que o site realmente não existe, mas se houvesse uma imagem de me naquele endereço, eu poderia usar o URL de origem para incluir sua imagem no meu site. De qualquer maneira, você acaba com um muito site mais bonito, algo como isto. 

Bem, isso é muito legal, mas eu meio de querer algum texto aqui também. Então vamos acrescentar algo super simples acima do imagem, como o cabeçalho. Tudo o que eu fiz até agora é usar o cabeçalho tag, H1, e uma quebra de linha tag, br. A tag de cabeçalho torna a fonte um pouco pouco maior e mais proeminente. A tag de quebra de linha, por outro lado, é legal. Diferente da maioria das outras tags, você não tem uma tag de abertura e quebra de encerramento, apenas a mostrada acima. Isto porque pausa não tem conteúdo e é, portanto, um elemento vazio. 

Os elementos vazios como este, você pode abrir e perto ao mesmo tempo simplesmente por incluindo uma barra no fim da declaração inicial. Então agora o meu site parece um pouco algo como isto. Melhor, mas isso meio que se sente como um beco sem saída. Não há outro lugar para ir além desta página principal. Bem, vamos corrigir isso incluindo um link. 

O que eu vou fazer aqui é usar um atributo indicado por um e fazer o imagem um link para, digamos, CS50 TV. Dessa forma, sempre que alguém clica em mim, seu navegador será direcionado para outro, provavelmente mais útil, página web. Eu tive que diminuir o tamanho do texto um pouco, porque a nossa página web é ficando cada vez mais avançada. Mas espero que, ainda é clara. Meu site parece exatamente o mesmo só agora, sempre que eu clicar sobre a imagem, meu navegador vai abrir outro guia para a página web CS50.tv. 

Por último, vamos dizer que eu estou indo para o estilo este site mais tarde, usando CSS. CSS é o que é conhecido como um folhas de estilo em cascata. E, basicamente, fornece um eficiente maneira de editar e estilo blocos semelhantes de código. Eu quero começar a organizar meu HTML para tornar mais fácil para o estilo mais tarde. Aqui, montei dois tipos diferentes de identificadores para ajudar a organizar o meu código. Eu usei o atributo ID dentro de um divisão, ou tag div, e eu usei um Classe de atributo dentro outra tag div. 

Atributos id e class funcionam de forma semelhante. A única diferença é que você só pode ter um elemento, a identificação específica, mas qualquer número de elementos pode compartilhar uma classe. Assim, por exemplo, eu posso usar a classe imagem várias vezes, mas eu não posso criar outra divisão com a parte superior de identificação. Embora eu não tenha ido para CSS, outra língua de uso corrente ao lado de HTML, uma vez que eu começar styling meu código com CSS, eu posso usá-los atributos organizacionais à influência estética da minha página web. 

Tudo dentro da primeira divisão terá stylings similares ou qualquer outro grupo de grupo de HTML que na imagem de classe irão compartilhar um olhar similar. Isto é muito mais fácil do que tentar editar e as imagens ou blocos de estilo texto individualmente. 

Então fomos até o básico de como para fazer uma página web com HTML. HTML tem um monte de outros recursos também que, quando combinado com outros idiomas como CSS e JavaScript, pode realmente tornar as páginas se destacam. A melhor maneira de se sentir confortável com HTML é apenas para mexer com ele, ver o que funciona eo que não funciona. 

Meu nome é Daven Farnham. Este é CS50. 

Assim, por exemplo, eu posso usar a imagem da classe - Não, há tantos atributos. Meu nome é Daven Farnham. Este é CS 650. Eu quero dizer CSS. Este é CSS.