Ao terminar esta aula, você vai conseguir
- Reconhecer a função de doctype, html, head e body
- Criar elementos com abertura, conteúdo e fechamento
- Salvar e conferir uma mudança no navegador
HTML é a linguagem de marcação que descreve a estrutura e o significado do conteúdo de uma página. Nesta aula, você vai criar um arquivo completo, abrir no navegador e comprovar uma mudança sem depender de ferramenta especial.
O nome técnico linguagem de marcação quer dizer que a gente envolve o
conteúdo com marcas chamadas elementos. Pense numa mudança de casa: cada
caixa recebe uma etiqueta como “livros” ou “cozinha”, então quem abre o caminhão
entende o papel de cada conteúdo. No HTML, <h1> etiqueta o título principal e
<p> etiqueta um parágrafo. A analogia termina aí: uma tag não é adesivo visual;
ela participa da árvore do documento e comunica significado ao navegador e a
tecnologias assistivas.
Monte o esqueleto antes de colocar o conteúdo
Crie um arquivo chamado index.html e escreva esta estrutura:
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu primeiro perfil</title>
</head>
<body>
<h1>Olá, eu sou a Bia</h1>
<p>Esta é a minha primeira página.</p>
</body>
</html>Abra o arquivo no navegador. Você deve ver o título grande, o parágrafo e “Meu
primeiro perfil” na aba. Esse resultado separa três responsabilidades. O
<!doctype html> ativa o modo moderno do HTML. O elemento html envolve o
documento e lang="pt-BR" informa o idioma. Dentro de head ficam metadados,
como codificação, escala em telas móveis e título da aba. Dentro de body fica
o conteúdo apresentado.
Leia um elemento por partes
Na linha <p>Esta é a minha primeira página.</p>, <p> é a tag de abertura,
o texto é o conteúdo e </p> é a tag de fechamento. O conjunto forma um
elemento. Já lang="pt-BR" é um atributo: uma informação adicional colocada
na abertura do elemento.
Elementos ficam aninhados, isto é, um dentro do outro. Imagine pastas: o
arquivo está dentro da pasta body, que está dentro da pasta html. A ordem de
fechamento precisa respeitar essa estrutura. Se você abre body dentro de
html, fecha body antes de fechar html.
Nem todo elemento tem fechamento. meta é um elemento vazio porque não envolve
conteúdo. Não transforme isso numa regra para adivinhar: consulte a referência
quando conhecer um elemento novo.
Faça uma mudança que você consegue provar
Troque o texto do h1, salve e atualize a página. Se nada mudou, confira três
coisas antes de reescrever tudo: você salvou o arquivo, está olhando a aba certa
e o arquivo termina em .html, não .html.txt. O navegador é literal; ele não
sabe qual versão você pretendia abrir.
Depois use o validador do W3C. Validação verifica se a marcação segue as regras da linguagem; não decide se o texto está bom nem se a página está bonita. Um documento pode ser válido e ainda ter conteúdo confuso. Nesta etapa, o critério é menor e objetivo: estrutura reconhecida, idioma declarado e mudança visível.
No laboratório, altere primeiro apenas o nome. Depois mude o texto acionado pelo botão. O JavaScript já está pronto para tornar o resultado observável; o foco continua sendo identificar quais elementos formam o conteúdo da página.
Você agora tem o recipiente correto. Na próxima aula, vamos organizar o que vai dentro dele com títulos, parágrafos e listas que formam uma hierarquia legível.
Laboratório ao vivo
Cartão de boas-vindas em HTML
Troque o nome e a profissão, execute o laboratório e confirme se o título da página e a mensagem do botão continuam coerentes.
Pare e pense
Em qual parte do documento fica o conteúdo que aparece na página?
O body reúne o conteúdo renderizado da página. O head guarda metadados e o doctype informa ao navegador que o documento segue o HTML moderno.
Faça sem copiar
Crie um arquivo perfil.html com título, nome e uma frase. O sucesso é abrir o arquivo, mudar a frase, atualizar a aba e enxergar exatamente a nova versão.
Fontes para consultar
Terminou a missão?
Marque apenas quando você conseguir explicar o conceito e concluir o desafio. O progresso fica salvo somente neste navegador.
Próxima: Conteúdo em HTML: títulos, parágrafos e listas →