EasyCode365EasyCode365

Sua primeira página HTML

1. Introdução

Bem-vindo ao HTML Foundations! O HTML é a linguagem padrão usada para construir a estrutura de todo site da internet. Nesta lição, você vai construir a sua primeira página web montando o esqueleto essencial e básico de um documento HTML.

2. A ideia central

Toda página web precisa de uma estrutura básica subjacente para funcionar corretamente. Pense nessa estrutura como a fundação e a armação de uma casa — antes de poder decorar as paredes ou colocar os móveis, você precisa de uma base sólida e bem organizada.

3. As partes principais

<!DOCTYPE html>

  • O que é: Uma declaração especial colocada bem no topo do seu arquivo.
  • Por que importa: Ela garante que o navegador exiba a sua página corretamente.
  • Explicação: Ela simplesmente diz ao navegador: "Ei, estou usando a versão padrão mais nova do HTML!".

<html>

  • O que é: O contêiner raiz.
  • Por que importa: Ele funciona como o grande invólucro de todo o seu site.
  • Explicação: Todo outro pedaço de código que você escrever vai ficar dentro deste elemento.

<head>

  • O que é: A central de controle para informações ocultas.
  • Por que importa: Ele contém detalhes de bastidores essenciais que o navegador precisa para funcionar, em vez de conteúdo para o usuário.
  • Explicação: Nada dentro desta seção é visível na página web em si; em vez disso, ela contém coisas como o título da aba do navegador.

<body>

  • O que é: A área principal de exibição.
  • Por que importa: É aqui que ficam todo o seu texto, imagens e botões interativos.
  • Explicação: Tudo o que é colocado dentro desta tag é o conteúdo visível de fato que seus visitantes vão ver e ler na tela.

4. Exemplo

Editável
<!DOCTYPE html>
<html>
  <head>
    <title>Minha primeira página web</title>
  </head>
  <body>
    <h1>Olá, mundo!</h1>
    <p>Bem-vindo ao meu site novinho em folha.</p>
  </body>
</html>

5. Análise do exemplo

  • <!DOCTYPE html>: Define o padrão para que o navegador saiba que estamos usando HTML moderno.
  • <html>: Inicia o invólucro principal do documento HTML.
  • <head>: Abre a seção oculta reservada para as informações de bastidores do navegador.
  • <title>: Define o texto exibido na aba superior do seu navegador como "Minha primeira página web".
  • </head>: Fecha a seção oculta.
  • <body>: Abre a seção para o conteúdo visível.
  • <h1> e <p>: Exibem um título grande e em negrito e um parágrafo de texto comum na tela.
  • </body> e </html>: Marcam o fim do conteúdo visível e o fim da página inteira.

6. Experimente você mesmo

Agora é a sua vez de escrever um pouco de código! Tente mudar o texto dentro das tags <title> para o seu próprio nome e, em seguida, adicione um segundo parágrafo <p> logo abaixo do primeiro, no body.

7. Editores online gratuitos para praticar

Você pode praticar HTML diretamente no seu navegador com estas ferramentas gratuitas:

8. Recapitulando

  • O HTML é a base estrutural da web.
  • O <head> contém dados invisíveis usados pelo navegador, enquanto o <body> contém o conteúdo visível que os seus usuários realmente veem.
  • Toda página válida precisa de uma declaração <!DOCTYPE html> e de um invólucro raiz <html> para manter tudo unido.