2. Estrutura básica de um documento HTML
Para criar um novo arquivo HTML, devem ser inseridas algumas tags que definem as seções e configurações básicas do documento. Você pode digitá-las uma vez, salvar o documento e recorrer a ele para copiar e colar essas linhas. Mas também pode fazer isso de uma forma bem mais simples.
No Visual Studio Code, inicie um novo arquivo (File/NewFile), salve o documento como sendo do tipo HTML (dentro da pasta cap2, com o nome ex2_l. html) e depois digite !. O editor vai apresentar um recurso que permite inserir um modelo de códigos no documento (Emmet Abbreviation), conforme ilustra a Figura 2.1. Pressione Tab ou Enter para que os comandos básicos de uma página HTML sejam inseridos, como mostra a Figura 2.2. Há outros “atalhos” para facilitar a digitação de códigos que serão vistos no decorrer do livro.
IMAGEM
Observe que na linha 2 é especificado o idioma da sua página. Troque o “en” (English) para “pt-br” (Português do Brasil). Definir corretamente o idioma do documento é importante por diversos aspectos, como permitir uma melhor pronúncia por um software de leitura de tela (para portadores de necessidades especiais) e indicar ao browser o dicionário a ser utilizado para a correção gramatical de textos digitados em campos de formulário.
IMAGEM
Outro detalhe sobre as tags HTMLé que elas geralmente são declaradas aos pares. Há <htpil> e </html>, <head> e </head>, <body> e </body>. As tags <head> e <body> definem as seções principais da página. Na seção de cabeçalho (head), foram inseridas três metatags e o título do documento que você pode alterar conforme o exemplo. O título define o texto a ser exibido em uma aba na barra superior do navegador. <neta charset=”utf-8″> já foi utilizada nos exemplos do Capítulo 1 e serve para definir a página de códigos do documento. A metatag <neta nane=”viewport” .. .> está relacionada ao processo de criação de páginas responsivas, ou seja, que respondem adequadamente aos diversos tipos de dispositivos utilizados pelos usuários, como computadores, tablets e smartphones. Já a metatag <neta http-equiv.. .> tem relação com os aspectos de compatibilidade entre navegadores.
