Módulo 2 / HTML & CSS

Introdução à Web

Estrutura HTML & Tags Semânticas

school Aula 02 schedule 2 horas

Conceitos fundamentais

Como a Web funciona?

computer

Cliente (Browser)

O navegador do usuário. Faz requisições e renderiza as páginas.

swap_horiz

HTTP / HTTPS

Protocolo de comunicação. Define como cliente e servidor trocam dados.

dns

Servidor

Máquina remota que armazena e envia os arquivos da página web.

Quando você digita uma URL, o navegador envia uma requisição HTTP ao servidor, que responde com os arquivos HTML, CSS e JS.

Os 3 pilares

O Tripé da Web

code

HTML

Estrutura

Define o que aparece na página: textos, imagens, links, formulários.

info Analogia: o esqueleto do corpo humano.

palette

CSS

Estilo

Define como aparece: cores, fontes, espaçamentos, layouts.

info Analogia: a pele, roupas e aparência.

bolt

JavaScript

Comportamento

Define o que acontece: interações, animações, lógica.

info Analogia: os músculos e o cérebro.

Definição

O que é HTML?

description HyperText Markup Language

▸ Não é uma linguagem de programação
▸ É uma linguagem de marcação
▸ Utiliza tags para estruturar o conteúdo
▸ Versão atual: HTML5 (2014+)

lightbulb HTML descreve a semântica do conteúdo diz ao navegador o que cada parte da página significa.

code Exemplo de tag HTML

<!-- Uma tag HTML tem abertura e fechamento -->
<h1>Olá, Mundo!</h1>

<!-- Tags podem ter atributos -->
<a href="https://fatec.sp.gov.br">
  Visite a FATEC
</a>

<!-- Algumas tags são auto-fechantes -->
<img src="foto.jpg" alt="Descrição" />
<br />

Fundamento

Estrutura básica

draft index.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width,
    initial-scale=1.0" />
  <title>Minha Página</title>
</head>
<body>
  <h1>Olá, FATEC!</h1>
  <p>Minha primeira página.</p>
</body>
</html>

account_tree Cada parte explicada

<!DOCTYPE html>
Declara que o documento usa HTML5
<html lang="pt-BR">
Elemento raiz com idioma definido
<head>
Metadados: charset, viewport, título
<body>
Conteúdo visível da página

Vocabulário

Tags essenciais

title Títulos e Texto

<h1>...<h6> Títulos (do maior ao menor)

<p> Parágrafo

<strong> Texto em negrito (ênfase forte)

<em> Texto em itálico (ênfase)

<br> Quebra de linha

link Links e Mídia

<a> Link / âncora

<img> Imagem

<ul> / <ol> Listas (não ordenada / ordenada)

<li> Item de lista

<div> Contêiner genérico (bloco)

Boas práticas

HTML Semântico

close Sem semântica

<div class="header">
  <div class="nav">...</div>
</div>
<div class="content">
  <div class="article">...</div>
</div>
<div class="footer">...</div>

check Com semântica

<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
</main>
<footer>...</footer>

Tags semânticas melhoram a acessibilidade, o SEO e a manutenibilidade do código.

Referência

Tags Semânticas

web Estrutura da Página

<header> Cabeçalho

<nav> Navegação

<main> Conteúdo principal

<footer> Rodapé

article Conteúdo

<article> Conteúdo independente

<section> Seção temática

<aside> Conteúdo lateral

<figure> Mídia com legenda

text_fields Texto

<time> Data/hora

<mark> Texto destacado

<details> Conteúdo expansível

<summary> Resumo do details

Mão na massa

Exercício prático

edit_note Crie sua primeira página HTML

Abra o VS Code e crie um arquivo chamado index.html
Digite a estrutura básica do HTML5 (dica: digite ! e aperte Tab)
No <body>, adicione:
- ▸ Um <header> com seu nome em um <h1>
- ▸ Um <main> com um parágrafo sobre você
- ▸ Uma lista <ul> com 3 hobbies
- ▸ Um <footer> com o texto "FATEC 2026"
Salve e abra o arquivo no navegador

lightbulb Use apenas tags semânticas. Nenhum <div> deve ser necessário neste exercício.

Próxima aula

Aula 03

Textos, listas, links, imagens e tabelas vamos expandir o vocabulário HTML!

task_alt Recapitulando

check_circle Como a Web funciona (cliente-servidor)
check_circle Tripé: HTML, CSS e JavaScript
check_circle Estrutura básica de um documento HTML
check_circle Tags semânticas do HTML5

Próxima aula

auto_stories Referência: MDN Web Docs HTML