Your first web page · Sua primeira página web
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Esta página precisa de um navegador recente (com suporte a SharedArrayBuffer). Por favor, atualize Chrome, Edge, Firefox ou Safari para a versão mais recente.
English
Welcome to the web
- A web page is made with HTML.
- HTML is just text with tags around it.
- You write HTML here and watch it appear — nothing to install.
Português
Bem-vindo à web
- Uma página da web é feita com HTML.
- HTML é apenas texto com etiquetas ao redor dele.
- Você escreve HTML aqui e o vê aparecer — nada para instalar.
English
How this page works
- Type in the box, then press ▶ to see your page.
- Press ✓ Check to see if your task is correct.
- Stuck? Press 💡 for a hint. Press ↻ to start over.
- Read each step, then press Continue.
Português
Como esta página funciona
- Digite na caixa e pressione ▶ para ver sua página.
- Pressione ✓ Check para ver se sua tarefa está correta.
- Travado? Pressione 💡 para uma dica. Pressione ↻ para começar de novo.
- Leia cada etapa, depois pressione Continuar.
English
Tags wrap your words
- A tag is a word inside angle brackets, like
<p>. - Most tags come as a pair: an opening
<p>and a closing</p>. - A
<p>makes a paragraph — a block of text.
Português
Etiquetas envolvem suas palavras
- Uma etiqueta é uma palavra entre colchetes angulares, como
<p>. - A maioria das etiquetas vem em par: uma abertura
<p>e um fechamento</p>. - Um
<p>cria um parágrafo — um bloco de texto.
<p>Hello! This is my first web page.</p>
English
More than one paragraph
- Put each paragraph in its own pair of
<p>tags. - The browser shows them one after another, top to bottom.
Português
Mais de um parágrafo
- Coloque cada parágrafo em seu próprio par de etiquetas
<p>. - O navegador os exibe um após o outro, de cima para baixo.
<p>I am learning HTML.</p>
<p>This is fun.</p>
English
Common mistakes
- Tags go in angle brackets; the text you see goes between them.
- Most tags come in pairs, like
<p>...</p>.
Português
Erros comuns
- As etiquetas vão entre colchetes angulares; o texto que você vê fica entre elas.
- A maioria das etiquetas vem em pares, como
<p>...</p>.
English
Now you try
- Below are two small tasks. Type your HTML and press ▶ to see it.
- Press ✓ Check when you think it is right. You can try as many times as you like.
Português
Agora você tenta
- Abaixo estão duas pequenas tarefas. Digite seu HTML e pressione ▶ para vê-lo.
- Pressione ✓ Check quando achar que está certo. Você pode tentar quantas vezes quiser.
Explore · Explorar
HTML is a tree of nodes · HTML é uma árvore de nós
Tags nest inside tags — the browser builds a tree (the DOM). · Etiquetas aninhadas dentro de etiquetas — o navegador constrói uma árvore (o DOM).
Write a paragraph that says Hello, world! — type your text between the <p> and · e </p> tags. · Escreva um parágrafo que diga Olá, mundo! — digite seu texto entre as tags <p> e </p>.
Add a second paragraph below the first one. Make it say I made this. (Use a new pair of <p> … </p> tags.) · Adicione um segundo parágrafo abaixo do primeiro. Faça-o dizer Eu fiz isso. (Use um novo par de tags <p> … </p>.)