Fundamentos de HTML e primeira página

Do arquivo vazio ao primeiro site publicado

Aprenda como a web entrega páginas, prepare o ambiente de trabalho e crie uma página HTML completa com textos, links, listas e imagens.

Como usar este capítulo

Este capítulo foi pensada para quem nunca programou. Você vai escrever código desde a primeira unidade, mas sempre em passos curtos: digitar, salvar, abrir no navegador, observar e corrigir. O projeto que acompanha as quatro capítulos chama-se Caderno de Trilhas. Ele é apenas um exemplo; troque nomes, textos e cores para criar um site com assunto próprio.

Ao terminar cada prática, compare o resultado com a lista de verificação. Não copie blocos sem lê-los. Digitar ao menos uma vez ajuda a perceber onde começam e terminam as tags, como os atributos são escritos e por que a indentação facilita a leitura.

Objetivos de aprendizagem

• Explicar a função de HTML, CSS, navegador, servidor e endereço web.
• Criar e organizar arquivos de um site.
• Escrever a estrutura completa de um documento HTML.
• Usar títulos, parágrafos, ênfase, links, listas e imagens com significado correto.
• Corrigir erros simples de marcação e de caminhos de arquivos.
• Publicar uma primeira versão estática e conferir se ela funciona fora do computador.

Materiais necessários

• Um computador com Windows, macOS ou Linux.
• Um navegador atualizado.
• Um editor de texto simples ou um editor de código.
• Acesso à internet para instalar o editor e, no fim, publicar a página.

Sumário

**1. **Como uma página chega ao navegador

**2. **Organização de arquivos e nomes

**3. **Primeiro documento HTML

**4. **Elementos tags e atributos

**5. **Texto e hierarquia de títulos

**6. **Links e caminhos

**7. **Listas e caracteres especiais

**8. **Imagens acessíveis

**9. **Editor de código e ciclo de trabalho

**10. **Diagnóstico de erros

**11. **Primeira publicação

**12. **Projeto e avaliação

Unidade 1 Como uma página chega ao navegador

HTML é a linguagem de marcação usada para descrever o conteúdo e a estrutura de uma página web. Ela informa ao navegador que determinado trecho é um título, outro é um parágrafo, outro é um link e assim por diante. HTML não é uma linguagem de programação: não cria decisões ou cálculos por conta própria. Sua função principal é dar significado e organização ao documento.

Uma página comum reúne três tecnologias. HTML organiza o conteúdo. CSS controla aparência e layout. JavaScript pode acrescentar comportamento, como abrir um menu ou atualizar informações sem recarregar a página. Neste início, o foco é HTML. O navegador já possui estilos básicos, por isso uma página funciona mesmo antes de receber CSS.

Arquivo navegador e servidor

Um site estático é um conjunto de arquivos. O arquivo index.html costuma ser a página inicial; outras páginas podem se chamar sobre.html, contato.html ou qualquer nome válido. Imagens, folhas de estilo e outros recursos ficam em arquivos separados.

Quando você abre um HTML com dois cliques, o navegador lê o arquivo diretamente do computador. Quando visita um endereço na internet, ele pede o arquivo a um servidor. O servidor responde, o navegador interpreta a marcação e monta a página na tela.

Vocabulário inicial

**DICA: **Você não precisa decorar todos os termos. Use esta tabela como consulta e volte a ela quando uma palavra reaparecer.

Unidade 2 Organização de arquivos e nomes

Crie uma pasta chamada caderno-trilhas. Ela será a raiz do projeto, isto é, o ponto a partir do qual todos os caminhos internos serão organizados. Dentro dela, crie um arquivo chamado index.html.

Use nomes previsíveis. Letras minúsculas, números e hífens funcionam bem em diferentes sistemas operacionais e servidores. Evite espaços, acentos e sinais em nomes de arquivos de site. minha-foto.webp é uma escolha mais segura que Minha Foto Final!!.webp.

Extensões de arquivo

A extensão é a parte final do nome. Em index.html, a extensão é .html; em styles.css, é .css. Configure o sistema para mostrar extensões. Caso contrário, você pode criar sem perceber um arquivo chamado index.html.txt, que o navegador tratará como texto comum.

No Windows, abra o Explorador de Arquivos, escolha Exibir e ative Extensões de nomes de arquivos. No macOS, o Finder permite mostrar todas as extensões nas configurações avançadas. Em Linux, gerenciadores de arquivos costumam exibi-las por padrão.

Estrutura que será usada

PLAINTEXT

caderno-trilhas/
├── index.html
├── sobre.html
├── contato.html
├── blog/
├── css/
└── imagens/

Por enquanto, apenas index.html precisa existir. As outras pastas e páginas serão criadas conforme o volume avança. Planejar a estrutura evita arquivos soltos e reduz erros de caminho.

Unidade 3 Primeiro documento HTML

Abra index.html no editor e digite o documento abaixo. Salve o arquivo e abra-o no navegador.

HTML

<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Caderno de Trilhas</title>
  </head>
  <body>
    <h1>Caderno de Trilhas</h1>
    <p>Notas de caminhos, leituras e pequenos projetos.</p>
  </body>
</html>

O papel de cada linha

<!doctype html> informa que o documento usa HTML moderno. A tag <html> envolve o documento, e o atributo lang="pt-BR" identifica o idioma principal. Essa informação ajuda leitores de tela, ferramentas de tradução e mecanismos de busca.

<head> reúne dados sobre a página. Em geral, seu conteúdo não aparece dentro da área visível. A codificação utf-8 permite usar acentos e muitos outros caracteres. A meta viewport orienta o navegador a usar a largura real da tela, o que será necessário para o layout responsivo. <title> define o texto exibido na aba e usado ao salvar um favorito.

<body> contém o que aparece na página. Neste exemplo, há um título principal <h1> e um parágrafo <p>.

Visualizar e atualizar

Dê dois cliques em index.html ou arraste o arquivo para uma janela do navegador. Depois de alterar o código, salve e recarregue a página. O navegador não acompanha automaticamente um arquivo aberto dessa forma.

**ATENÇÃO: **Se a página mostrar o código em vez do resultado, confira se o arquivo termina realmente em .html. Se aparecer uma versão antiga, salve o arquivo e use Ctrl+F5 ou Cmd+Shift+R para forçar a atualização.

Unidade 4 Elementos tags e atributos

Um elemento HTML costuma ter tag de abertura, conteúdo e tag de fechamento.

HTML

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

<p> abre o elemento. Este é um parágrafo. é o conteúdo. </p> fecha o elemento. A barra diferencia a tag de fechamento.

Alguns elementos não envolvem conteúdo. Eles são chamados de elementos vazios. A imagem <img> e a quebra de linha <br> são exemplos. Em HTML moderno, não é necessário escrever uma barra antes do sinal final.

HTML

<img src="imagens/mapa.webp" alt="Mapa simplificado da trilha">
<br>

Atributos

Atributos acrescentam informações à tag de abertura. Em <html lang="pt-BR">, lang é o nome do atributo e pt-BR é o valor. Em um link, href define o destino.

HTML

<a href="https://developer.mozilla.org/pt-BR/">Consultar a MDN</a>

Use aspas ao redor dos valores. Elas evitam ambiguidades e tornam o código mais consistente.

Aninhamento

Elementos podem ficar dentro de outros elementos. Feche primeiro o elemento que foi aberto por último.

HTML

<p>Hoje li um texto <strong>muito útil</strong> sobre HTML.</p>

O código abaixo está incorreto porque as tags se cruzam.

HTML

<p>Hoje li um texto <strong>muito útil</p></strong>

Pense em caixas: a caixa interna precisa terminar antes da externa.

Indentação

Indentação é o recuo que mostra a hierarquia. O navegador normalmente ignora esses espaços, mas as pessoas dependem deles para ler e revisar o arquivo.

HTML

<main>
  <section>
    <h2>Notas recentes</h2>
    <p>Conteúdo da seção.</p>
  </section>
</main>

Use dois espaços por nível ou deixe o editor formatar o documento. O importante é manter um padrão.

Comentários

Comentários guardam lembretes no código e não aparecem na página.

HTML

<!-- Trocar este texto antes da publicação -->
<p>Texto provisório.</p>

Não coloque senhas, tokens ou informações privadas em comentários. Quem acessa a página pode abrir o código-fonte e lê-los.

Unidade 5 Texto e hierarquia de títulos

Títulos

HTML oferece seis níveis de título, de <h1> a <h6>. O número representa a posição na estrutura, não o tamanho visual. Use um <h1> que identifique o assunto principal e organize as seções com <h2>. Uma subseção dentro de um <h2> pode usar <h3>.

HTML

<h1>Caderno de Trilhas</h1>

<h2>Notas recentes</h2>
<h3>Trilha do Mirante</h3>

<h2>Leituras do mês</h2>

Evite escolher <h4> apenas porque ele parece menor. O tamanho será ajustado com CSS. Pular do <h1> direto para <h4> pode confundir quem navega por títulos com tecnologia assistiva.

Parágrafos e quebras

Cada ideia deve ficar em um <p>. Apertar Enter várias vezes no arquivo não cria parágrafos visíveis, porque o HTML trata sequências de espaços e quebras como um espaço comum.

HTML

<p>A saída começou cedo para evitar o calor.</p>
<p>O percurso foi curto e tinha sinalização.</p>

Use <br> para uma quebra que faça parte do conteúdo, como um endereço ou verso. Não use muitas tags <br> para criar espaço; CSS cuidará do espaçamento.

Importância e ênfase

<strong> marca conteúdo importante. <em> indica ênfase na leitura. Os navegadores costumam mostrar esses elementos em negrito e itálico, mas o valor principal é semântico.

HTML

<p><strong>Atenção:</strong> leve água suficiente.</p>
<p>O trecho final é <em>bem</em> mais inclinado.</p>

Para uma mudança apenas visual, use CSS em vez de escolher uma tag pelo aspecto.

Unidade 6 Links e caminhos

Links conectam páginas. O elemento <a> usa o atributo href para indicar o destino.

HTML

<a href="sobre.html">Conheça o projeto</a>

O texto do link deve explicar para onde ele leva. Conheça o projeto é melhor que clique aqui, principalmente para quem percorre uma lista de links com leitor de tela.

Links externos

Use o endereço completo para outro site.

HTML

<a href="https://www.w3.org/">Site do W3C</a>

Se você decidir abrir outra aba, acrescente target="_blank" e rel="noopener". Não abra novas abas sem motivo, pois esse comportamento pode surpreender.

HTML

<a href="https://www.w3.org/" target="_blank" rel="noopener">
  Site do W3C
</a>

Links internos

Um caminho relativo começa no arquivo atual. Se index.html e sobre.html estão na mesma pasta, basta usar o nome do destino.

HTML

<a href="sobre.html">Sobre</a>

Para acessar uma página dentro da pasta blog, inclua a pasta.

HTML

<a href="blog/index.html">Blog</a>

Dentro de blog/index.html, .. sobe um nível.

HTML

<a href="../sobre.html">Sobre</a>

Links para partes da página

Um id cria um destino interno. O href usa # seguido do mesmo valor.

HTML

<a href="#equipamentos">Ir para equipamentos</a>

<h2 id="equipamentos">Equipamentos</h2>

Cada id deve ser único na página. Use nomes curtos, sem espaços.

E mail e telefone

HTML

<a href="mailto:contato@example.com">Enviar e-mail</a>
<a href="tel:+5531999999999">Ligar</a>

Esses links chamam o aplicativo configurado no dispositivo. Exibir um e-mail publicamente também pode atrair mensagens automáticas; use apenas um endereço adequado para divulgação.

Unidade 7 Listas e caracteres especiais

Lista não ordenada

Use <ul> quando a ordem não muda o sentido. Cada item fica em <li>.

HTML

<h2>Itens para levar</h2>
<ul>
  <li>Água</li>
  <li>Protetor solar</li>
  <li>Mapa offline</li>
</ul>

Lista ordenada

Use <ol> quando existe sequência, prioridade ou classificação.

HTML

<h2>Antes de sair</h2>
<ol>
  <li>Confira a previsão do tempo.</li>
  <li>Avise alguém sobre o roteiro.</li>
  <li>Carregue o telefone.</li>
</ol>

Listas podem ser aninhadas, mas cada lista interna deve ficar dentro de um <li>.

HTML

<ul>
  <li>
    Equipamentos
    <ul>
      <li>Lanterna</li>
      <li>Bateria externa</li>
    </ul>
  </li>
</ul>

Lista de descrições

<dl> agrupa termos e descrições. O termo usa <dt> e a explicação usa <dd>.

HTML

<dl>
  <dt>Trilha circular</dt>
  <dd>Percurso que termina no mesmo ponto em que começou.</dd>
</dl>

Caracteres reservados

Alguns caracteres fazem parte da sintaxe do HTML. Para mostrar < como texto, use <. Para >, use >. Para &, use &.

HTML

<p>A tag &lt;p&gt; cria um parágrafo.</p>

O arquivo em UTF-8 aceita acentos diretamente. Não é necessário trocar letras acentuadas por entidades.

Unidade 8 Imagens acessíveis

Coloque o arquivo caminho.webp dentro de imagens. Depois use <img>.

HTML

<img
  src="imagens/caminho.webp"
  alt="Caminho de terra entre árvores altas"
  width="1200"
  height="800"
>

src localiza o arquivo. alt oferece uma alternativa textual. width e height informam a proporção e ajudam o navegador a reservar espaço antes do carregamento.

Como escrever o texto alternativo

Descreva a informação que a imagem acrescenta naquele contexto. Não comece com “imagem de”, pois a tecnologia assistiva já anuncia que se trata de uma imagem. Se a figura for apenas decorativa e não acrescentar informação, use alt="".

Figura e legenda

Use <figure> quando imagem e legenda formam uma unidade. <figcaption> guarda a legenda visível.

HTML

<figure>
  <img src="imagens/caminho.webp" alt="Caminho de terra entre árvores altas">
  <figcaption>Trecho inicial da Trilha do Mirante.</figcaption>
</figure>

Não repita no alt cada palavra da legenda. O texto alternativo descreve a imagem; a legenda acrescenta contexto.

Direitos de uso

Use imagens próprias, de banco com licença compatível ou fornecidas com autorização. Guarde a origem e as condições de uso. Encontrar uma imagem em um mecanismo de busca não concede permissão para republicá-la.

Unidade 9 Editor de código e ciclo de trabalho

Um editor de código mostra cores de sintaxe, números de linha, indentação automática e sugestões. O Visual Studio Code é gratuito e funciona nos principais sistemas. No Windows, a instalação para o usuário costuma ser suficiente e não exige privilégios de administrador.

Abra o editor, escolha Abrir Pasta e selecione caderno-trilhas. Trabalhar com a pasta inteira facilita a navegação entre arquivos e reduz o risco de salvar no lugar errado.

Um ciclo eficiente

**1. **Abra a pasta do projeto no editor.

**2. **Faça uma alteração pequena.

**3. **Salve o arquivo.

**4. **Recarregue a página no navegador.

**5. **Observe o resultado e, se houver erro, volte ao trecho alterado.

Alterações pequenas são mais fáceis de diagnosticar. Se você escrever cem linhas antes de testar, não saberá em qual delas o problema começou.

Atalhos úteis

Unidade 10 Diagnóstico de erros

Erros fazem parte do trabalho. A pergunta útil não é “por que nada funciona?”, mas “qual é a primeira diferença entre o que eu esperava e o que apareceu?”.

Página vazia ou arquivo errado

• Confirme que você abriu o index.html da pasta correta.
• Salve o arquivo.
• Procure texto fora de <body> ou uma tag mal fechada.
• Use Ctrl+F5 para evitar uma cópia em cache.

Texto sem hierarquia

Confira se os títulos usam <h1> e <h2>, e se os parágrafos usam <p>. Quebras no arquivo não substituem marcação.

Imagem quebrada

Verifique letra por letra. Muitos servidores diferenciam maiúsculas e minúsculas: Caminho.webp pode ser diferente de caminho.webp. Confirme também a extensão e a pasta.

Tag não fechada

Use a indentação para localizar elementos que começam, mas não terminam. O navegador tenta corrigir HTML inválido, porém o resultado pode ser diferente do esperado.

HTML

<!-- incorreto -->
<p>Uma frase <strong>importante.</p>

<!-- correto -->
<p>Uma frase <strong>importante</strong>.</p>

Validação

O aponta problemas de sintaxe e estrutura. Cole o código, envie o arquivo ou informe o endereço publicado. Trate cada mensagem pela primeira linha indicada; um erro inicial pode provocar vários avisos posteriores.

Unidade 11 Primeira publicação

Antes de publicar, confirme que a página funciona no computador e que todos os recursos estão dentro da pasta do projeto. Um serviço de hospedagem estática recebe esses arquivos e fornece um endereço público.

Opções para iniciantes

Neocities permite criar um site estático e gerenciar arquivos pelo navegador. GitHub Pages é útil quando você já usa Git e quer publicar a partir de um repositório. Outros provedores oferecem envio por painel ou implantação automatizada. Planos e limites mudam; confira as regras atuais antes de escolher.

Processo geral

**1. **Crie uma conta no serviço escolhido.

**2. **Abra o painel do site.

**3. **Envie index.html e as pastas necessárias.

**4. **Abra o endereço público.

**5. **Teste links e imagens novamente.

**ATENÇÃO: **Não envie arquivos com senhas, chaves de API, cópias de documentos pessoais ou comentários privados. Em um site estático, qualquer arquivo publicado pode ser baixado.

Diferenças entre computador e servidor

Um caminho pode funcionar localmente e falhar depois da publicação. Servidores costumam diferenciar maiúsculas e minúsculas. Também é comum esquecer de enviar uma imagem ou uma pasta CSS. Abra as ferramentas do navegador, consulte a aba Rede e procure respostas 404, que indicam recurso não encontrado.

Unidade 12 Projeto e avaliação

Prática guiada

Crie a primeira versão do Caderno de Trilhas ou de um site com tema próprio. O arquivo index.html deve conter:

• Estrutura completa com doctype idioma codificação viewport título e corpo.
• Um título principal e ao menos duas seções com <h2>.
• Dois parágrafos.
• Um link externo com texto descritivo.
• Uma lista ordenada ou não ordenada.
• Uma imagem local com texto alternativo e dimensões.
• Uma figura com legenda.
• Um comentário que ajude na manutenção e não contenha informação privada.

Código de referência

HTML

<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Caderno de Trilhas</title>
  </head>
  <body>
    <header>
      <h1>Caderno de Trilhas</h1>
      <p>Notas de caminhos, leituras e pequenos projetos.</p>
    </header>

    <main>
      <section>
        <h2>Notas recentes</h2>
        <p>Comecei este caderno para registrar o que aprendo em cada saída.</p>
        <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML">
          Consultar a referência de HTML
        </a>
      </section>

      <section>
        <h2>Antes de sair</h2>
        <ol>
          <li>Conferir o clima.</li>
          <li>Separar água.</li>
          <li>Salvar o mapa.</li>
        </ol>

        <figure>
          <img
            src="imagens/caminho.webp"
            alt="Caminho de terra entre árvores altas"
            width="1200"
            height="800"
          >
          <figcaption>Trecho inicial da Trilha do Mirante.</figcaption>
        </figure>
      </section>
    </main>
  </body>
</html>

Lista de verificação

• O arquivo se chama index.html e abre no navegador.
• O título da aba descreve a página.
• Há apenas um <h1> e os demais títulos seguem uma ordem lógica.
• Todas as tags que precisam de fechamento estão fechadas.
• O link abre o destino esperado.
• A imagem está dentro do projeto e continua visível depois da publicação.
• O alt comunica a informação útil.
• O validador não mostra erro estrutural importante.

Questões de revisão

**1. **Qual é a diferença entre HTML e CSS?

**2. **O que fica dentro de <head> e o que fica dentro de <body>?

**3. **Por que a extensão .html precisa estar correta?

**4. **Quando usar <ol> em vez de <ul>?

**5. **O que href e src indicam?

**6. **Por que o texto de um link deve descrever o destino?

**7. **Quando uma imagem deve usar alt=""?

**8. **O que .. significa em um caminho relativo?

Respostas comentadas

**1. **HTML estrutura e dá significado ao conteúdo; CSS controla apresentação e layout.

**2. **<head> reúne metadados e referências da página. <body> contém o que é apresentado como conteúdo.

**3. **Sem a extensão correta, o sistema ou servidor pode tratar o arquivo como outro tipo de documento.

**4. **Use <ol> quando a ordem importa e <ul> quando os itens não dependem de sequência.

**5. **href aponta o destino de um link; src aponta o arquivo incorporado, como uma imagem.

**6. **Um texto descritivo ajuda qualquer pessoa a prever o resultado do link e melhora a navegação por tecnologia assistiva.

**7. **Quando a imagem é decorativa e não acrescenta informação.

**8. **Significa subir um nível de pasta a partir do arquivo atual.

Referências técnicas

O arquivo completo

Referência do exemplo 01-projeto-exemplo, reproduzida aqui para que você possa conferir sem sair da página.

sobre.html

<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Apresentação do projeto de demonstração Caderno de Trilhas.">
    <title>Sobre o projeto | Caderno de Trilhas</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <a class="pular" href="#conteudo">Pular para o conteúdo</a>
    <header>
      <p class="marca"><a href="index.html">Caderno de Trilhas</a></p>
      <nav aria-label="Navegação principal">
        <a href="index.html">Início</a><a href="blog/index.html">Blog</a>
        <a href="sobre.html" aria-current="page">Sobre</a><a href="curriculo.html">Currículo</a>
        <a href="contato.html">Contato</a><a href="divertido.html">Divertido</a>
      </nav>
    </header>
    <main id="conteudo">
      <h1>Sobre o projeto</h1>
      <p>O Caderno de Trilhas reúne anotações de estudo e roteiros de passeios. Todo o conteúdo desta pasta é fictício e serve para praticar HTML e CSS.</p>
      <h2>O que você encontra aqui</h2>
      <ul><li>Artigos curtos</li><li>Listas de preparação</li><li>Registros de aprendizado</li></ul>
    </main>
    <footer><p>Conteúdo de demonstração.</p></footer>
  </body>
</html>

versao-php/index.php

<!doctype html>
<html lang="pt-BR">
  <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Caderno de Trilhas em PHP</title><link rel="stylesheet" href="/css/styles.css"></head>
  <body><a class="pular" href="#conteudo">Pular para o conteúdo</a><?php require __DIR__ . '/includes/cabecalho.php'; ?>
    <main id="conteudo"><h1>Caderno de Trilhas em PHP</h1><p>Esta página reutiliza navegação e rodapé com arquivos include.</p></main>
    <?php require __DIR__ . '/includes/rodape.php'; ?>
  </body>
</html>