Sua primeira página HTML
Todo documento HTML compartilha o mesmo esqueleto pequeno: uma linha que declara o tipo de documento, um elemento raiz que envolve tudo, um head com informações sobre a página e um body com o conteúdo que as pessoas veem. Este capítulo desmonta esse esqueleto linha por linha e depois o salva em um arquivo que você pode abrir em um navegador.
O esqueleto do documento
Aqui está o esqueleto do qual cada página começa. Você pode copiá-lo exatamente e alterar as partes dentro do body:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Minha primeira página</title>
</head>
<body>
<h1>Olá</h1>
<p>Esta é minha primeira página web.</p>
</body>
</html>A primeira linha, <!DOCTYPE html>, diz ao navegador que esta é uma página HTML moderna. Depois vem o elemento raiz, <html>, que envolve todo o resto da página. Dentro dele ficam duas caixas: <head> para informações nos bastidores e <body> para as palavras e imagens que um visitante vê. Seu título e parágrafo ficam no body, porque essa é a parte em exibição.
Pense em tudo isso como uma encomenda etiquetada. O doctype é o selo que diz qual sistema postal usar, <html> é a caixa, o head é a etiqueta na parte externa e o body é o que está embalado dentro.
<!DOCTYPE html>, depois <html> envolvendo um <head> e um <body>. Copie-o como está e coloque suas próprias palavras no body. Você não precisa memorizá-lo ainda; você digitará o suficiente para que ele grude sozinho. O que vai no head versus no body
As duas caixas dentro de <html> têm trabalhos diferentes. O <head> contém coisas que o navegador precisa saber mas o visitante não lê na página. O <body> contém tudo que o visitante vê.
<head>
<title>Minhas notas de receita</title>
</head>
<body>
<h1>Bolo de banana</h1>
<p>Misture, despeje, asse por uma hora.</p>
</body>O <title> fica no head e é o nome da página: aparece na aba do navegador, não no meio da página. O título e o parágrafo ficam no body, para que apareçam na página em si. Uma regra simples para começar: se um visitante deve ler, vai no body.
<title> fica no head e nomeia a aba do navegador; seus títulos e parágrafos ficam no body onde as pessoas os leem. Se um visitante deve vê-lo, vai no body. Essa uma pergunta resolve quase tudo. Charset e viewport
Duas linhas a mais vão no head de praticamente toda página. Você pode copiá-las como está:
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Minha primeira página</title>
</head>A primeira linha diz ao navegador como ler seu texto para que letras acentuadas, aspas curvas e emoji saiam corretos em vez de se tornarem símbolos estranhos. A segunda linha diz ao navegador para encaixar a página na largura da tela, o que a torna legível em um telefone em vez de uma versão minúscula ampliada da página de desktop. Você não precisa entender cada palavra ainda. Coloque ambas perto do topo do head e suas páginas se comportarão bem.
Salvando e abrindo um arquivo .html
Uma página HTML é um arquivo de texto simples, então você pode fazer uma em qualquer editor de texto. A única coisa que importa é o nome: salve-o terminando em .html.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Minha primeira página</title>
</head>
<body>
<h1>Olá</h1>
<p>Esta é minha primeira página web.</p>
</body>
</html>Salve como index.html. Depois encontre o arquivo no seu computador e clique duas vezes nele: ele abre no seu navegador e mostra seu título e parágrafo. Não há servidor para iniciar e nada para instalar. A terminação .html é o sinal que diz ao seu computador para abri-lo como uma página web em vez de como um muro de código. Mude uma palavra, salve e atualize a aba do navegador para ver a atualização.
.html. Salve o seu como index.html, clique duas vezes nele e o navegador o abre imediatamente, sem nenhuma configuração. Para ver uma alteração, salve o arquivo e atualize a aba. Esse loop salve-e-atualize é todo o ritmo de construir uma página.