Vamos falar sobre escrever código limpo. Quando estou falando de código limpo, estou falando sobre aprender como escrever código que vai funcionar em tantos dispositivos quanto possível. Para fazer isso, você precisa saber um pouco sobre o modelo de objeto de documento, também chamado de DOM. Quando HTML5 foi desenvolvido o principal tipo de objetivo de condução é que eles querem manter o padrão. Que quaisquer novos recursos devem ser baseados em HTML, CSS, DOM e JavaScript, e você pode ter a chance de aprender sobre cada um deles. Mas eu quero falar sobre o DOM por um pouco, porque ele vai ajudar você a entender o HTML um pouco melhor. Uma das coisas sobre cientistas da computação geeky como eu é que nós amamos árvores. Não como árvores lá fora que são verdes e bonitas no outono. Gostamos de árvores matemáticas. Estas estruturas tipo árvore que podemos provar ser válidas ou inválidas. Então, quando falamos sobre HTML como uma árvore estamos falando sobre essa idéia de que na raiz da árvore vamos criar HTML. Então, daquela árvore quando dizemos : “Eu vou fazer um documento HTML.” Queremos peças. Queremos a cabeça aqui, e queremos o corpo. Na cabeça vamos manter todo esse tipo de informação que o usuário não vai ver na maioria das vezes. A diferença é que podemos falar sobre o título, mas vamos ter todo esse tipo de coisas escondidas com que ninguém se importa. No corpo é onde vamos aprender a colocar todos os nossos HTML cinco tags. Então vamos falar sobre HTML como uma árvore. Neste caso, estou mostrando a vocês esta idéia de que na raiz de cada página HTML deve ser o que é chamado de tag HTML. Esse tipo de coisa que diz, permite que o navegador saiba. Eu vou estar lhe dando certos tipos de etiquetas e aqui está como eu quero que eles funcionem. Se não olharmos para isso como uma imagem, também posso dizer que cada árvore tem três partes para um documento bem formado. O Doctype, que é a versão do HTML que você vai usar. A cabeça, que é todos os metadados ou tipo de informação extra, e o corpo. O corpo é o conteúdo exibível. A coisa que a maioria das pessoas vai ter de volta quando eles fazem o ciclo de resposta da solicitação. Então vamos falar do tipo médico. Você é tão sortudo. Quando eu estava criando páginas web no início e estávamos em HTML4, tivemos que chegar a todas essas maneiras diferentes para tipo de explicar se nosso HTML4 era padrões muito rigorosos ou se era de transição. Em HTML5, é muito simples dizer, “Não há apenas uma coisa e é chamada DOCTYPE HTML”, e você está pronto. Para a cabeça que está dentro da tag head, vamos ter todas essas informações adicionais usadas pelo navegador. Então, por exemplo, você pode querer dizer em que idioma você está criando sua página. Você também pode incluir, e você realmente quer incluir o que o título de suas páginas. Quando eu estou falando sobre o título eu não estou falando sobre grande tipo de cabeçalho que você vê. Estou falando da pequena coisa que você vê na aba do seu navegador. Mais tarde, talvez você queira adicionar arquivos de suporte também. Você pode querer ter arquivos CSS que vão estilizar sua página, ou JavaScript que pode adicionar em diferentes interações, ou realmente qualquer tipo de complementos que vai mudar a maneira como as pessoas visualizam e interagem com seu site. Além do título, os metadados não são exibidos, as pessoas não o verão. O que as pessoas veem é a informação que está na sua etiqueta corporal. Essa etiqueta de corpo é a maior parte da sua página. Portanto, é muito importante escrever um código bem formatado ou em árvore onde você está se certificando de que cada tag tem um fim. Que você não está colocando etiquetas em ordens estranhas. Então, a maior parte do conteúdo no corpo é exibido pelo navegador, mas de vez em quando há um pouco de metadados lá também. Mas não vamos fazer isso nesta aula. Então vamos olhar para um exemplo. Bem aqui, eu tenho um arquivo chamado template.html, e eu estou exibindo o código aqui na tela para você. Consegue encontrar as três partes de um documento bem formado? A primeira coisa que você quer procurar é o Doctype. Temos isso aqui mesmo. Informando que este é um documento HTML5. Nós então temos a tag HTML que era a raiz de nossa árvore realmente científica, e eu estou deixando as pessoas saberem que eu gostaria que o idioma que ele é exibido em fosse Inglês. Na seção principal temos os metadados. Onde ele está nos dizendo coisas como, “Ei, eu sei que há muitos teclados e maneiras diferentes em todo o mundo para representar letras. Quero que use o que se chama UTF-8.” Não se preocupe que use sempre. Em seguida, a próxima parte dos meus metadados é o título onde queremos vê-lo dizendo, “Minha Primeira Página”. É isso. São duas das três partes. A última parte é a tag body e está exibindo o conteúdo que queremos ver na tela. Então vamos ver isso em um navegador. O que eu tenho? Tenho o meu título aqui em cima, e o meu conteúdo exibível ali em baixo. Eu escrevi o código, o próximo passo que você sempre deve fazer é validar o código. Diga, “Eu escrevi um código que parece bom, mas eu sei que os navegadores são muito legais e eles fazem as coisas serem exibidas bem mesmo quando eu não escrevi um bom código.” Então, se você for para validator, que w3.org, você pode verificar qualquer site para ver se o código é válido e você tem três opções. Você pode carregar o URL, você pode fazer upload de um arquivo, ou você pode realmente copiar e colar seu código e colocá-lo lá dentro. Neste caso, eu coloquei o URL para template.HTML executar Check, e yay, não surpreendentemente porque eu sabia que eu ia gravar isso, ele verificou com sucesso. Não se preocupe com avisos. Avisos geralmente são para se cobrir. E se você quiser validar seu arquivo, mas seus arquivos ainda não estão na Internet? Vamos ver rapidamente um exemplo de como você pode fazer isso. Digamos que eu tenho meu arquivo template.HTML e eu quero verificá-lo. Quero te dizer que eu entrei e mudei o arquivo e coloquei um erro de digitação intencional. Escrevi a etiqueta de encerramento para o título incorretamente. Então vamos ver o que acontece. E se o navegador ou o validador pode encontrar isso. O que eu vou fazer é ir para validator.w3.org, e agora vou selecionar a terceira opção validar por entrada direta. Volto para o comando de arquivo A ou controle A, se você estiver em um PC Command C, copiei todo o código e agora quero colocá-lo no validador. Hit check, up, e se nós rolarmos para baixo eu posso fazer isso muito maior para você. Você pode ver que eu recebi dois erros. Por que recebi dois erros quando só digitei um erro? Bem, validadores nunca são perfeitos. Então o erro que ele encontrou é que ele disse, “Eu encontrei o final de um arquivo e eu não estava esperando isso.” Bem, a razão pela qual isso aconteceu é vamos verificar o erro número 2, ele nos diz, “Oh, você esqueceu de fechar a etiqueta de título.” Então, às vezes, um erro pode causar muitas mensagens de erro. Então não se preocupe. Vi até 50 ou 60 erros que, uma vez corrigido uma linha de código, corrigiu mais de 80 por cento desses erros. Então eu vou voltar para o meu código, eu vou corrigi-lo, colocar o título e salvá-lo. Copie de novo, coloque e eu vou verificar de novo. Desta vez a verificação completa sem erros. Então, apenas para revisar, você realmente quer seguir a estrutura DOM se você quiser uma página bem formada. Seguir essa estrutura significa que você sempre usa tags de início e fim. Além disso, você fecha as tags internas antes das externas. O que isso significa é que se você começar uma etiqueta de título você tem que terminá-la antes de terminar a etiqueta de corpo. Você também vai querer usar atributos válidos que é uma das coisas sobre as quais vamos falar um pouco mais tarde quando falamos sobre imagens e basicamente partes de sua página que precisam de informações extras. O problema com os navegadores é que eles realmente corrigem código ruim para você. Eu sempre os chamo de “Os pais de helicópteros da codificação”. É como, “Eu sei como você queria que fosse, então, é assim que eu vou fazer com que pareça na tela.” O problema é que nem sempre funciona para todos. Então, só porque seu site parece bom para você quando você está olhando para ele em seu navegador, não significa que ele está certo. Você tem que usar um validador para verificar seu código.