Pular para conteúdo

Aula 04 - Textos e Links 🔗

Conectando Ideias e Páginas

👋 Olá!

Hoje vamos aprender as tags que dão volume e conexão à Web.

Sem os links, a internet seria apenas um monte de páginas isoladas. 🕸️

Agenda de Hoje 📅

  1. Parágrafos e Formatação
  2. Quebras de Linha
  3. Listas Não Ordenadas (UL)
  4. Listas Ordenadas (OL)
  5. A Tag de Âncora (Links)
  6. Atributos href e target

📝 1. Parágrafos

A Tag

  • Define um bloco de texto.
  • O navegador adiciona espaço antes e depois. 
<p>Este é um parágrafo!</p>

💡 Curiosidade

O HTML ignora múltiplos espaços em branco no código.

Para forçar uma quebra de linha: use <br>.

📋 2. Listas

Para organizar qualquer coisa!

Listas Não Ordenadas (UL) 🔹

<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>
- Mostra marcadores (bolinhas). - UL = Unordered List.

Listas Ordenadas (OL) 🔢

<ol>
  <li>Primeiro</li>
  <li>Segundo</li>
</ol>
- Mostra números (1, 2, 3...). - OL = Ordered List.

O Item da Lista (LI) 📑

  • LI = List Item.
  • Deve estar sempre dentro de uma <ul> ou <ol>.

📊 Estrutura de Listas

graph TD
    UL[ul - Unordered] --> LI1[li - Item 1]
    UL --> LI2[li - Item 2]
    OL[ol - Ordered] --> LI3[li - Passo 1]
    OL --> LI4[li - Passo 2]

O coração da Web!

A Tag ⚓

  • A = Anchor (Âncora).
  • Permite "pular" de uma página para outra.

Atributo href 📍

  • É o destino do link. 
<a href="https://google.com">Ir ao Google</a>

Atributo target 🎯

  • Define onde o link será aberto.
  • _blank: Abre em uma nova aba.
  • _self: Abre na mesma aba (padrão).
  • Apontam para outro domínio.
  • Sempre comece com https://.
  • Apontam para arquivos dentro do seu projeto. 
<a href="contato.html">Fale Comigo</a>

🕵️‍♂️ Boas Práticas

  • Texto do link deve ser descritivo.
  • Ruim: "Clique aqui"
  • Bom: "Veja nossa galeria de fotos"

💻 4. Exemplo Completo

<p>Visite meus amigos:</p>
<ul>
  <li>
    <a href="https://github.com" target="_blank">
       GitHub
    </a>
  </li>
</ul>

Resumo da Aula ✅

  • <p> para textos.
  • <ul> e <ol> para listas.
  • <a> com href para links.
  • target="_blank" para novas abas.

Próxima Aula 🖼️

Imagens e SVG

Vamos deixar o nosso site visualmente incrível!

Dúvidas? 🤔

"A Web não é sobre páginas, é sobre as conexões entre elas."