Curso: Informática de Gestão
Turma: IG1 | IG2
Turno: Tarde
OBJETIVO GERAL: #
Compreender o que é o HTML e aprender a criar páginas web simples, utilizando estrutura correta e as principais tags.
1. O QUE É O HTML (HyperText Markup Language)?: #
Em português – Linguagem de Marcação de Hipertexto, é uma linguagem de marcação utilizada para estruturar o conteúdo das páginas web. O HTML usa “tags” (etiquetas), que são palavras-chave cercadas por sinais de menor (<) e maior (>), para marcar o conteúdo e definir elementos como títulos, parágrafos, imagens e links, permitindo que navegadores da web interpretem e exibam o conteúdo corretamente.
- HTML não é linguagem de programação;
- Serve para organizar textos, imagens, links, vídeos…
Exemplos do que HTML organiza:
– Títulos;
– Parágrafos;
– Menus;
– Tabelas;
– Formulários;
– Divisão de seções.
2. ESTRUTURA BÁSICA DE UM DOCUMENTO HTML: #
Toda página começa com essa estrutura mínima:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Minha Primeira Página</title>
</head>
<body>
<h1>Olá, mundo!</h1>
</body>
</html><!DOCTYPE html> – Diz ao navegador que é uma página HTML5
<html> – Elemento principal que contém todo o conteúdo
<head> – Configurações invisíveis (título, ícones, meta-informações…)
<body> – Tudo que aparece ao utilizador
Conteúdo Básico em HTML:
Títulos:
Usamos tags <h1> até <h6> – o 1 é o mais importante:
<h1> Título Principal </h1>
<h2> Subtítulo </h2>Parágrafos:
<p> Este é um parágrafo de texto. </p>Quebra de linha:
<p> Linha 1 <br> Linha 2 </p>Negrito e Itálico:
<strong> Negrito </strong> e <em> Itálico </em>Links:
<a href="https://www.google.com"> Visitar o Google </a>Links para e-mail:
<a href="mailto:exemplo@email.com"> Enviar e-mail </a>Imagens:
ícones,
<img src="imagem.jpg" alt="Descrição da imagem" width="300">Listas:
Listas não ordenadas:
<ul>
<li> Item 1 </li>
<li> Item 2 </li>
</ul>Listas:
Listas ordenadas:
<ol>
<li> Primeiro </li>
<li> Segundo </li>
</ol>Tabela:
<table border="1">
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr>
<td>Ana</td>
<td>17</td>
</tr>
</table>Formulários (Básico):
<form>
<label>Nome:</label>
<input type="text" name="nome">
<label>Idade:</label>
<input type="number" name="idade">
<button type="submit">Enviar</button>
</form>
Tag Semânticas (HTML5):
Tornam a página mais organizada e compreensível para máquinas e humanos:
<header>Topo do site</header>
<nav>Menu de navegação</nav>
<section>Seção importante</section>
<article>Conteúdo principal</article>
<footer>Rodapé do site</footer>3. ONDE E COMO CRIAR PÁGINAS HTML: #
O HTML pode ser escrito em qualquer editor de texto, porque é um ficheiro de texto simples. Mas nem todo editor facilita o trabalho do programador.
- Bloco de Notas:
- Editor padrão do sistema
- Simples e sempre disponível
Como usar:
- Abrir o Bloco de Notas
- Escrever o código HTML
- Guardar com a extensão .html
- Abrir no navegador (Chrome, Firefox…)
Exemplo de nome do ficheiro: trabalho.html
- VS Code (Visual Studio Code) – recomendado para o curso:
Ferramenta gratuita e muito usada por profissionais.
Vantagens:
- Colore o código;
- Ajuda a fechar tags automaticamente;
- Sugestões e atalhos;
- Pré-visualização da página;
- Possibilidade de instalar extensões de HTML, CSS, JS.
Passos para começar:
- Abrir o VS Code;
- Criar uma pasta para os exercícios (ex.: `MeuSite/);
- Criar um novo ficheiro e guardar como: index.html
Depois, abrir esse ficheiro no navegador.
OBS: Instalar a extensão “Live Server” permite ver alterações em tempo real.
Regras de Boas Práticas desde o início:
- Guardar sempre com extensão html;
- Criar uma pasta do projeto e organizar imagens, CSS, JS;
- Nomear ficheiros sem espaços:
- Correto: meu-site.html
- Errado: meu site.html
- Usar navegador atualizado para testar;
- Ver código fonte com: Ctrl + U (Windows) ou Cmd + U (Mac)
Atividade Prática:
Criar uma página com:
– Título da escola e da turma
– Foto
– Menu com links (pode ser falso)
– Um parágrafo apresentando o aluno
– Lista com 5 hobbies
– Tabela com 3 colegas e idades
– Formulário com Nome, Email e Botão.
Guardar como: meu-perfil.html
