Front-end com Vue 3

Aparência

Âncoras (<a>) ​

As tags de âncora, representadas por <a>, são um dos elementos mais fundamentais e poderosos do HTML, permitindo a criação de hiperlinks que conectam diferentes partes da web entre si ou diferentes seções dentro de uma mesma página. Esses links podem ser direcionados para recursos externos (outros websites) ou internos (outras partes do mesmo documento). Compreender como utilizar efetivamente as tags <a> é crucial para a navegação na web e para a estruturação lógica de conteúdo online.

  • Links Externos: Quando queremos criar um link para outro website, usamos um URL absoluto como valor do atributo href. Isso informa ao navegador para solicitar e carregar o recurso localizado nesse endereço específico. Por exemplo, um link para o Google seria criado assim: <a href="https://www.lg.com.br/">Visite o Google</a>.

  • Links Internos: Para criar links que apontam para diferentes seções do mesmo documento, usamos âncoras internas. Isso é feito atribuindo um id único a um elemento HTML e então criando um link usando um URL relativo que aponta para esse id. Por exemplo, para saltar para uma seção marcada com <div id="secao1">, o link seria <a href="#secao1">Ir para a Seção 1</a>.

Exemplo Prático ​

html
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <title>Exemplo de Âncoras</title>
  </head>
  <body>
    <h1>Exemplo de Links Externos e Internos</h1>

    <!-- Link Externo -->
    <p>
      Visite o
      <a href="https://www.wikipedia.org" target="_blank">Wikipedia</a> para
      mais informações.
    </p>

    <!-- Link Interno -->
    <p>
      Clique <a href="#conclusao">aqui</a> para ir diretamente para a conclusão.
    </p>

    <!-- Conteúdo a ser saltado -->
    <div id="conclusao" style="margin-top: 200px;">
      <h2>Conclusão</h2>
      <p>Isso é tudo sobre links internos e externos!</p>
    </div>
  </body>
</html>

Atividade ​

  1. Links Externos: Adicione ao seu documento HTML um link para um site de sua escolha, como o site da sua escola ou universidade. Lembre-se de usar o atributo target="_blank" se quiser que o link seja aberto em uma nova aba do navegador.

  2. Links Internos: Crie uma pequena página com várias seções, marcadas com diferentes ids. Em seguida, no topo da página, insira links que permitam aos usuários saltar para cada seção. Isso melhorará a navegação dentro da sua página, especialmente se ela for extensa.

Essa atividade não apenas reforçará seu entendimento sobre como utilizar links internos e externos, mas também ajudará a melhorar a estrutura e a usabilidade das suas páginas web.