Módulo 2 / HTML & CSS

Textos, Listas, Links,
Imagens & Tabelas

Expandindo o vocabulário HTML para construir páginas completas.

school Aula 03 schedule 2 horas

Fundamentos

Formatação de Texto

code Código

<!-- Títulos: h1 (maior) a h6 (menor) -->
<h1>Título Principal</h1>
<h2>Subtítulo</h2>
<h3>Seção</h3>

<!-- Parágrafo -->
<p>Este é um parágrafo de texto.</p>

<!-- Ênfase e destaque -->
<p>
  Texto <strong>muito importante</strong>
  e texto <em>enfatizado</em>.
</p>

visibility Resultado

Título Principal

Subtítulo

Seção

Este é um parágrafo de texto.

Texto muito importante e texto enfatizado.

lightbulb Use <strong> em vez de <b> a tag semântica indica importância, não apenas visual.

Organização

Listas HTML

format_list_bulleted Não ordenada

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

HTML
CSS
JavaScript

format_list_numbered Ordenada

<ol>
  <li>Planejamento</li>
  <li>Desenvolvimento</li>
  <li>Testes</li>
</ol>

Planejamento
Desenvolvimento
Testes

list_alt De definição

<dl>
  <dt>HTML</dt>
  <dd>Linguagem de marcação</dd>
  <dt>CSS</dt>
  <dd>Folha de estilos</dd>
</dl>

HTML: Linguagem de marcação
CSS: Folha de estilos

Navegação

Links e âncoras

code A tag <a>

<!-- Link externo -->
<a href="https://google.com"
   target="_blank">
  Abrir Google
</a>

<!-- Link interno (mesma página) -->
<a href="#contato">Ir para Contato</a>

<!-- Link para outra página -->
<a href="sobre.html">Sobre nós</a>

<!-- Link para email -->
<a href="mailto:aluno@fatec.sp">
  Enviar email
</a>

tune Atributos importantes

href URL de destino pode ser absoluta, relativa ou âncora

target _blank abre em nova aba, _self na mesma (padrão)

rel Use noopener noreferrer com links externos por segurança

lightbulb A tag <a> é a base da navegação na web é o que conecta todas as páginas entre si.

Mídia

Imagens na Web

code A tag <img>

<!-- Imagem básica -->
<img
  src="foto.jpg"
  alt="Descrição da imagem"
  width="600"
  height="400"
/>

<!-- Imagem com legenda (semântica) -->
<figure>
  <img src="grafico.png"
    alt="Gráfico de vendas" />
  <figcaption>
    Vendas do 1º trimestre
  </figcaption>
</figure>

checklist Boas práticas

check_circle Sempre inclua o atributo alt é essencial para acessibilidade
check_circle Defina width e height para evitar layout shift
check_circle Use <figure> + <figcaption> para imagens com legenda

image Formatos comuns

.jpg fotos .png transparência .svg vetorial .webp moderno

Dados tabulares

Tabelas HTML

code Estrutura completa

<table>
  <thead>
    <tr>
      <th>Nome</th>
      <th>Idade</th>
      <th>Cidade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ana</td>
      <td>22</td>
      <td>São Paulo</td>
    </tr>
    <tr>
      <td>Carlos</td>
      <td>25</td>
      <td>Campinas</td>
    </tr>
  </tbody>
</table>

visibility Resultado

Nome	Idade	Cidade
Ana	22	São Paulo
Carlos	25	Campinas

account_tree Anatomia

<table> contêiner da tabela

<thead> cabeçalho

<tbody> corpo dos dados

<tr> linha (table row)

<th> célula de cabeçalho

<td> célula de dados

Conceito importante

Caminhos de arquivo

folder Caminho relativo

imagens/foto.jpg

Pasta "imagens" no mesmo nível

./estilos/main.css

./ = pasta atual (mesmo efeito)

../assets/logo.png

../ = voltar um nível

language Caminho absoluto

https://site.com/img.jpg

URL completa (recurso externo)

/assets/logo.png

A partir da raiz do site

lightbulb Em projetos locais, prefira caminhos relativos funcionam sem servidor.

Boas práticas

Estrutura de projeto

folder_open Organização recomendada

meu-projeto/
├── index.html
├── sobre.html
├── css/
│   └── style.css
├── js/
│   └── main.js
├── images/
│   ├── logo.png
│   └── banner.jpg
└── assets/
    └── fonts/

check_circle Regras de ouro

▸ Nomes de arquivo em minúsculas, sem espaços
▸ Use hífens para separar palavras: minha-pagina.html
▸ Separe HTML, CSS e JS em arquivos diferentes
▸ A página principal sempre se chama index.html

Mão na massa

Exercício prático

edit_note Crie uma página "Sobre Mim"

Crie a estrutura de pastas: meu-site/, meu-site/images/
Crie o index.html com:
- ▸ Um <header> com título e menu de navegação (<nav> + <ul>)
- ▸ Um <main> com uma seção "Sobre" (parágrafo + imagem com <figure>)
- ▸ Uma tabela com suas matérias favoritas (nome, nota, semestre)
- ▸ Uma lista ordenada com seus 5 sites favoritos usando <a>
- ▸ Um <footer> com seu email usando mailto:
Salve uma imagem na pasta images/ e referencie com caminho relativo

star Bônus: crie uma segunda página (hobbies.html) e faça os links funcionarem entre elas!

Próxima aula

Aula 04

Formulários HTML inputs, validações e acessibilidade.

task_alt O que aprendemos hoje

check_circle Formatação de texto: <h1>–<h6>, <p>, <strong>, <em>
check_circle Listas: <ul>, <ol>, <dl>
check_circle Links com <a> e tipos de caminhos
check_circle Imagens com <img> e <figure>
check_circle Tabelas com <table>, <thead>, <tbody>

Próxima aula

auto_stories Referência: MDN Web Docs HTML

Textos, Listas, Links,Imagens & Tabelas

Fundamentos

Formatação de Texto

visibility Resultado

Organização

Listas HTML

format_list_bulleted Não ordenada

format_list_numbered Ordenada

list_alt De definição

Navegação

Links e âncoras

tune Atributos importantes

Mídia

Imagens na Web

checklist Boas práticas

image Formatos comuns

Dados tabulares

Tabelas HTML

visibility Resultado

account_tree Anatomia

Conceito importante

Caminhos de arquivo

folder Caminho relativo

language Caminho absoluto

Boas práticas

Estrutura de projeto

folder_open Organização recomendada

check_circle Regras de ouro

Mão na massa

Exercício prático

edit_note Crie uma página "Sobre Mim"

Aula 04

task_alt O que aprendemos hoje

Textos, Listas, Links,
Imagens & Tabelas