Hello, World!

Até agora, vimos bastante teoria e alguns exemplos, mas nenhuma página HTML completa. Nesse tutorial, vou criar a primeira página HTML completa e aconselho você a criar o mesmo exemplo também, sem copiar, digitando linha por linha. Começar com um Hello, World! é muito comum, é quase uma tradição na área de programação. Então, vamos começar também com um Hello, World!

Antes de mostrar o exemplo, é importante que você saiba que você vai precisar de um editor de código (pode ser um simples editor de texto também) ou de uma IDE para criar essa e as outras páginas dos exemplos que você vai ver nesses tutoriais.

Recomendo que você opte por uma ferramenta que não te ajude muito, que não fique te corrijindo quando você errar, para que você possa aprender com os seus erros e corriji-los sem ajuda. Isso é importante se você estiver iniciando. Vai fazer com que você fixe muito melhor o que você aprendeu. Se você concordar com isso, recomendo que você use o Notepad++ do Windows ou o gedit, do Gnome. Se você não quiser abrir mão dos recursos que te dão aquela ajudinha, recomendo usar o Sublime Text ou o Netbeans.

Agora, veja o Hello, World. Crie um arquivo com o conteúdo abaixo (novamente, recomendo que você digite ao invés de copiar) e salve com a extensão .html. Depois, abra o arquivo no seu navegador.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello, World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

Se você fez tudo corretamente, você deve ver uma página com um título na barra do navegador e um título na página:

Vou explicar resumidamente os elementos que foram usados para criar a página:

<!DOCTYPE html>: é importante lembrar que ele não é uma tag. Ele basicamente informa ao navegador qual versão do HTML deve ser usada. No caso, esse Doctype indica que deve ser usado o HTML5.
<html>: esse é o elemento raiz da página. Por isso, esse elemento é o primeiro da página e todos os elementos ficam dentro dele. Seus filhos (ou seja, os descendentes diretos) são os elementos <head> e <body>.
<head>: serve para especificar metadados da página, tais como o título e a descrição, e também serve para carregar recursos, como scripts e folhas de estilo. Elementos que ficam dentro do <head> não são visíveis para o usuário.
<body>: é onde ficam os elementos da página que ficam visíveis para o usuário.
<title>: contém o título da página, que é exibido na barra de título do navegador e na aba da página.
<meta charset="UTF-8">: especifica o character encoding da página. No caso, o character encoding definido foi o UTF-8. Ele virou um padrão nas páginas web por suas vantagens, e sempre deve ser usado.
<h1>: Define um heading para a página. Um heading pode ser um título ou subtítulo, dependendo do nível dele. No caso do <h1>, que é um heading de primeiro nível, é um título.

Observe que foram usados espaços no documento. Esses espaços não precisam ser usados dessa forma para que a página funcione corretamente. Eles só são usados dessa forma para indentar o documento. A indentação é uma forma de organizar os elementos de forma que a hierarquia deles fique clara, por meio do uso de espaços ou tabs. Isso tem tudo a ver com aninhamento. Elementos que estão em níveis mais profundos, ficam mais à direita porque são usados mais tabs/espaços na indentação.

Perceba que o elemento <html> não tem nenhum tab antes dele, porque é o elemento raiz. O Doctype está antes dele, mas ele é um caso à parte, e não contém nenhum elemento dentro dele. Depois, os elementos <head> e <body> tem um tab antes deles, porque pertencem ao <html>. Os elementos <meta> e <title> tem um tab a mais do que o <head> porque são seus filhos, e assim por diante...

Para indentar, é recomendado usar soft tabs. Eles são tabs que são convertidos para espaços quando você os digita. Eles são mais recomendados pelos guias de estilo. A maioria dos editores suporta soft tabs. Se o seu editor não suportar, sugiro que você troque de editor se você trabalhar com HTML profissionalmente. Também é recomendado configurar o seu tab para 2 espaços. Isso é configurado no editor e é importante ter um editor que permita essa configuração.

Como já falei, espaços só são inseridos por causa da indentação. Eles não são necessários para o funcionamento da página. O HTML reduz espaços extras a um espaço. Espaços incluem quaisquer caracteres que adicionem algum tipo de espaço na página: isso vale para tabs e quebras de linha também.

Deixe seu review