TIC - 12ª Classe
Unidade Temática: Trabalho de
Projectos
Tema: Revisão dos conteúdos da
11ª Classe
Escola Secundária Samora Machel
Ficha de Apoio
1. O que é HTML ?
É a linguagem usada para estruturar páginas da web.
HTML significa HyperText Markup Language (Linguagem de Marcação de Hipertexto).
NB: O HTML não é uma linguagem de programação, e sim de marcação.
1.1. HTML usa TAGS.
As tags HTML funcionam como caixinhas que organizam o conteúdo da página. Cada tag tem um significado: algumas
servem para títulos, outras para parágrafos, outras para imagens. Se não usamos tags, o navegador não sabe como
mostrar o texto ou os elementos
✓ Sempre ficam entre sinais de menor < e maior >.
Normalmente uma tag tem abertura e fechamento: [NB tem algumas sem Fechamento]]
Uma lista completa de tags HTML inclui elementos para estrutura básica (<html>, <head>, <body>), formatação de texto
(<h1>–<h6>, <p>, <b>, <i>), links (<a>), imagens (<img>), listas (<ul>, <ol>, <li>), tabelas (<table>, <tr>, <td>),
formulários (<form>, <input>, <button>), e elementos semânticos modernos como <header>, <footer>, <nav>, <article>
e <div>.
1.2. Estrutura de um Documento HTML
✓ <!DOCTYPE html>: Declara o tipo de documento e a versão do HTML.
✓ <html>: O elemento raiz de uma página HTML.
✓ <head>: Contém metadados, como o título e links para estilos.
✓ <title>: Define o título da página, que aparece na aba do navegador.
✓ <body>: Contém todo o conteúdo visível da página.
1.3. Formatação de Texto
✓ <h1>–<h6>: Define os níveis de títulos e subtítulos.
✓ <p>: Cria um parágrafo.
✓ <b> e <strong>: Definem texto em negrito.
✓ <i> e <em>: Definem texto em itálico ou com ênfase.
✓ <br>: Insere uma quebra de linha simples.
1.4. Links e Imagens
✓ <a>: Cria um hyperlink para outra página ou recurso.
✓ <img>: Insere uma imagem no documento.
1.5. Listas
✓ <ul>: Cria uma lista não ordenada (com marcadores).
✓ <ol>: Cria uma lista ordenada (com números).
✓ <li>: Define um item de lista dentro de <ul> ou <ol>.
1.6. Tabelas
✓ <table>: Define uma tabela.
✓ <tr>: Cria uma linha em uma tabela.
✓ <td>: Define uma célula individual em uma linha.
✓ <th>: Define uma célula de cabeçalho em uma tabela.
1.7. Formulários
✓ <form>: Define um formulário HTML.
✓ <input>: Permite ao usuário inserir dados.
✓ <button>: Cria um botão de comando.
1.8. Elementos Semânticos e de Divisão
✓ <div>: Define uma divisão ou seção genérica no documento.
✓ <header>: Define o cabeçalho de uma seção ou página.
✓ <footer>: Define o rodapé de uma seção ou página.
✓ <nav>: Define links de navegação.
✓ <article>: Define um conteúdo independente, como um artigo de blog.
✓ <span>: Define um bloco de linha para texto curto.
Onde Escrever esses Códigos ou seja “Onde editar códigos HTML”?
Os códigos HTML podem ser escritos em qualquer editor de texto simples, mas para iniciantes recomenda-se usar o
Bloco de Notas (no Windows) ou editores equivalentes (como TextEdit no Mac, Gedit no Linux, QuickEdit, Jota + ou
DroidEdit no Celular (IOS/Android).
Passos para criar e salvar um arquivo HTML no Bloco de Notas
1. Abrir o Bloco de Notas
▪ No Windows: clique no botão Iniciar → pesquise por Bloco de Notas → abra o programa.
2. Escrever o código HTML
▪ Digite o exemplo básico:
<!DOCTYPE html>
<html>
<head>
<title>Página de Teste</title>
</head>
<body>
<h1>Olá, Mundo!</h1>
<p>Este é meu primeiro teste no celular.</p>
</body>
</html>
dr. José Alfredo Sitoe (Especialista em Visual Basic For Application)