Unidade Temática: Criação de Páginas Web
Tema: Conceitos de HTML e Hipertexto
1. Conceito de Página Web
Uma página Web é um documento digital que pode ser aberto num navegador (Google
Chrome, Firefox Edge, etc.), geralmente escrito em HTML.
Ela pode conter textos, imagens, links, vídeos, sons e outros elementos que permitem a
interação com o usuário.
Exemplo: A página inicial do Google.
2. Ergonomia e Amigabilidade de uma Página Web
Ergonomia: é a forma como a página é organizada para que o utilizador navegue com
conforto, sem esforço excessivo.
Amigabilidade (usabilidade): significa que a página deve ser simples, fácil de
entender e prática de usar.
🔹 Uma página amigável deve ter:
Títulos claros.
Menu organizado.
Texto legível.
Cores agradáveis.
Links funcionais.
3. O que é HTML?
HTML (HyperText Markup Language) é a linguagem de marcação usada para
estruturar e organizar o conteúdo de uma página Web.
Ele não é considerado uma linguagem de programação, mas sim uma linguagem de
marcação.
O navegador interpreta o código HTML e exibe a página para o usuário.
HTML utiliza tags (etiquetas) que dizem ao navegador como mostrar o conteúdo.
Exemplo simples de HTML:
<!DOCTYPE html>
<html>
<head>
<title>Minha Primeira Página</title>
</head>
<body>
<h1>Bem-vindo à minha página Web</h1>
<p>Este é um parágrafo de exemplo.</p>
<a href="https://www.google.com">Visitar o Google</a>
</body>
</html>
4. O que é Hipertexto?
Hipertexto é um conjunto de textos interligados por links (ligações).
Quando clicamos num link, somos levados para outra página ou documento.
Exemplo: Na frase abaixo, o link leva até o Google.
<a href="https://www.google.com">Clique aqui para visitar o Google</a>
2. Estrutura Básica de uma Página HTML
Todo documento HTML segue uma estrutura padrão:
<!DOCTYPE html>
<html>
<head>
<title>Título da Página</title>
</head>
<body>
<h1>Meu primeiro título</h1>
<p>Este é um parágrafo de exemplo.</p>
</body>
</html>
🔎 Explicação das partes:
<!DOCTYPE html> → Indica que o documento é HTML5.
<html> → Define o início e o fim do documento HTML.
<head> → Contém informações sobre a página (não aparecem no navegador).
<title> → Nome que aparece na aba do navegador.
<body> → Onde fica o conteúdo visível (textos, imagens, links, tabelas, etc.).
3. Principais Tags do HTML
As tags são comandos entre < > que dizem ao navegador como mostrar o conteúdo.
a) Cabeçalhos (Títulos)
<h1>Título Principal</h1>
<h2>Subtítulo</h2>
<h3>Sub-subtítulo</h3>
b) Parágrafos
<p>Este é um parágrafo de texto.</p>
c) Quebra de linha
<p>Texto na primeira linha.<br>Texto na segunda linha.</p>
d) Links (Hipertexto)
<a href="https://www.google.com">Visitar o Google</a>
e) Imagens
<img src="imagem.jpg" alt="Descrição da imagem">
f) Listas
Lista ordenada (numerada):
<ol>
<li>Primeiro item</li>
<li>Segundo item</li>
</ol>
Lista não ordenada (com pontos):
<ul>
<li>Item A</li>
<li>Item B</li>
</ul>
4. Características do HTML
É simples de aprender.
É a base da Web, usado junto com CSS (para estilo) e JavaScript (para
interatividade).
Funciona em qualquer navegador.
Usa tags para estruturar o conteúdo.
5. Exercícios de Fixação
1. O que significa HTML e qual a sua função principal?
2. Escreva o código básico de uma página Web.
3. Crie uma página que mostre:
o Um título com o seu nome.
o Dois parágrafos: um apresentando você e outro com o seu passatempo
favorito.
o Uma lista com 3 frutas que você gosta.
o Um link para o site da UniSave.
