## 🏁 Objetivo
Construir a página web correta, criando uma estrutura básica de documento HTML. Essa estrutura é a espinha dorsal de toda página HTML e consiste em elementos essenciais que os navegadores precisam para renderizar seu conteúdo corretamente.

> Nota
>
> Não se deixe enganar pela aparente simplicidade do design da página web. Embora possa parecer simples, é essencial **manter a estrutura correta do documento**. Isso garante que o site mantenha a legibilidade e funcionalidade em todos os navegadores.

## 📋 Tarefa
Crie uma estrutura básica de documento HTML. Se você já sente confiança em suas capacidades, sinta-se à vontade para prosseguir sem o guia passo a passo. No entanto, caso deseje um pouco mais de orientação, está disponível um roteiro detalhado para ajudar você ao longo do caminho. <a 
href="#guide"
style="color: #ff8a00; font-weight: 600; text-decoration: none;"
onmouseover="this.style.color='#ff0000'"
onmouseout="this.style.color='#d27204'">Guia</a> / <a 
href="#challenge"
style="color: #ff8a00; font-weight: 600; text-decoration: none;"
onmouseover="this.style.color='#ff0000'"
onmouseout="this.style.color='#d27204'">Desafio</a>

## 📝 Step-by-Step Guide

### Step 1: Start the HTML Document
Begin by typing the HTML doctype declaration, which tells the browser that the document is written in HTML. The declaration should be the first line of your HTML document:
```html
<!DOCTYPE html>
```

### Passo 1: Inicie o documento HTML
Comece digitando a declaração doctype HTML, que informa ao navegador que o documento está escrito em HTML. A declaração deve ser a primeira linha do seu documento HTML:
```html
<!DOCTYPE html>
```

### Passo 3: Crie a seção head
Adicione as tags  `<head>` de abertura e fechamento dentro das tags HTML. A seção head contém metainformações sobre o documento HTML, como o título e links para folhas de estilo externas:
```html
<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
</html>
```

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj48L2h0bWw+

### Passo 5: crie a seção body
Após a seção `<head>`, adicione as tags `<body>` de abertura e fechamento. A seção body contém o conteúdo visível da página web:
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Webpage</title>
  </head>
  <body></body>
</html>
```

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD48L2hlYWQ+CjwvaHRtbD4=

PCEtLSBDcmVhdGUgdGhlIGJhc2ljIGRvY3VtZW50IHN0cnVjdHVyZSAtLT4K

### Step 5: Create the Body Section
After the `<head>` section, add the opening and closing `<body>` tags. The body section contains the visible content of the webpage:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDx0aXRsZT5NeSBXZWJwYWdlPC90aXRsZT4KICA8L2hlYWQ+CiAgPGJvZHk+PC9ib2R5Pgo8L2h0bWw+

### Step 6: Add Content to the Body
 We can add elements within the `<body>` tags, such as headings, paragraphs, images, links, etc. Here's an example of adding a heading and a paragraph:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDx0aXRsZT5NeSBXZWJwYWdlPC90aXRsZT4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8aDE+VGhlIHdlYnBhZ2UgbWFpbiBoZWFkaW5nPC9oMT4KICAgIDxwPlNvbWUgY29udGVudC48L3A+CiAgPC9ib2R5Pgo8L2h0bWw+

Aprenda os fundamentos do HTML (HyperText Markup Language), a base do desenvolvimento web. Esse curso amigável para iniciantes aborda tags, atributos, elementos e estruturação de páginas da web. Adquira habilidades práticas na criação de títulos, parágrafos, listas, imagens, links, formulários e tabelas. Explore as melhores práticas, otimização e acessibilidade na web. Comece sua jornada de desenvolvimento web com HTML.

Explore o funcionamento interno da web. Aprenda como os dados viajam através das redes, descubra o papel dos protocolos e desvende os mistérios dos endereços IP e nomes de domínio. Obtenha um entendimento de alto nível de como os navegadores 
e servidores da web se comunicam para fornecer conteúdo na web.

Descubra o poder das tags para estruturar conteúdo, desde títulos e parágrafos até listas e tabelas. Aprenda como aprimorar os elementos com atributos.

O cerne da estrutura de um documento HTML. Aprenda os componentes de um documento HTML, incluindo a declaração do tipo de documento (doctype), cabeçalho (head) e corpo (body). Compreenda a finalidade de cada elemento e como eles contribuem para a estrutura geral de uma página web.

Torne uma página web mais atrativa com a ajuda de mídias como imagens, áudio e vídeo. Trabalhe com dados tabulares estruturados na forma de tabelas.

Explore a versatilidade dos formulários HTML. Aprenda a projetar formulários intuitivos e amigáveis ao usuário, utilizando conceitos e técnicas fundamentais. Descubra como os formulários permitem a interação do usuário e o envio de dados em sites.

HTML Supremo

Desafio: Estrutura do Documento

🏁 Objetivo

📋 Tarefa

📝 Step-by-Step Guide

Step 1: Start the HTML Document

Passo 1: Inicie o documento HTML

Passo 3: Crie a seção head

Passo 5: crie a seção body

🔍 Experimente Você Mesmo!

Step 5: Create the Body Section

Step 6: Add Content to the Body

Try It Yourself