Aula 1 - Fundamentos do HTML

1. O que é HTML

HTML significa HyperText Markup Language, ou Linguagem de Marcação de Hipertexto.

Ele é usado para estruturar o conteúdo de páginas web, como títulos, parágrafos, imagens, links, listas e formulários.

HTML não é uma linguagem de programação. Ele é uma linguagem de marcação.

2. Estrutura básica do documento HTML

Todo documento HTML segue uma estrutura inicial parecida com esta:

<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <title>Título da página</title>
  </head>
  <body>
    Conteúdo visível da página
  </body>
</html>

Explicando cada parte

<!doctype html> → informa ao navegador que o documento usa HTML5.
<html> → elemento raiz da página.
<head> → contém configurações e informações do documento.
<body> → contém tudo o que será exibido na tela.

3. Metatags

As metatags ficam dentro do <head> e ajudam a configurar a página.

charset → define a codificação de caracteres.
description → descreve o conteúdo da página.
keywords → palavras-chave relacionadas ao conteúdo.
author → autor do documento.
viewport → ajuda na responsividade em telas menores.

Exemplo:

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

4. Comentários em HTML

Comentários servem para deixar observações no código. Eles não aparecem na página.

<!-- Isto é um comentário em HTML -->

Exemplo de uso:

<!-- Título principal da página -->
<h1>Minha primeira página</h1>

5. Atributos

Os atributos ficam dentro das tags e fornecem informações extras ao elemento.

Exemplo:

<p title="Este é um parágrafo">Texto do parágrafo</p>

Alguns atributos comuns:

id → identificador único
title → texto explicativo
src → caminho de um arquivo, como imagem
href → destino de um link
lang → idioma do documento

Observação: alguns atributos aparecem em muitas tags, enquanto outros são usados apenas em elementos específicos.

6. Títulos, parágrafos e quebras

Títulos

O HTML possui seis níveis de títulos, do mais importante <h1> ao menos importante <h6>.

<h1>Título principal</h1>
<h2>Subtítulo</h2>
<h3>Seção menor</h3>

Exemplo visual:

Exemplo de título nível h3

Exemplo de título nível h4

Exemplo de título nível h5

Nesta própria página, o título principal da aula usa <h1>, e os assuntos usam <h2>.

Parágrafos

A tag <p> é usada para escrever parágrafos.

<p>Este é um parágrafo.</p>
<p>Este é outro parágrafo.</p>

Quebra de linha

A tag <br> faz uma quebra de linha dentro do texto.

<p>Linha 1<br>Linha 2</p>

Exemplo:

Linha 1
Linha 2

Linha horizontal

A tag <hr> cria uma linha horizontal para separar conteúdos.

<hr>

7. Formatação de texto

Algumas tags ajudam a destacar partes importantes do texto.

<strong> → destaque forte
<em> → ênfase
<mark> → texto destacado
<small> → texto menor

Exemplo com strong

Exemplo com em

Exemplo com mark

Exemplo com small

Observação: hoje em dia, a aparência visual da página deve ser controlada principalmente com CSS.

Conclusão

Nesta aula, vimos os fundamentos do HTML e a organização básica de uma página web.

Na próxima aula, podemos avançar para elementos práticos como listas, imagens e links.

Voltar ao topo