Links HTML: Crie Hiperlinks Externos e Internos

Introdução

Bem-vindo ao laboratório de Links HTML! Hiperlinks são a base da World Wide Web, permitindo que os usuários naveguem entre páginas e recursos. Em HTML, links são criados usando a tag <a> (âncora).

Neste laboratório, você aprenderá as habilidades essenciais para criar e gerenciar links. Você começará criando um link externo básico, depois aprenderá como fazê-lo abrir em uma nova aba do navegador. Depois disso, você criará um link interno que salta para outra seção na mesma página. Finalmente, você adicionará uma dica (tooltip) a um link para uma melhor experiência do usuário.

Você trabalhará com um arquivo index.html no WebIDE. Você pode ver suas alterações ao vivo alternando para a aba "Web 8080" na interface LabEx.

Vamos começar!

Adicione uma tag com o atributo href para link externo

Nesta etapa, você criará seu primeiro hiperlink. A tag <a>, que significa "âncora" (anchor), é usada para definir um hiperlink. O atributo mais importante do elemento <a> é href, que especifica a URL de destino do link.

Vamos adicionar um link para o site LabEx.

Primeiro, abra o arquivo index.html no explorador de arquivos no lado esquerdo do WebIDE.

Agora, encontre o elemento <h2>Section 1</h2> e adicione a seguinte tag <a> dentro da tag <p> logo após ele.

<a href="https://labex.io">Visit LabEx</a>

O corpo do seu arquivo index.html agora deve se parecer com isto. Observe o novo link dentro da primeira seção.

<body>
  <h1>Welcome to the HTML Links Lab</h1>
  <p>
    This page will be used to practice creating different kinds of HTML links.
  </p>

  <nav>
    <!-- Navigation links will be added here -->
  </nav>

  <div class="section">
    <h2>Section 1</h2>
    <p>
      <a href="https://labex.io">Visit LabEx</a>
    </p>
  </div>

  <div class="section">
    <h2>Section 2</h2>
    <p>
      This is the section we will link to from the top of the page. It is placed
      far down to demonstrate the page jump effect.
    </p>
  </div>
</body>

Após adicionar o código, salve o arquivo (Ctrl+S ou Cmd+S). Em seguida, mude para a aba "Web 8080" para ver seu novo link. Clicar nele o levará para a página inicial do LabEx.

Defina o atributo target como _blank para nova aba

Nesta etapa, você aprenderá como fazer um link abrir em uma nova aba do navegador. Por padrão, os links abrem na mesma aba. Para alterar esse comportamento, usamos o atributo target.

Definir target="_blank" instrui o navegador a abrir o documento vinculado em uma nova aba ou janela. Esta é uma prática comum para links externos, pois mantém o usuário em seu site enquanto permite que ele visite o recurso externo.

Vamos modificar o link que você criou na etapa anterior. Adicione o atributo target="_blank" à tag <a>.

<a href="https://labex.io" target="_blank">Visit LabEx</a>

A primeira seção do seu arquivo index.html atualizado agora deve conter este link modificado:

<div class="section">
  <h2>Section 1</h2>
  <p>
    <a href="https://labex.io" target="_blank">Visit LabEx</a>
  </p>
</div>

Salve o arquivo e mude para a aba "Web 8080". Agora, ao clicar no link "Visit LabEx", ele deverá abrir em uma nova aba do navegador, deixando a aba do seu ambiente de laboratório aberta.

Crie um link interno com href para âncora de id

Nesta etapa, criaremos um link interno, também conhecido como "âncora de página" ou "link de salto". Esses links permitem que os usuários saltem para uma parte específica da mesma página, o que é muito útil para documentos longos.

Para criar um link interno, você define o atributo href com um símbolo de hash (#) seguido pelo id do elemento para o qual deseja vincular. Por exemplo, href="#section-name".

Vamos adicionar um link dentro do elemento <nav> no topo da nossa página que saltará para a "Seção 2".

Adicione a seguinte linha dentro da tag <nav>:

<a href="#section2">Jump to Section 2</a>

A área de navegação do seu arquivo index.html agora deve se parecer com isto:

<nav>
  <!-- Navigation links will be added here -->
  <a href="#section2">Jump to Section 2</a>
</nav>

Salve o arquivo e verifique a aba "Web 8080". Você verá o novo link no topo. Se você clicar nele agora, nada acontecerá porque ainda não definimos a âncora de destino. Faremos isso na próxima etapa.

Adicione o atributo id ao elemento para ancoragem

Na etapa anterior, você criou um link apontando para #section2. Agora, você precisa criar o destino para esse link. Isso é feito usando o atributo id.

O atributo id fornece um identificador único para um elemento HTML em uma página. O valor do id deve ser único dentro do documento HTML. Nosso link interno href="#section2" procurará um elemento com id="section2".

Vamos adicionar este id à tag <h2> da Seção 2. Encontre a seguinte linha:

<h2>Section 2</h2>

E modifique-a para incluir o atributo id:

<h2 id="section2">Section 2</h2>

A segunda seção do seu arquivo index.html atualizado agora deve se parecer com isto:

<div class="section">
  <h2 id="section2">Section 2</h2>
  <p>
    This is the section we will link to from the top of the page. It is placed
    far down to demonstrate the page jump effect.
  </p>
</div>

Salve o arquivo e volte para a aba "Web 8080". Clique no link "Jump to Section 2" no topo da página. O navegador agora deve rolar suavemente para o título "Section 2".

Nesta etapa final, você aprenderá como adicionar um tooltip a um link. Um tooltip fornece informações extras, não essenciais, e geralmente aparece quando um usuário passa o mouse sobre um elemento. Isso pode melhorar a acessibilidade e a experiência do usuário.

Podemos adicionar um tooltip a qualquer elemento, incluindo um link, usando o atributo global title.

Vamos adicionar um título descritivo ao nosso link externo para o LabEx. Encontre o link que você criou nas duas primeiras etapas e adicione um atributo title a ele.

<a href="https://labex.io" target="_blank" title="Go to the LabEx homepage"
  >Visit LabEx</a
>

Seu arquivo index.html final agora deve conter todos os elementos que adicionamos ao longo deste laboratório. A primeira seção ficará assim:

<div class="section">
  <h2>Section 1</h2>
  <p>
    <a href="https://labex.io" target="_blank" title="Go to the LabEx homepage"
      >Visit LabEx</a
    >
  </p>
</div>

Salve o arquivo pela última vez. Vá para a aba "Web 8080" e passe o mouse sobre o link "Visit LabEx". Uma pequena caixa deve aparecer com o texto "Go to the LabEx homepage".

Resumo

Parabéns por completar o laboratório! Você aprendeu os fundamentos de criação e personalização de links em HTML.

Neste laboratório, você praticou como:

Usar a tag <a> com o atributo href para criar links externos.
Usar o atributo target="_blank" para abrir links em uma nova aba.
Criar âncoras de página internas usando href="#id" para navegação dentro de uma única página.
Usar o atributo id para definir o destino de um link interno.
Adicionar tooltips informativos aos seus links com o atributo title para uma melhor experiência do usuário.

Essas habilidades são essenciais para construir websites navegáveis e amigáveis. Continue praticando para se tornar mais proficiente em HTML!

Links HTML