📘 Aula 2: Bem-vindo ao seu primeiro HTML! 📘

Nesta aula você vai aprender, passo a passo, a criar seu primeiro documento HTML e entender para que serve cada parte do código.

1. Declaração do HTML5

Começamos declarando que nosso documento é HTML5:

<!DOCTYPE html>

Isso informa ao navegador que estamos usando a versão moderna do HTML.

2. Abertura do HTML e definição do idioma

Em seguida abrimos a tag HTML e definimos o idioma:

<html lang="pt-br">

O atributo lang="pt-br" ajuda navegadores e ferramentas de acessibilidade a identificar que o conteúdo está em português.

3. Cabeçalho do documento (<head>)

Dentro do <head> colocamos informações sobre nosso site, como título e codificação de caracteres:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu primeiro exercício HTML</title>
</head>

- <meta charset="UTF-8"> garante que acentos e caracteres especiais apareçam corretamente.
- <meta name="viewport" ... > ajusta a página para dispositivos móveis.
- <title> define o nome da aba do navegador.

4. Corpo do documento (<body>)

Todo conteúdo visível na página deve estar dentro do <body>:


<body>
    <h1>Olá, seja bem-vindo!</h1>
    <hr>
    <p>Este é meu primeiro exercício, estou aprendendo a criar meu primeiro site!</p>
</body>

- <h1> é o título principal.
- <hr> cria uma linha horizontal para separar conteúdos.
- <p> cria parágrafos com explicações.
- <br> quebra de linha.

5. Fechando o HTML

Por fim, fechamos as tags abertas:

- </html>

Isso indica o fim do documento HTML.

Seu código depois de pronto deve ficar assim

Exemplo visual abaixo!


<html lang="pt-br">
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu primeiro exercício HTML</title>
</head>

<body>
    <h1>Olá, seja bem-vindo!</h1>
    <hr>
    <p>Este é meu primeiro exercício, estou aprendendo a criar meu primeiro HTML!</p>
</body>

</html>

O seu resultado visual no navegador deve ser esse abaixo!

Olá, seja bem-vindo!

Este é meu primeiro exercício, estou aprendendo a criar meu primeiro HTML!