Visão geral do HTML

O Laboratório Belavista é um ateliê fictício de tipografia e cartaz em Recife. Neste volume você monta o site dele, volume a volume. Nada aqui é dado real de pessoa ou de empresa.

Abra a pasta 01-visao-geral-html. Leia o index.html, mude uma coisa, preveja o que o navegador vai mostrar, recarregue e confira. Esse ciclo se repete em todos os capítulos.

HTML (HyperText Markup Language) descreve a estrutura e o significado do conteúdo. CSS cuida da aparência. JavaScript, quando aparecer, cuida do comportamento. Nesta faixa você fica no HTML.

O que você vai aprender

• Distinguir tag, elemento e atributo.
• Aninhar elementos na ordem certa.
• Reconhecer elementos vazios (void) e conteúdo substituído.
• Abrir o exemplo 01 e conferir no navegador.
• Evitar o erro clássico da extensão .txt.

O que o HTML faz

Uma página é uma árvore de nós: elementos HTML e texto. Cada elemento marca um pedaço do conteúdo — parágrafo, título, lista, imagem, campo de formulário — para o navegador, para leitores de tela e, depois, para scripts.

O navegador não mostra as tags. Ele usa as tags para interpretar o conteúdo. Se você omitir tags importantes, o navegador tenta adivinhar. Às vezes acerta. Às vezes estraga a página.

Tag versus elemento

A tag é o trecho entre < e >, por exemplo <h1>. A tag de fechamento leva uma barra: </h1>.

O elemento é a abertura, o conteúdo (incluindo outros elementos) e o fechamento. Em <h1>Cartazes do mês</h1>, o elemento inteiro inclui o texto.

<p>No ateliê, tipografia e
  <strong><em>papel</em></strong>
  caminham juntos.</p>

Aqui em está dentro de strong, que está dentro de p. Feche na ordem inversa da abertura. Tags mal aninhadas confundem o navegador e quem mantém o código.

Elementos vazios e substituídos

Alguns elementos não têm conteúdo entre tags: são void (vazios). Exemplos: img, br, meta, input. Você escreve só a tag de abertura (com atributos). Não invente </img>.

Elementos substituídos viram um objeto na tela — imagem, controle de formulário. O visual padrão vem do sistema ou do arquivo embutido. O restante do HTML envolve texto e outros elementos (não substituídos).

Categorias que você vai ver

Ao longo do volume aparecem grupos úteis: metadados (head), seções (header, main, section), texto (p, h1…), ênfase em linha (strong, em), formulários, mídia (img, audio, video) e, mais adiante, componentes (template, slot).

Não precisa decorar a lista agora. Precisa abrir o arquivo, mudar uma palavra e ver o efeito.

Primeira página do Belavista

Erro comum: salvar como index.html.txt. O Windows esconde extensões; o navegador mostra o código como texto. Ative a exibição de extensões e confirme que o nome termina em .html.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laboratório Belavista — visão geral</title>
  </head>
  <body>
    <h1>Laboratório Belavista</h1>
    <p>Ateliê de tipografia e cartaz em Recife. Esta pasta é o exemplo do capítulo 01.</p>
    <p>Mude o texto deste parágrafo, salve e recarregue. Confira se a extensão do arquivo é <code>html</code>.</p>
  </body>
</html>

Mude o <title> para Belavista — teste. Salve. Recarregue. Só a aba deve mudar.

Arquivo no disco ≠ página na janela. Duplo clique usa file://. Servidor de estudo usa http://127.0.0.1 — ainda local, sem publicar. Não use 0.0.0.0.

Atividades

1. Qual a diferença entre a tag <h1> e o elemento que ela forma com o texto e o </h1>?
2. Por que fechar em antes de fechar strong no exemplo aninhado?
3. O que costuma acontecer se o arquivo se chama index.html.txt?

Respostas comentadas

1. A tag é só o marcador entre colchetes angulares. O elemento inclui abertura, conteúdo e fechamento (e filhos, se houver).
2. Porque a regra de aninhamento é fechar na ordem inversa. Abrir strong, abrir em, fechar em, fechar strong.
3. O navegador trata o conteúdo como texto puro. Renomeie até a extensão final ser html.

O arquivo completo

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

index.html

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pasta de estudo — Laboratório Belavista</title>
  </head>
  <body>
    <h1>Laboratório Belavista</h1>
    <p>Se você lê isto no navegador, o arquivo <code>index.html</code> está no lugar certo.</p>
    <p><strong>Erro comum:</strong> não deixe o nome virar <code>index.html.txt</code>.</p>
  </body>
</html>