Pular para conteúdo

Aula 04 - Textos e Links 🔗

Objetivo

Objetivo: Aprender a organizar informações textuais utilizando listas e parágrafos, e dominar a criação de hyperlinks para conectar páginas e sites externos.

1. Organizando Textos 📝

O HTML oferece tags específicas para dar significado ao texto corrido.

  • <p> (Parágrafo): Usado para blocos de texto. O navegador adiciona automaticamente um espaço (margem) entre um parágrafo e outro.
  • <br> (Quebra de linha): Uma tag auto-contida (<br>) usada para pular linha dentro de um mesmo parágrafo. Use com moderação!

2. Listas: Ordenadas e Não Ordenadas 📋

As listas são fundamentais para organizar itens, menus e instruções.

🔹 Lista Não Ordenada (<ul>)

Usada quando a ordem dos itens não importa (exibe "bolinhas"). * <ul>: Unordered List (Lista Não Ordenada). * <li>: List Item (Item da Lista).

<ul>
    <li>HTML5</li>
    <li>CSS3</li>
    <li>JavaScript</li>
</ul>

🔢 Lista Ordenada (<ol>)

Usada quando a sequência é importante (exibe números). * <ol>: Ordered List (Lista Ordenada).

<ol>
    <li>Ligar o computador</li>
    <li>Abrir o editor</li>
    <li>Escrever o código</li>
</ol>

A tag <a> (Anchor/Âncora) é o que torna a internet uma "teia" conectada.

<a href="https://www.google.com" target="_blank">Ir para o Google</a>
  • href: O atributo mais importante. Define o destino (URL).
  • target="_blank": Abre o link em uma nova aba. Se omitido, abre na mesma aba.
  1. Externos: Apontam para outros sites (precisam do https://).
  2. Internos: Apontam para outras páginas do seu próprio projeto.
<a href="sobre.html">Saber mais sobre mim</a>

5. Visualizando com Mermaid 📊

graph LR
    A[Página Home] -- href='contato.html' --> B[Página Contato]
    A -- href='https://github.com' --> C[Site Externo]

6. Prática: Menu de Navegação 🚀

Vamos criar um menu funcional no terminal:

$ touch index.html contato.html
$ # No index.html, adicione:
$ <ul>
$   <li><a href="index.html">Início</a></li>
$   <li><a href="contato.html">Contato</a></li>
$ </ul>

[!IMPORTANT] Nunca use espaços nos nomes dos arquivos que serão linkados! meu projeto.html vai quebrar o link. Use meu-projeto.html.

7. Mini-Projeto: Favoritos da Web ⭐

  1. Crie uma página HTML estruturada.
  2. Adicione um título <h1> "Meus Sites Favoritos".
  3. Crie uma lista não ordenada com 3 itens.
  4. Cada item da lista deve conter um link (<a>) para um site diferente, abrindo em uma nova aba.
  5. Adicione um parágrafo abaixo da lista explicando por que você gosta desses sites.

8. Exercícios Progressivos 📝

Básicos

  1. Qual o atributo obrigatório da tag <a> para que o link funcione?
  2. Qual a diferença visual entre <ul> e <ol>?

Intermediários

  1. Como fazer para um link abrir em uma aba separada do navegador?
  2. Crie o código de uma lista ordenada com os 3 passos para fazer um café.

Desafio 🧠

  1. É possível transformar uma imagem em um link? Como você faria isso (tente imaginar a estrutura das tags)?

Próxima Aula: Vamos dar vida ao site com Imagens e SVG! 🖼️