Estrutura de Documento HTML: Criando uma Página Web Básica

Introdução

Bem-vindo ao mundo do HTML! Cada página web que você vê na internet é construída sobre uma estrutura fundamental. Compreender essa estrutura é o primeiro e mais crucial passo no desenvolvimento web.

Neste laboratório, você aprenderá a criar o esqueleto básico de um documento HTML. Cobriremos os componentes essenciais que toda página HTML deve ter:

A declaração <!DOCTYPE html>
O elemento raiz <html>
O elemento <head> para metadados
O elemento <body> para conteúdo visível

Ao final deste laboratório, você terá construído uma página HTML completa, válida e simples do zero.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível intermediário com uma taxa de conclusão de 70%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Criar a declaração DOCTYPE

Nesta etapa, você adicionará a declaração DOCTYPE, que é a primeira coisa em seu documento HTML. Esta declaração informa ao navegador web que a página está escrita em HTML5. É uma prática padrão e garante que o navegador renderize a página corretamente.

Primeiro, localize o arquivo index.html no explorador de arquivos no lado esquerdo do seu WebIDE. Clique nele para abri-lo no editor.

O arquivo está atualmente vazio. Adicione a seguinte linha de código no topo do arquivo index.html:

<!DOCTYPE html>

Seu arquivo index.html agora deve parecer com isto:

<!DOCTYPE html>

Esta única linha é o ponto de partida para todas as páginas web modernas.

Adicionar o elemento raiz html com o atributo lang

Nesta etapa, você adicionará o elemento <html>. Este elemento é o contêiner raiz para todos os outros elementos HTML na página (exceto pela declaração <!DOCTYPE>).

Também é uma boa prática incluir o atributo lang dentro da tag de abertura <html>. Este atributo especifica o idioma do conteúdo do documento, o que ajuda os motores de busca e leitores de tela. Para o inglês, usamos lang="en".

No seu arquivo index.html, adicione as tags <html> e </html> logo após a declaração <!DOCTYPE html>.

<!DOCTYPE html>
<html lang="en"></html>

Todos os outros elementos da sua página web irão entre estas duas tags.

Inserir o elemento head com a tag title

Nesta etapa, você adicionará o elemento <head>. A seção <head> contém metadados sobre o documento HTML, como seu título, conjunto de caracteres, estilos e scripts. Essas informações não são exibidas na página web em si, mas são usadas pelo navegador.

A peça de metadado mais importante para um iniciante é a tag <title>. O texto dentro da tag <title> é o que aparece na aba do navegador ou na barra de título da janela.

Dentro do seu elemento <html>, adicione uma seção <head>. Dentro da seção <head>, adicione uma tag <title> com o texto "My First Web Page".

Atualize seu arquivo index.html para que ele fique assim:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My First Web Page</title>
  </head>
</html>

Adicionar o elemento body para conteúdo

Nesta etapa, você adicionará o elemento <body>. É aqui que vai todo o conteúdo visível da sua página web, como títulos, parágrafos, imagens, links e muito mais. O elemento <body> deve ser colocado após o elemento <head>, mas ainda dentro do elemento <html>.

Vamos adicionar um título principal à nossa página para torná-lo visível no navegador. Usaremos a tag <h1>, que significa "Heading 1" (Título 1).

No seu arquivo index.html, adicione uma seção <body>. Dentro do <body>, adicione um elemento <h1> com o texto "Hello, World!".

Seu arquivo index.html completo agora deve ficar assim:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My First Web Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Esta é uma estrutura de documento HTML completa e válida.

Salvar e abrir o arquivo HTML no navegador

Nesta etapa, você visualizará a página web que acabou de criar. O WebIDE salva automaticamente suas alterações, portanto, você não precisa salvar o arquivo manualmente.

Um servidor web simples já está em execução em segundo plano para você. Para ver sua página, basta abrir a aba correta na interface do LabEx.

Clique na aba Web 8080, que está localizada no canto superior esquerdo da sua tela, ao lado da aba "Terminal".

Ao mudar para a aba Web 8080, você deverá ver sua página web. Ela exibirá:

O texto "Hello, World!" como um título grande na área de conteúdo principal.
A aba do navegador mostrará o título "My First Web Page".

Se você não vir isso, por favor, volte para as etapas anteriores e certifique-se de que seu código index.html corresponda exatamente ao exemplo.

Resumo

Parabéns! Você criou com sucesso seu primeiro documento HTML válido. Você aprendeu os blocos de construção fundamentais que formam o esqueleto de toda página web.

Neste laboratório, você aprendeu:

<!DOCTYPE html>: A declaração que define o documento como HTML5.
<html>: O elemento raiz que envolve todo o conteúdo da página.
<head>: O contêiner para metadados, como o título da página, que não é visível na página em si.
<title>: A tag que define o título da aba do navegador.
<body>: O contêiner para todo o conteúdo visível, como títulos e parágrafos.

Esta estrutura básica é a fundação sobre a qual você construirá todos os futuros projetos web.