Introdução
Neste laboratório, os alunos aprenderão as habilidades fundamentais para criar uma estrutura básica de documento HTML e entender as tags HTML essenciais. O laboratório guia os participantes através da configuração de um documento HTML com uma declaração DOCTYPE adequada, adicionando a tag raiz HTML, configurando a seção head e explorando diferentes tipos de tags HTML.
Os participantes começarão criando um documento HTML5, aprendendo como declarar o tipo de documento, estruturar o layout básico da página e entender o propósito de elementos-chave como <html>, <head> e <body>. Ao final do laboratório, os alunos terão uma compreensão abrangente de como criar um documento HTML bem formado e usar várias tags HTML para estruturar o conteúdo da página web.
Configurar Documento HTML com Declaração DOCTYPE
Nesta etapa, você aprenderá como configurar a base básica de um documento HTML adicionando a declaração DOCTYPE. A declaração DOCTYPE é crucial, pois informa aos navegadores web qual versão do HTML seu documento está usando, garantindo a renderização e compatibilidade adequadas.
Primeiro, abra o WebIDE e crie um novo arquivo chamado index.html no diretório ~/project.
A declaração DOCTYPE para HTML5 é simples e direta. Você a adicionará como a primeira linha do seu documento HTML:
<!doctype html>
Esta declaração informa aos navegadores que você está usando HTML5, a versão mais recente do HTML. Não diferencia maiúsculas de minúsculas, mas a versão em minúsculas é recomendada para consistência e legibilidade.
Vamos criar uma estrutura básica completa de documento HTML com a declaração DOCTYPE:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to HTML!</h1>
</body>
</html>
Notas: Saiba mais sobre Como visualizar arquivos HTML no WebIDE.
A saída de exemplo no navegador exibirá:
Welcome to HTML!
Pontos-chave para lembrar:
- A declaração DOCTYPE deve ser a primeira linha do seu documento HTML
- Ajuda os navegadores a entender qual versão do HTML você está usando
- Para desenvolvimento web moderno, use
<!DOCTYPE html>para HTML5 - A declaração não é uma tag HTML; é uma instrução para o navegador
Adicionar Tag Raiz HTML e Estrutura Básica
Nesta etapa, você aprenderá sobre a estrutura fundamental de um documento HTML, focando na tag raiz HTML e na estrutura básica do documento. A tag <html> é o contêiner para todos os outros elementos HTML e serve como o elemento raiz de uma página HTML.
Abra o arquivo index.html que você criou na etapa anterior no WebIDE. Vamos expandir a estrutura HTML anterior adicionando a tag raiz completa e seus componentes essenciais:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to HTML Structure</h1>
<p>This is the basic structure of an HTML document.</p>
</body>
</html>
Vamos detalhar os componentes-chave:
- Tag
<html>: O elemento raiz que envolve todo o outro conteúdo HTML - Atributo
lang="en": Especifica o idioma do documento (inglês neste caso) - Dois elementos filhos principais:
<head>: Contém metadados sobre o documento<body>: Contém o conteúdo visível da página web
A saída de exemplo em um navegador web seria semelhante a:
Welcome to HTML Structure
This is the basic structure of an HTML document.
Pontos-chave para lembrar:
- Todo documento HTML deve ter uma tag raiz
<html> - O atributo
langajuda na acessibilidade e na otimização para mecanismos de busca (SEO) - O documento é dividido em seções
<head>e<body> - O aninhamento adequado de tags é crucial para HTML válido
Configurar Seção Head com Meta Tags e Title
Nesta etapa, você aprenderá sobre a seção <head> de um documento HTML e como usar meta tags e title tags para fornecer informações importantes sobre sua página web.
Abra seu arquivo index.html no WebIDE e atualize a seção <head> com o seguinte exemplo:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="A simple HTML learning page" />
<title>My HTML Learning Journey</title>
</head>
<body>
<h1>Welcome to HTML Metadata</h1>
<p>This page demonstrates head section configuration.</p>
</body>
</html>
Vamos detalhar as principais meta tags e seus propósitos:
<meta charset="UTF-8">: Especifica a codificação de caracteres para o documento<meta name="viewport">: Garante a renderização adequada em diferentes dispositivos<meta name="description">: Fornece uma breve descrição da página para mecanismos de busca<title>: Define o título da página exibido na aba do navegador
Saída de exemplo em uma aba do navegador:
My HTML Learning Journey
Pontos-chave para lembrar:
- A seção
<head>contém metadados sobre o documento HTML - Meta tags fornecem informações adicionais aos navegadores e mecanismos de busca
- A tag
<title>é crucial para a identificação da página e SEO - Sempre inclua a codificação de caracteres e meta tags de viewport
Entender Tags HTML Simples e Duplas
Nesta etapa, você aprenderá sobre os dois tipos de tags HTML: tags simples (auto-fechamento) e tags duplas. Entender a diferença entre essas tags é crucial para criar documentos HTML bem estruturados.
Abra seu arquivo index.html no WebIDE e atualize a seção body com o seguinte exemplo:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML Tags Exploration</title>
</head>
<body>
<!-- Double Tags (Opening and Closing) -->
<h1>Welcome to HTML Tags</h1>
<p>This is a paragraph with <strong>bold text</strong>.</p>
<!-- Single (Self-Closing) Tags -->
<img src="example.jpg" alt="Example Image" />
<br />
<input type="text" placeholder="Enter your name" />
</body>
</html>
Vamos detalhar os diferentes tipos de tags:
Tags Duplas (Tags Emparelhadas):
- Possuem uma tag de abertura
<tag>e uma tag de fechamento</tag> - O conteúdo é colocado entre as tags de abertura e fechamento
- Exemplos:
<h1>,<p>,<strong>,<div>
Tags Simples (Tags de Auto-Fechamento):
- Não possuem uma tag de fechamento separada
- Se fecham dentro da própria tag
- Exemplos:
<img>,<br>,<input>
A saída de exemplo em um navegador exibiria:
Welcome to HTML Tags
This is a paragraph with bold text.
[An image would be displayed here]
[A text input field would be shown]
Pontos-chave para lembrar:
- Tags duplas envolvem conteúdo e requerem tags de abertura e fechamento
- Tags simples são autocontidas e não envolvem conteúdo
- Sempre feche as tags duplas para manter a estrutura HTML adequada
- Algumas tags simples podem ter atributos para fornecer informações adicionais
Explorar a Tag Body e a Colocação do Conteúdo da Página
Nesta etapa, você aprenderá sobre a tag <body> e como estruturar o conteúdo dentro de um documento HTML. A tag body é onde todo o conteúdo visível de uma página web é colocado.
Abra seu arquivo index.html no WebIDE e atualize a seção body com o seguinte exemplo:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Content Placement Example</title>
</head>
<body>
<!-- Headings -->
<h1>Welcome to HTML Content Placement</h1>
<h2>Subheading Level 2</h2>
<h3>Subheading Level 3</h3>
<!-- Paragraphs -->
<p>This is a paragraph explaining the importance of content structure.</p>
<!-- Lists -->
<h4>Key HTML Elements:</h4>
<ul>
<li>Headings</li>
<li>Paragraphs</li>
<li>Lists</li>
</ul>
<!-- Div for grouping content -->
<div>
<p>This paragraph is inside a div container.</p>
</div>
<!-- Links and Images -->
<a href="https://example.com">Visit Example Website</a>
<img src="example.jpg" alt="Example Image" width="300" />
</body>
</html>
A saída de exemplo em um navegador exibiria:
Pontos-chave para lembrar:
- A tag
<body>contém todo o conteúdo visível da página - Use tags de cabeçalho (
<h1>a<h6>) para criar hierarquia de conteúdo - Parágrafos, listas e outros elementos ajudam a organizar informações
- Tags
<div>podem agrupar e estruturar o conteúdo - Inclua links e imagens para aprimorar a interatividade da página
Resumo
Neste laboratório, os participantes aprenderam os passos fundamentais para criar uma estrutura básica de documento HTML. O processo começou com a configuração da declaração DOCTYPE, que é crucial para garantir a renderização adequada do navegador e a compatibilidade com HTML5. Os alunos exploraram as tags HTML essenciais, incluindo a tag raiz <html>, as seções <head> e <body>, compreendendo seus papéis específicos na organização do documento.
O laboratório guiou os alunos na criação de um documento HTML completo, demonstrando como adicionar meta tags, definir a codificação de caracteres, definir um título de página e colocar conteúdo dentro da tag body. Os participantes ganharam experiência prática na construção de uma página HTML bem estruturada, aprendendo conceitos-chave como tags HTML simples e duplas, aninhamento adequado de tags e a importância da marcação semântica no desenvolvimento web.
