Seu primeiro arquivo .html

O esqueleto

Toda página, da mais simples à mais complicada, tem esta forma:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Marina Sales · desenvolvedora web</title>
  </head>
  <body>
    <h1>Marina Sales</h1>
    <p>Desenvolvedora web em formação, em Benjamin Constant.</p>
  </body>
</html>

Digite isso num editor de texto, salve como index.html e clique duas vezes no arquivo. É uma página. Sua. E é a página inicial do portfólio que este curso constrói.

O que cada linha faz

<!DOCTYPE html>: a primeira linha de toda página. Avisa o navegador de que isto é HTML moderno. Sem ela, ele entra num modo de compatibilidade com páginas dos anos 90 e desenha algumas coisas diferente.

<html lang="pt-BR">: envolve o documento inteiro. O lang diz o idioma, e isso não é enfeite: é o que faz um leitor de tela pronunciar "gestão" em português em vez de tentar ler como inglês.

<head>: informação sobre a página. Nada aqui aparece no corpo.

<body>: o que aparece na tela.

As duas meta que não se negocia

<meta charset="UTF-8" />

Diz que o arquivo usa a codificação que conhece acento, ç e til. Sem ela, "formação" vira "formação" na tela. Em português, isso aparece na primeira frase.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Diz ao celular para usar a largura real da tela. Sem ela, o navegador do celular finge ter 980 pixels de largura e mostra a página inteira encolhida - aquela em que você precisa dar zoom para ler qualquer coisa.

A pasta do portfólio

Antes de escrever mais uma linha, crie a pasta. O portfólio inteiro vai morar nela, e a organização de hoje evita a bagunça da aula 7:

meu-portfolio/
├── index.html
└── imagens/

Só isso, por enquanto. As outras cinco páginas nascem nas próximas aulas, e a pasta imagens/ fica vazia até a aula 7.

Duas regras que evitam problema quando o site sair do seu computador: nada de espaço e nada de acento em nome de arquivo ou de pasta. sobre.html, não Sobre Mim.html.

Um <head> de portfólio

O <head> da página inicial merece duas linhas a mais do que o esqueleto mínimo:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Marina Sales · desenvolvedora web</title>
  <meta
    name="description"
    content="Portfólio de Marina Sales, desenvolvedora web em formação em Benjamin Constant, no Alto Solimões."
  />
</head>

O <title> é o nome da aba e o link azul no resultado da busca. A description é a frase cinza embaixo dele. As duas juntas são o que a pessoa lê antes de decidir se clica: escrever "Portfólio" no <title> desperdiça as duas.

Tags: abrir e fechar

Uma tag marca onde uma coisa começa e onde termina:

<p>Este é um parágrafo.</p>

• <p> abre
• </p> fecha; a barra é o que marca o fim
• o texto no meio é o conteúdo

Tags podem estar dentro de outras, como caixas dentro de caixas:

<p>Trabalho com <strong>HTML e CSS</strong> desde 2026.</p>

E a ordem de fechar importa: quem abre por último, fecha primeiro.

<!-- Certo -->
<p>Trabalho com <strong>HTML</strong> desde 2026.</p>

<!-- Errado: o strong fecha depois do p -->
<p>Trabalho com <strong>HTML desde 2026.</p></strong>

Comentários

O que estiver entre <!-- e --> o navegador ignora:

<!-- Trocar o ano quando o segundo projeto entrar no ar. -->
<p>Desenvolvedora web em formação, em Benjamin Constant.</p>

Serve para deixar um recado para quem for mexer no arquivo depois: inclusive você, daqui a três meses.

No portfólio

O que fica pronto hoje:

• a pasta meu-portfolio/, com a subpasta imagens/ vazia;
• o arquivo index.html, com o esqueleto completo;
• lang="pt-BR", charset, viewport;
• <title> com seu nome e o que você faz;
• <meta name="description"> com uma frase sobre você;
• no <body>, um <h1> com seu nome e um <p> com a frase que você escreveu no exercício 4 da aula passada.

Abra no navegador. É feio: letra Times New Roman, fundo branco, tudo grudado à esquerda. Está certo assim - a aparência é o curso de CSS, e ela entra por cima disto sem mudar uma linha do que você escreveu hoje.

Exercícios

1. Crie a pasta meu-portfolio/ com index.html e imagens/, e abra a página no navegador.
2. Escreva o <title> no formato "Seu Nome · o que você faz" e confira a aba.
3. Escreva a <meta name="description"> em uma frase, com no máximo 155 caracteres. Conte.
4. Apague a linha do <meta charset="UTF-8">, escreva uma frase com acento e veja o que acontece. Depois devolva a linha.
5. Apague a linha do viewport, abra a página no celular e compare com o que você via antes. Depois devolva a linha.
6. Adicione um comentário no arquivo explicando algo que você vai precisar trocar depois - uma data, um número, um projeto que ainda não existe.

Referências

• Anatomia de um documento HTML - MDN - a estrutura básica, explicada linha a linha
• <meta charset> - MDN - todos os usos da tag meta
• HTML Basic - W3Schools - os elementos essenciais com editor ao lado