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.
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.
