Avançando no HTML5 – Parte 2

Agora que você já viu como começar a criar suas próprias páginas, tá na hora de entender que algumas configurações são necessárias para que nada dê errado.

Cenas do último episódio

Vimos na última postagem o básico sobre as tags do HTML5. Agora vamos dar uma olhada nos próximos passos da linguagem. A estrutura completa e um pouco de semântica.

Botando a mão na massa (da casa)

Para mostrar melhor isso, irei mudar para o Visual Studio Code (ou VS Code, como chamarei). Um programa gratuito da Microsoft que facilita a digitação de vários tipos de código, inclusive os que envolvem HTML. Você pode querer testar outras ferramentas como Sublime Text e Atom. E ainda, se quiser, você pode continuar no Bloco de Notas, mas perderá muitas facilidades que programas mais avançados apresentam.

Vamos começar abrindo o arquivo html que criamos mais cedo, mas dessa vez no VS Code. Para isso, abra o programa e clique em “Abrir pasta” ou “Abrir Arquivo” (“Open Folder” e “Open File”, respectivamente ). A opção de abrir pasta é o ideal, mas somente se o(s) arquivo(s) do projeto estiverem sozinhos em uma pasta para eles (que é o recomendado).

A vantagem de editores de código mais modernos

Seguindo em frente, irei criar o esqueleto de um html, e aqui é muito simples:

Comece digitando html. Abrirá uma janelinha que irá nos ajudar a escrever, oferecendo opções de auto-completar as tags. O que queremos aqui é a opção da lista ‘html:5’. Termine de escrever e aperte Enter ou clique na opção da janelinha.

Muita coisa apareceu não é mesmo, vamos aos poucos.

HTML5 pra valer

Começando pela tag DOCTYPE:

<!DOCTYPE html>

Esta tag serve para dizer para o navegador qual é a versão do HTML que você está usando para acessar. Como estamos usando o HTML5, a versão mais recente, podemos apenas escrever ‘html’ após o nome da tag. Em outras versões você precisaria explicitar muitas outras informações como o exemplo abaixo, que se refere a versão 4:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Mas você não precisa entender o que todos esses textos significam se não estiver trabalhando com estas versões, e não recomendo usá-las em projetos que estejam começando agora.

A próxima tag é a html. Ela irá dizer ao navegador que de fato estamos trabalhando com HTML. Um navegador é capaz de abrir arquivos diversos, como PDF, arquivos de imagem e etc. Isso irá fazer a diferenciação para ele.

Podemos ver aqui um atributo lang que significa language ou Linguagem. Essa é a nossa língua de fala mesmo, o valor atual “en” se refere a English, ou Inglês, em inglês mesmo. Mude para “pt-BR” para avisar ao navegador que os textos dentro desse arquivo estarão em Português do Brasil.

<!DOCTYPE html>
<html lang="pt-BR">
<!-- ... -->
</html>

Em seguida vemos que tem várias tags dentro de uma tag head (cabeça, em inglês).

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
<!-- ... -->
</html>

A tag head serve para agrupar outras tags que não tem efeito visual na página em si mas que auxiliam em configurações e nas comunicações com navegadores e robôs de buscadores, como o Google e etc. E algumas delas já estão aparecendo em seu código agora.

A seguinte tag é a meta e veja como os atributos dela mudam a cada uso, aqui temos 2 usos dela e ambas executam funções diferentes. Nesse momento irei falar apenas da primeira, que tem o atributo charset.

Esse atributo indica qual conjunto de caracteres será usado no seu projeto, o UTF-8 é um padrão que tenta unificar vários idiomas e que permite por exemplo, usarmos acentos sem medo. Se você já se deparou alguma vez com um site que trocava as letras acentuadas de uma palavra por várias letras e símbolos estranhos, esse site provavelmente usava um charset que não suportava certos caracteres do Português.

A tag meta com o atributo name igual a viewport define o tamanho de tela que o navegador deve usar para colocar o conteúdo. No caso, definindo para ser a largura da tela.

Eu menti, quer dizer, mais ou menos

Lembra que eu disse que essas tags não tem efeito visual na página em si? Pois bem, essa tag title tem sim efeito visual, mas nas abas do navegador. Antes de continuar abra esse arquivo no seu navegador. Lá em cima, na aba, deve ter um escrito “Document”, certo? Volte no código, troque o texto dentro da tag title e escreva por exemplo “Meu primeiro site”. Salve o arquivo e atualize a página.

Você deve ver algo parecido com uma das duas abas desta imagem.

Por último, pelo menos por agora, a tag body. Tudo aquilo que escrevemos no último post entrará aqui. Body diz respeito ao corpo da página e todo conteúdo que será lido, visto e interagido por quem acessar essa página.

Coloque tudo aqui, tome cuidado para identar tudo corretamente, salve o arquivo e recarregue a página e VEJA QUE…

NADA MUDOU??? Como assim? Pois é, nada do que vimos aqui de fato vai mudar visualmente do que já havíamos feito anteriormente. Voltando naquela analogia da Casa, o que fizemos aqui foi criar uma boa fundação para que a casa não desmorone na primeira chuva. O código até o momento está assim:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Meu Primeiro Site</title>
  </head>
  <body>
    <img src="logo.png" alt="Logo da Empresa X" />

    <ul>
      <li><a href="tutorial.html">Página Inicial</a></li>
      <li><a href="sobre.html">Sobre Nós</a></li>
      <li><a href="contato.html">Contato</a></li>
    </ul>

    <img src="banner.png" alt="Banner da Empresa X" />

    <h1>Nossos Produtos:</h1>

    <p>
      Ipsum laborum ullamco proident ut dolor magna eu cupidatat pariatur Lorem
      deserunt tempor amet. Irure sint occaecat elit eu. Ut anim laboris ut
      nostrud do duis nulla mollit ea occaecat labore aliqua.
      <br />
      <strong>Nisi culpa incididunt non proident enim proident</strong> aute
      enim exercitation sint consectetur cillum. Voluptate commodo minim do
      mollit et occaecat reprehenderit et. Occaecat mollit nisi tempor dolore
      exercitation dolor occaecat.
    </p>
  </body>
</html>

Isso é tudo pessoal

Tudo bem, o arquivo está abrindo, as coisas estão funcionando (apesar de estar faltando as imagens). Mas eu tenho certeza que não é só a falta de imagens que está te incomodando. Poucas vezes você deve ter acessado um site recentemente que tenha o fundo branco e um texto nessa fonte padrão apenas jogado ou mesmo uma lista com essas bolinhas.

Pra melhorar isso, precisamos seguir para outra linguagem, o CSS (Cascade StyleSheets), ou, em português, Folha de Estilo em Cascatas.

Assim como HTML esta não é uma linguagem de programação em si, podendo ser referida como uma Linguagem de Estilização. Deste modo conseguiremos, escolher cores, tamanhos, espaçamentos, tipografias e muito mais.

Continuaremos o assunto no próxmo post desta série: Desembaraçando a Web: Dando Vida e Cor a sua página.