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