---
title: HTML – Linguagem de Marcação de Hipertextos
description: "**Curso:** Informática de Gestão **Turma:** IG1 | IG2 **Turno:** Tarde ![](https://aulas.aguinaldolopes.com/wp-content/uploads/2025/11/HTML.jpg) ##### **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…"
url: "https://aulas.aguinaldolopes.com/docs/html-linguagem-de-marcacao-de-hipertextos/"
updated: "2026-10-07"
category: "Informática de Gestão - IG1 e IG2"
---

# HTML – Linguagem de Marcação de Hipertextos

**Curso:** Informática de Gestão
**Turma:** IG1 | IG2
**Turno:** Tarde

![](https://aulas.aguinaldolopes.com/wp-content/uploads/2025/11/HTML.jpg)

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

1. **Bloco de Notas:**

- Editor padrão do sistema
- Simples e sempre disponível

**Como usar:**

1. Abrir o Bloco de Notas
2. Escrever o código HTML
3. Guardar com a extensão .html
4. Abrir no navegador (Chrome, Firefox…)
   Exemplo de nome do ficheiro: trabalho.html

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

![](https://aulas.aguinaldolopes.com/wp-content/uploads/2025/11/Tab_editores_texto.png)
Outros editores de texto.

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